cloud-hosting-terbaik-indonesia

Tutorial Tabel HTML Part 6: Cara Membuat Group Kolom Tabel (tag colgroup dan tag col)

Posted on

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 :

Bagi contoh diatas, saya menggunakan tag style bagi ‘memasukkan’ kode CSS. Lebih jauh mengenai CSS, silahkan mempelajarinya di Tutorial Belajar CSS.

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 :

 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 width, akan saya bahas secara tersendiri di panduan berikutnya.


Sumber https://www.duniailkom.com/