Sebelumnya, kita sudah bahas struktur tabel HTML. Sekarang kita akan bahas cara membuat group kolom tabel HTML. Berikut panduan AneIqbal selengkapnya.
Seperti yang kita tahu, untuk membuat tabel di HTML, dibuat secara per baris dengan tag <tr> dan tag <td>. Sehingga, ini pun berpengaruh juga ke CSSnya.
Kita bisa memberikan style ke satu baris atau lebih tapi kita tidak bisa memberikan style ke satu kolom atau lebih. Lalu, bagaimana caranya untuk memberikan style background berwarna merah ke sel yang ada di kolom ke-1 dan ke-3? Misalnya.
Untungnya, HTML menyediakan tag khusus untuk mengatasi permasalahan tersebut. Kita dapat menanganinya dengan bantuan tag <colgroup> dan tag <col>. Bayangkan, kalau tag ini nggak ada, kita harus beri style tiap sel secara satu per satu!
Markicob, gan. Mari kita coba.
Ketik kode HTML seperti berikut.
<!DOCTYPE html>
<html>
<head>
<title>Membuat group kolom tabel di tabel HTML</title>
</head>
<body>
<h2>Penggunaan tag colgroup dan col</h2>
<table border="1" cellpadding="1" cellspacing="1">
<colgroup>
<col style="background:red" />
<col />
<col style="background:red" />
<col />
</colgroup>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Nilai</th>
<th>Huruf</th>
</tr>
<tr>
<td>1.</td>
<td>Ane.</td>
<td>92</td>
<td>A+</td>
</tr>
<tr>
<td>1.</td>
<td>Ane.</td>
<td>92</td>
<td>A+</td>
</tr>
<tr>
<td>1.</td>
<td>Ane.</td>
<td>92</td>
<td>A+</td>
</tr>
</table>
</body>
</html>
Simpan, lalu jalankan. Begini hasilnya.
Tag <colgroup> dan tag <col> harus diletakkan di dalam tag <table> dan di luar tag <tr>. Jika diletakkan diluar <table>, maka tidak akan ada efek style pada tabelnya. Sesuaikan juga jumlah tag <col> dengan jumlah kolom tabelnya.
Selanjutnya >> Cara Mengatur Lebar Banyak Kolom Tabel HTML.
