Tabel dalam HTML diberi tanda dengan Tag <table> berfungsi sebagai penempatan dan penyusunan data atau informasi agar lebih rapi dan terstruktur. Dalam kondisi standar Tag tabel memiliki beberapa komponen penyusun seperti:
- <table> : Tag pembuka/awal membuat tabel
- <thead> : bagian kepala atau judul data tabel
- <tbody> : Isi data/konten dari tabel
- <tr> : Baris tabel
- <td> : kolom tabel
Setiap bagian tersebut di atas memiliki perannya masing-masing baik itu dari segi tampilan maupun pengelolaan. Contoh pembuatan tabel HTML sebagai berikut:
<table border=1>
<thead>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Udin</td>
<td>Bandung</td>
</tr>
<tr>
<td>3</td>
<td>Somplak</td>
<td>Bogor</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Udin</td>
<td>Bandung</td>
</tr>
<tr>
<td>3</td>
<td>Somplak</td>
<td>Bogor</td>
</tr>
</tbody>
</table>
Penjelasan:
border=1 : mengatur ketebalan garis tabel, nilainya bisa diubah sesuai keinginan.
Maka, dari skrip di atas akan menghasilkan tampilan seperti di bawah ini:
| No. | Nama | Alamat |
| 1 | Ahmad | Jakarta |
| 2 | Udin | Bandung |
| 3 | Somplak | Bogor |
Lalu bagaimana membuat tabel dengan multikolom/baris dan marge. Hal itu bisa Anda baca pada postingan Menyatukan kolom/baris pada table. Tapi sebelumnya, pahami dulu tata cara pembuatan tabel HTML melalui contoh di atas.
Tampilan tabel akan lebih sempurna jika ditambahkan dengan skrip CSS. Hal itu akan kita bahas pada postingan yang akan datang juga tentang cara menambahkan CSS pada tabel HTML.
Silahkan pelajari lebih dalam mengenai pembuatan tabel. Jika Anda bingung silahkan bertanya pada kolom komentar. Demikian tulisan hari ini. Sampai jumpa.