Menggabungkan Baris/Kolom pada Table HTML

Table tidak selalu harus berbentuk kotak yang berbaris sejajar secara horizontal dan vertical, tetapi bisa juga kita buat dengan bentuk yang bervariasi, misalnya pada baris pertama berisi 1 kolom, baris kedua berisi 3 kolom dan baris ketiga berisi 2 kolom. Untuk menggabungkan Kolom kita memakai atribut colspan pada tag TD sedangkan untuk menggabungkan Baris kita memakai atribut rowspan.

Kalau anda bingung membayangkan, cobalah lihat contoh TABLE dibawah ini:

HEADER
LEFT BOX	CONTENT	RIGHT BOX
	FOOTER

Untuk membuat Table seperti diatas, pertama anda harus lihat berapa jumlah kolom terbanyak pada Table kemudian digabungkan menjadi 1 kolom. pada kasus diatas, kolom terbanyak adalah 3, kemudian kita buat kodenya seperti berikut:

<table>
<tr>
<td colspan=”3″>HEADER</td>
</tr>

Selanjutnya kita lihat pada baris kedua, berapa banyak baris yang digabung menjadi 1 baris?
pada kasus diatas ada 2 baris, selanjutnya kita buat kode seperti berikut:

<tr>
<td rowspan=”2″>LEFT BOX</td>
<td>CONTENT</td>
<td>RIGHT BOX</td>
</tr>

Dan langkah terakhir, kita perhatikan sekali lagi pada baris ketiga, berapa kolom yang di gabung menjadi satu kolom?
pada kasus ini adalah 2 kolom, jadi kodenya akan menjadi seperti ini:

<tr>
<td colspan=”2″>FOOTER</td>
</tr>
</table>

Jadi kalau digabungkan kode diatas akan menjadi seperti berikut:

<table border=”1″ width=”100%”>
<tr>
<td colspan=”3″>HEADER</td>
</tr>
<tr>
<td rowspan=”2″>LEFT BOX</td>
<td>CONTENT</td>
<td>RIGHT BOX</td>
</tr>
<tr>
<td colspan=”2″>FOOTER</td>
</tr>
</table>

Hasilnya akan menjadi sebuah Table dengan kolom bervariasi seperti contoh diatas.
Nah, kira kira seperti itu penjelasan saya tentang cara menggabungkan kolom atau baris pada Table HTML.
SELAMAT MENCOBA……