HTML Table merupakan tag-tag yang memungkinkan untuk menyusun data atau konten kedalam bentuk baris dan kolom seperti layaknya sebuah tabel. Terdapat beberapa tag yang harus dipahami terlebih dahulu dalam menyusun sebuah tabel yaitu :
- <table>
- <thead>
- <tbody>
- <tfoot>
- <tr>
- <th>
- <td>
- <colgroup>
- <col>
- <caption>
<table>
Tag <table> merupakan tag utama dalam menyusun sebuah table. Setiap table diawali dengan tag ini yang kemudian elemen - elemen penyusun table lainnya dapat diletakkan di dalam elemen tag ini. syntax :
<table border="1" width="100">
.........
</table>atribut umum yang dapat digunakan pada elemen table adalah :
| Atribut | Description |
| border | 1, 2, 3... semakin besar maka pinggiran border akan semakin tebal |
| width | lebar tabel (dapat menggunakan satuan px, atau persentase). |
| align | mengatur posisi align dari table (left, right, center). |
<tr>
<tr> atau yang biasa disebut dengan table row merupakan tag yang digunakan untuk membentuk sebuah baris pada table. Pada HTML, setiap konten data yang terdapat pada tabel disebut dengan cell. Untuk dapat membentuk cell data pada tabel, maka dibutuhkan baris yang menampung cell - cell tersebut terlebih dahulu.
HTML :
<table border="1">
<tr>
<td>1</td>
<td>Andi</td>
</tr>
</table>Output :
| 1 | Andi |
atribut umum yang dapat digunakan pada elemen tr adalah :
| Atribut | Description |
| align | mengatur posisi align dari konten text di dalam tr (left, right, center, justify, char). |
| valign | mengatur posisi vertical align dari konten text di dalam tr (top, middle, bottom, baseline). |
<td>
<td> atau yang biasa disebut dengan table data merupakan tag yang digunakan untuk membentuk sebuah cell konten pada table. <td> juga dapat disebut dengan kolom data. Jumlah kolom data pada tiap baris (tr) haruslah sama, terkecuali pada kasus tertentu seperti merger cell pada penggunaan colspan dan rowspan. Contoh dari implementasi <td> dapat dilihat pada contoh <tr> diatas.
atribut umum yang dapat digunakan pada elemen td adalah :
| Atribut | Description |
| width | lebar cell (dapat menggunakan satuan px, atau persentase). |
| align | mengatur posisi align dari konten text di dalam td (left, right, center, justify, char). |
| valign | mengatur posisi vertical align dari konten text di dalam td (top, middle, bottom, baseline). |
<th>
<th> atau yang biasa disebut dengan table header merupakan tag yang sama dengan <td>. Hanya saja, <th> biasa dibuat sebagai kepala kolom pada tabel. Konten teks yang berada pada element ini akan dicetak tebal.
HTML :
<table border="1">
<tr>
<th>Nomor</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
</tr>
</table>Output :
| Nomor | Nama |
|---|---|
| 1 | Andi |
atribut umum yang dapat digunakan pada elemen td adalah :
| Atribut | Description |
| width | lebar cell (dapat menggunakan satuan px, atau persentase). |
| align | mengatur posisi align dari konten text di dalam th (left, right, center, justify, char). |
| valign | mengatur posisi vertical align dari konten text di dalam th (top, middle, bottom, baseline). |
<thead>, <tbody>, <tfoot>
tag <thead>, <tbody>, dan <tfoot> digunakan untuk mengelompokkan baris tabel sehingga browser dapat mengidentifikasi baris - baris tabel yang mana saja yang tergolong kedalam baris header, baris body dan baris footer. tag atau elemen ini sifatnya adalah opsional dimana anda dapat menggunakannya di dalam sebuah tabel atau tidak. Namun, untuk keperluan tambahan lainnya seperti styling dan printing, element ini sangat membantu dalam mengatur struktur dari konten pada tabel.
<table border="1">
<thead>
<tr>
<th>.....</th>
<th>.....</th>
</tr>
</thead>
<tbody>
<tr>
<td>.....</td>
<td>.....</td>
</tr>
<tr>
<td>.....</td>
<td>.....</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>.....</td>
<td>.....</td>
</tr>
</tfoot>
</table>
<colgroup> dan <col>
<colgroup> dan <col> digunakan untuk menspesifikasikan kelompok kolom pada tabel yang digunakan untuk formatting. Berikut contoh <colgroup> dan <col> :
HTML :
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>Output :
| ISBN | Title | Price |
|---|---|---|
| 3476896 | My first HTML | $53 |
| 5869207 | My first CSS | $49 |
Merger
Pada HTML, dimungkinkan untuk melakukan merger atau penggabungan dua atau lebih cell yang terdapat pada table. Penggabungan atau merger dapat dilakukan secara kolom menggunakan atribut colspan dan secara baris menggunakan atribut rowspan. Atribut colspan dan rowspan dimiliki oleh elemen <td> dan <th>. Hal yang harus diperhatikan adalah penggunaan merger baik secara kolom maupun secara baris akan menghilangkan jumlah cell yang dituliskan pada kode HTML dikarenakan cell yang hilang tersebut dianggap sudah menyatu dengan cell lainnya.
Contoh merger kolom :
HTML :
<table border="1">
<tr>
<th colspan="2">Info</th>
<th>Nama</th>
</tr>
<tr>
<td>0153531233</td>
<td>T. Informatika</td>
<td>Andi</td>
</tr>
</table>Output :
| Info | Nama | |
|---|---|---|
| 0153531233 | T. Informatika | Andi |
Contoh merger baris :
HTML :
<table border="1">
<tr>
<th>Program Studi</th>
<th>Nama</th>
</tr>
<tr>
<td rowspan="3">T. Informatika</td>
<td>Andi</td>
</tr>
<tr>
<td>Budi</td>
</tr>
<tr>
<td>Joko</td>
</tr>
</table>Output :
| Program Studi | Nama |
|---|---|
| T. Informatika | Andi |
| Budi | |
| Joko |
Untuk mencoba secara online, silahkan menggunakan online editor dari www.w3schools.com berikut :
