Seperti yang telah kita bahas di artikel panduan tabel HTML sebelumnya, karenanya jikalau sahabat perhatikan bahwa sebuah tabel di pada HTML dikerjakan secara baris per baris dengan menyusun beberapa tag td di pada tag tr. Pola penyusunan seperti ini akan terasa menyulitkan jikalau kita ingin merubah atribut yang berlaku bagi seluruh kolom, terutama jikalau menggunakan CSS.
Jikalau sebelumnya sahabat telah mempelajari CSS, bagi memanipulasi sebuah baris, kita hanya perlu merancang atribut class atau style di tag tr, dan seluruh baris tersebut akan berubah, namun tak sebaliknya jikalau kita ingin merancang seluruh kolom berubah. Contoh kasusnya, misalkan kita ingin merubah warna background di seluruh kolom pertama-tama dan ketiga dari tabel.
Bagi kebutuhan ini, HTML mempunyai tag colgroup dan tag col yang berfungsi bagi ‘mengaitkan’ keseluruhan kolom. Tanpa tag ini kita mesti mengakses satu per satu sel tabel.
Selaku contoh pemakaian tag ini, silahkan buka program text editor, lalu ketikkan kode berikut, dan save selaku tabelcol.html
Contoh pemakaian tag colgroup dan tag col :
|
1 |
]<!DOCTYPE html><br/><html><br/> <head><br/> <title>Pemakaian tag colgroup dan col pada Tabel</title><br/> </head><br/><body><br/><h3>Belajar Tag colgroup dan col pada Tabel</h3><br/><table border=1><br/> <colgroup><br/> <col style=background-color:yellow /><br/> <col style=background-color:green /><br/> <col /><br/> </colgroup><br/> <tr><br/> <th>Judul 1</th><br/> <th>Judul 2</th><br/> <th>Judul 3</th><br/> </tr><br/> <tr><br/> <td>Baris 1, Kolom 1</td><br/> <td>Baris 1, Kolom 2</td><br/> <td>Baris 1, Kolom 3</td><br/> </tr><br/> <tr style=color:blue><br/> <td>Baris 2, Kolom 1</td><br/> <td>Baris 2, Kolom 2</td><br/> <td>Baris 2, Kolom 3</td><br/> </tr><br/></table><br/></body><br/></html> |
Di pada kode HTML tersebut, tag colgroup dan tag col dikerjakan di baris pertama-tama sebelum tag tr tabel. Setiap tag col mesti disesuaikan dengan jumlah kolom dari tabel. Dengan merubah style di tag col, efeknya seluruh sel tabel di kolom tersebut pun akan berubah. Bagi baris, hal yang sama dapat kita lakukan dengan merubah atribut dari tag tr.
Pemakaian atribut width di tag col
Diantara atribut yang dapat kita gunakan di tag col yaitu atribut width. Atribut ini digunakan bagi mengatur lebar dari masing-masing kolom pada tabel.
Buka program text editor, ketikkan kode berikut, dan save selaku tabelcolwidth.html
Contoh pemakaian atribut width di tag col :
|
1 |
]<!DOCTYPE html><br/><html><br/> <head><br/> <title>Belajar atribut width pada Tabel</title><br/> </head><br/><body><br/><h3>Belajar atribut width pada Tabel</h3><br/><table border=1><br/> <colgroup><br/> <col width=75px style=background-color:blue /><br/> <col width=150px /><br/> <col width=300px /><br/> </colgroup><br/> <tr><br/> <th>Judul 1</th><br/> <th>Judul 2</th><br/> <th>Judul 3</th><br/> </tr><br/> <tr><br/> <td>Baris 1, Kolom 1</td><br/> <td>Baris 1, Kolom 2</td><br/> <td>Baris 1, Kolom 3</td><br/> </tr><br/> <tr><br/> <td>Baris 2, Kolom 1</td><br/> <td>Baris 2, Kolom 2</td><br/> <td>Baris 2, Kolom 3</td><br/> </tr><br/></table><br/></body><br/></html> |
Dari contoh kode HTML diatas, saya menggunakan atribut width bagi mengatur lebar dari kolom tabel. Misalnya bagi kolom pertama-tama, atribut width=”75px” digunakan bagi merancang lebar kolom menjadi 75 pixel. Lebih lanjut mengenai atribut
Sumber https://www.duniailkom.com/
