Tabel Dengan Spanning
Dalam tutorial belajar tabel HTML kali ini kita akan membahas tentang spanning atau menggabungkan baris/kolom.
Spanning tabel HTML artinya adalah menyatukan atau menggabungkan beberapa kolom atau baris dalam sebuah tabel. Untuk melakukan spanning, kita memerlukan parameter rowspan dan colspan.
Berikut ini contoh kodenya.
<table border="1">
<tr>
<th>Judul Kolom 1</th>
<th>Judul Kolom 2</th>
<th>Judul Kolom 3</th>
</tr>
<tr><td rowspan="2">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td><td>Baris 1 Kolom 3</td></tr>
<tr><td>Baris 2 Kolom 2</td><td>Baris 2 Kolom 3</td></tr>
<tr><td colspan="3">Baris 3 Kolom 1</td></tr>
</table>
Dalam contoh kode di atas, kita juga melihat ada sebuah tag tabel HTML baru yaitu <th>. Tag <th> ini gunanya adalah untuk membuat judul kolom. Biasanya judul kolom ini akan dibuat dengan tulisan yang tebal.Parameter untuk spanning kita letakkan dalam tag <td>. Untuk menyatukan 2 baris dalam sebuah tabel HTML, kita menggunakan parameter rowspan. Sedangkan untuk menyatukan 2 kolom dalam sebuah tabel HTML, kita menggunakan colspan.
Jika anda menginputkan syntax diatas dengan benar, Maka nanti hasilnya adalah sebagai berikut :
| Judul Kolom 1 | Judul Kolom 2 | Judul Kolom 3 |
|---|---|---|
| Baris 1 Kolom 1 | Baris 1 Kolom 2 | Baris 1 Kolom 3 |
| Baris 2 Kolom 2 | Baris 2 Kolom 3 | |
| Baris 3 Kolom 1 | ||
EmoticonEmoticon