Tutorial Tabel HTML Part 9: Cara Membuat Group Kolom Tabel (tag colgroup dan tag col)
Halo Kawan-kawan,
Seperti yang telah kita bahas pada artikel tutorial tabel HTML sebelumnya, maka jika anda perhatikan bahwa sebuah tabel di dalam HTML dibuat secara baris per baris dengan menyusun beberapa tag td di dalam tag tr. Pola penyusunan seperti ini akan terasa menyulitkan jika kita ingin merubah atribut yang berlaku untuk seluruh kolom, terutama jika menggunakan CSS.
Jika sebelumnya anda telah mempelajari CSS, untuk memanipulasi sebuah baris, kita hanya perlu membuat atribut class atau style pada tag tr, dan seluruh baris tersebut akan berubah, namun tidak sebaliknya jika kita ingin membuat seluruh kolom berubah. Contoh kasusnya, misalkan kita ingin merubah warna background pada seluruh kolom pertama dan ketiga dari tabel.
Untuk keperluan ini, HTML memiliki tag colgroup dan tag col yang berfungsi untuk ‘mengaitkan’ keseluruhan kolom. Tanpa tag ini kita harus mengakses satu per satu sel tabel.
Sebagai contoh penggunaan tag ini, silahkan buka aplikasi text editor, lalu ketikkan kode berikut, dan save sebagai tabelcol.html
Contoh penggunaan tag colgroup dan tag col :
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan tag colgroup dan col dalam Tabel</title>
</head>
<body>
<h3>Belajar Tag colgroup dan col dalam Tabel</h3>
<table border="1">
<colgroup>
<col style="background-color:yellow" />
<col style="background-color:green" />
<col />
</colgroup>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr style="color:blue">
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasil Code:
Untuk contoh diatas, saya menggunakan tag style untuk ‘memasukkan’ kode CSS. Lebih jauh tentang CSS, silahkan mempelajarinya pada Tutorial Belajar CSS.
Di dalam kode HTML tersebut, tag colgroup dan tag col dibuat pada baris pertama sebelum tag tr tabel. Setiap tag col harus disesuaikan dengan jumlah kolom dari tabel. Dengan merubah style pada tag col, efeknya seluruh sel tabel pada kolom tersebut juga akan berubah. Untuk baris, hal yang sama dapat kita lakukan dengan merubah atribut dari tag tr.
Penggunaan atribut width pada tag col
Salah satu atribut yang bisa kita gunakan pada tag col adalah atribut width. Atribut ini digunakan untuk mengatur lebar dari masing-masing kolom dalam tabel.
Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelcolwidth.html
Contoh penggunaan atribut width pada tag col :
<!DOCTYPE html>
<html>
<head>
<title>Belajar atribut width dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut width dalam Tabel</h3>
<table border="1">
<colgroup>
<col width="75px" style="background-color:blue" />
<col width="150px" />
<col width="300px" />
</colgroup>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasil Code:
Dari contoh kode HTML diatas, saya menggunakan atribut width untuk mengatur lebar dari kolom tabel. Misalnya untuk kolom pertama, atribut width=”75px” digunakan untuk membuat lebar kolom menjadi 75 pixel.