Untuk membuat seluruh kolom berubah, misalkan kita ingin merubah warna background pada seluruh kolom pertama dan ketiga dari tabel, kita memerlukan 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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!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> |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!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> |
Dari contoh kode HTML diatas, atribut width digunakan untuk mengatur lebar dari kolom tabel. Misalnya untuk kolom pertama, atribut width=”75px” digunakan untuk membuat lebar kolom menjadi 75 pixel.
