Kesempatan kali ini blog membahas yaitu cara membuat tabel di HTML, kegunaanya tentu sangat penting seperti contoh ingin membuat Form, tampilan sebuah database, atau untuk data data perbandingan, dll. Biasanya untuk penggunaan dalam membuat tabel akan lebih dipermudah jika menggunakan Aplikasi Dreamweaver (Adobe/ Macromedia) yaitu langsung dari tahap desainnya.
Namun perlu diketahui bahwa untuk awal, kamu juga harus perlu mengetahui dasar membuat tabel sederhana dengan menggunakan tool biasa (NOTEPAD).
Hal ini ditujukan agar dapat paham konteks, bentuk Tag yang dipakai dalam membuat tabel.
NB. Maka dalam pembahasan kali ini pun kita tetap menggunakan Notepad.
Tentu dalam tabel dalam tabel ada "baris" dan "kolom".
Berikut Tag membuat Tabel adalah <table> </table>
Penulisan Tag tabel berada di antara <body> seperti ini
<body><table>
Namun Bentuk diatas belumlah cukup, yang mana tag <table> masih hanya membuat garis kosong.</table></body>
Sedangkan Tag membuat Baris adalah <tr> </tr>
Penulisan Tag Baris berada diantara tag <table>
<table>Dan Tag membuat Kolom adalah <td> </td>
<tr>
</tr>
</table>
Penulisan Tag Kolom berada di dalam antara tag baris <tr>
Contoh Kolom 1.Sehingga secara otomatis jika kita ingin membuat tabel berisi 2 kolom akan seperti ini
<table>
<tr>
<td>ISI KOLOM</td>
</tr>
</table>
Contoh Kolom 2
<table><td>ISI KOLOM</td>
<tr>
<td>ISI KOLOM</td>
Kode diatas adalah sebuah tabel yang berisi dua kolom seperti gambar dibawah ini
</tr>
</table>
Jika ingin menambahkan baris kebawah berarti kita harus duplikasi tag <tr> tersebut seperti ini ;
<table><td>ISI KOLOM</td>
<tr>
<td>ISI KOLOM</td>
<tr>
</tr>
<td>ISI KOLOM</td>
<td>ISI KOLOM</td>
</tr>
</table>
Sehingga menghasilkan seperti ini ;
Demikian selanjutnya jika ingin menambah baris dan kolom misalknya 8 Baris 2 kolom,
lakukan duplikat tag <tr> baris sebanyak 8 kali,Bagaimana sobat kira kira paham kan.. (hehe)
dan setiap 1 tag <tr> berisi 2 duplikat tag kolom <td>
Attribut Attribut Dalam Tag Tabel Dalam tabel penggunaan Attribut berfungsi disaat seperti colntoh kita ingin memperlebar ukuran Kolom, mengganti latar tabel. Berikut attribut nya ;
Untuk mengatur lebar kolom colspan = " "
Untuk mengatur jarang antar cell cellspacing =""
Mengatur jarak pinggiran Bingkai dengan isi cellpadding =""
Mengatur latar Tabel Background =""
Sehingga Penulisan dalam Html demikian ;
<html>
<head>Penjelasannya demikian :
<title>Untitled Document</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td colspan="50">ISI</td>
<td>ISI</td>
</tr>
<tr>
<td cellspacing="30">ISI</td>
<td>ISI</td>
</tr>
</table>
</body>
</html>
1. Attribut yang ada pada kode tag <table> yaitu
width="200" berfungsi untuk menambah lebar bingkai tabel
border="1" berfungsi untuk menambah ketebalan Garis Bingkai agar lebih terlihat jelas
2. Attribut yang ada pada kode tag <td> (kolom) yaitu
colspand="50" berfungsi untuk mengatur lebar pada kolom
cellspacing="30" berfungsi mengatur jarak antar cell
demikian selanjutnya sehingga menghasilkan tabel seperti dibawah
Sekian mengenai cara Membuat Tabel dengan Tools sederhana, untuk postingan pembahasan selanjutnya akan segera ditambahkan di kotak komentar, atau klik Halaman Kategori DESAIN WEB diatas. Semoga Bermanfaat, dan dapat menambah refrensi kamu sobat, Terima kasih telah berkunjung.
Salam BLogger.
Klik Like atau bagikan ke teman yang ingin belajar HTML. Silahkan tinggalkan komentar jika ada yang sulit dipahami.
.jpg)
.png)
Makasi tambahan infonya gan...
ReplyDeleteBagi agan yang berminat belajar membuat web bisa dilihat di situs berikut ini Kursus Web di Denpasar