Membuat dan menggabung sel tabel HTML

Membuat dan menggabung sel tabel HTML

Dalam membuat tabel, seringkali kita memerlukan penggabungan beberapa sel sekaligus. HTML menyediakan fasilitas untuk menggabungkan beberapa sel dengan menggunakan atribut colspan dan rowspan pada elemen td atau th.

• colspan digunakan untuk menggabungkan beberapa kolom sekaligus, contoh menggabung 3 kolom, maka kita dapat menuliskan colspan="3".
• rowspan digunakan untuk menggabungkan beberapa baris sekaligus, contoh menggabung 2 baris, maka kita dapat menuliskan rowspan="2".

Kode dibawah ini adalah contoh penggabungan tabel (untuk posting artikel / entry baru posting mode HTML) :

<style>
table {border-collapse: collapse;margin:5px 0;}
table, td, th {border: 1px solid gray;;padding:0 5px;}
table th {background-color:DeepSkyBlue;color:whitesmoke;font:bold;text-align:center;}
table td {background-color:whitesmoke;font:normal;text-align:left;}
</style>
<table><tbody>
<tr>
<th rowspan="2">kolom-1 (2 rows)</th>
<th colspan="3">Kolom 2-3-4 gabung</th>
</tr>
<tr>
<th>Kolom 2</th>
<th>Kolom 3</th>
<th>Kolom 4</th>
</tr>
<tr>
<td>kolom-1 Data</td>
<td>kolom-2 Data</td>
<td>kolom-3 Data</td>
<td>kolom-4 Data</td>
</tr>
</tbody></table>

Tampilannya akan seperti ini :

Untuk menghilangkan penggabungan sel tabel : ganti kode yang berwarna merah dengan kode dibawah ini :

<tr>
<th>kolom-1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
<th>Kolom 4</th>
</tr>

sehingga kode html jadi seperti ini  :

<style>

table {border-collapse: collapse;margin:5px 0;}

table, td, th {border: 1px solid gray;;padding:0 5px;}

table th {background-color:DeepSkyBlue;color:whitesmoke;font:bold;text-align:center;}

table td {background-color:whitesmoke;font:normal;text-align:left;}

</style>
<table><tbody>
<tr>
<th>kolom-1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
<th>Kolom 4</th>
</tr>
<tr>
<td>k1 Data</td>
<td>k2 Data</td>
<td>k3 Data</td>
<td>k4 Data</td>
</tr>
</tbody></table>

Maka tampilan tabel akan sepeti dibawah ini :

kolom-1	Kolom 2	Kolom 3	Kolom 4
k1 Data	k2 Data	k3 Data	k4 Data