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

5 comments for “Menggabungkan Baris/Kolom pada Table HTML

  1. 11 September 2009 at 17:22

    lumayan, cukup rapi dan bermanfaat
    bisa kunjungi balik:
    http://www.lyasa.com

  2. rafli
    24 Februari 2010 at 16:29

    thanks boz……….atas ilmu ea

  3. geels
    5 April 2010 at 22:40

    tq besok ulangan ……………

  4. Rilia S
    24 Oktober 2010 at 10:59

    maksih

  5. 31 Juli 2011 at 00:15

    artikelnya menarik dan memudahkan orang yang baru belajar html… lanjutkan dengan artikel – artikel lainnya.

    Untuk jasa pembuatan Website murah di Bandung, kunjungi http://studiokomputer.com

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *