Menggabungkan Kolom Sebaris
Menggabungkan Kolom Sebaris Pada HTML Table
Sekarang perhatikan caranya bilamana kita ingin Menggabungkan Kolom yang Sebaris Pada Table.
Dalam contoh ini kita akan menggabungkan Kolom 1, Kolom 2 dan Kolom 3 menjadi hanya satu kolom yang panjang.
Caranya adalah dengan menyisipkan kode colspan=”#” didalam tag <td> seperti ini: <td colspan=”#”> tanda # bisa diganti dengan angka sebanyak kolom yang akan digabungkan.
Kolom yang akan kita gabungkan ini kodenya adalah:
<tr>
<td> Kolom 1 </td><td> Kolom 2 </td><td> Kolom 3 </td>
</tr>
Karena yang kita gabung adalah 3 buah kolom maka kita isikan angka 3 menggantikan tanda # dalam colspan=”#” menjadi <td colspan=”3″>
Kalau misalnya akan menggabungkan 2 kolom atau 5 kolom, maka colspannya diisi dengan angka 2 atau 5 sesuai dengan banyaknya kolom2 yang akan digabungkan.
Setelah kita menaruh colspan=”3″ tadi maka Kolom 2 dan Kolom3 harus dihapus.Dan Kolom 1 kita ganti namanya menjadi Kolom 1+2+3 supaya kita tidak lupa darimana Kolom ini berasal.
Sebelum diubah
<tr>
<td> Kolom 1 </td><td> Kolom 2 </td><td> Kolom 3 </td>
</tr>Sesudah diubah
<tr>
<td colspan=”3″>Kolom 1+2+3 </td>
</tr>
Sekarang 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>Kolom 1A</td><td>Kolom 2A</td><td>Kolom 3A</td>
</tr>
<tr>
<td>Kolom 1B</td><td>Kolom 2B</td><td>Kolom 3B</td>
</tr>
<tr>
<td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td>
</tr>
</table>
</body>
</html>
Dan sekarang tampilannya menjadi seperti ini :
Menggabung Kolom Sebaris
Sekarang terlihat Kolom 1, Kolom 2 dan Kolom 3 sudah bergabung dalam satu baris.
Begitulah cara Menggabungkan Kolom Sebaris pada HTML Table.
4 Responses to Menggabungkan Kolom Sebaris
Leave a Reply
   |
gand…cara d’atas d’coba d’postingan qo g mau y…?
mhon pencerahan…
thanks, sangat brmanfaat..
| good job |
gan ko gamau ia?
mav newbie gan
Ini dia yang aku cari.. sulit banget buat tabel bagi orang yg g kuliah seperti saya ini.. Thanks infonya