Menggabung Kolom Bersusun Pada HTML Table

Pada posting yang lalu kita sudah menggabungkan kolom html table yang berada pada satu baris.
Sekarang, pada posting kali ini saya akan menunjukkan cara Menggabungkan Kolom yang Bersusun dari atas kebawah pada HTML Table.

Untuk menggabungkan kolom bersusun dari atas kebawah ini kita menggunakan rowspan=”#” yang disisipkan pada tag <td> Tanda # bisa diganti dengan angka sebanyak kolom yang akan digabungkan.
Mari sekarang kita gabungkan beberapa kolom yang bersusun dari atas kebawah. Kita ambil saja Kolom 1A dengan Kolom 1B dan Kolom 3A dengan Kolom 3B.
Jadi ada 2 pasang kolom bersusun yang akan digabung.

Pertama masukkan dulu kode rowspan=”2″ kedalam tag <td>Kolom 1A</td> menjadi <td rowspan=”2″>Kolom 1A</td> Disini rowspan diisi angka 2 karena yang akan digabung adalah 2 kolom.
Kemudian ubah juga tag pada Kolom 3A menjadi <td rowspan=”2″>Kolom 3A</td>
Setelah itu <td>Kolom 1B</td> dan <td>Kolom 3B</td> dihapus.

Dan supaya masih bisa dilihat kolom2 mana saja yang sudah digabungkan maka nama Kolom 1A diubah namanya menjadi Kolom 1A + Kolom 1B dan Kolom 3A diubah namanya menjadi Kolom 3A + Kolom 3B.

Nah,disini saya akan memberikan sedikit keterangan.
Pada HTML Table jika tidak ditentukan lebarnya atau tingginya sebuah kolom,maka lebar atau tinggi kolom akan menyesuaikan dengan panjang atau tingginya huruf2 atau gambar yang ada.
Maka supaya Kolom 1A + Kolom 1B dan Kolom 3A + Kolom 3B tidak terlalu panjang,maka akan kita sisipkan tag <br /> diantara kolom2 itu supaya nama kolom2 itu menyusun dari atas kebawah dan tidak memanjang kesamping.
Menjadi seperti ini <td>Kolom 1A<br />Kolom 1B</td> dan <td>Kolom 3A<br />Kolom 3B</td>

Sekarang lihat kode HTML nya menjadi seperti ini:

<html>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
<table border="2" width="450">
<tr>
<td colspan="3">Kolom 1+2+3 </td>
</tr>
<tr>
<td rowspan="2">Kolom 1A<br />+Kolom 1B</td>
<td>Kolom 2A</td>
<td rowspan="2">Kolom 3A<br />+Kolom 3B</td>
</tr>
<tr>
<td>Kolom 2B</td>
</tr>
<tr>
<td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td>
</tr>
</table>
</body>
</html>

Dan tampilannya menjadi seperti ini:

Menggabung Kolom Bersusun

Menggabung Kolom Bersusun





Demikianlah cara menggabungkan kolom bersusun pada Belajar HTML Table

4 Responses to Menggabung Kolom Bersusun

  • Yang Surya says:

    Supaya kolom tidak memanjang sesukanya, maka kolomnya harus diberi ukuran tertentu, misalnya 100px. Jadi jika panjang kalimat melebihi panjang kolom, maka kalimatnya akan turun menyusun kebawah.
    Kode htmlnya:
    <table><tr><td width=”100″>Kalimat yang lebih panjang daripada lebar kolomnya</td></tr></table>

  • kalau untuk mengatur lebar kolom,
    karna lebar kolomnya berubah memanjang waktu tulisannya melebih panjang kolom, padahal sebelumnya sudah dibuat

  • upik says:

    makasih, ini sangat membantu saya

  • mantap mas..tak simpan dulu ya kodenya..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 
 
Kaya Mendadak ala Master
 
AGCZON LUXURY - Profesional Amazon Script Machine  :
Keyword Research Tool
Top Articles