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 BOXCONTENTRIGHT 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……

0 komentar:

Poskan Komentar

Next Prev
▲Top▲