Mengenal Grup Kolom Table HTML (Tag Colgroup dan Col)

Kuy Belajar - Mengenal Grup Kolom Table HTML (Tag Colgroup dan Col). Assalamualaikum sobat semua, alhamdulillah nih kita ketemu lagi, kita masih akan membahas tentang Table di HTML. Setelah sebelumnya kita sudah membahas materi tentang Mengenal Struktur Table HTML Menggunakan Tag thead, tfoot dan tbody. Nah pada kesempatan kali ini kita akan membahas materi tentang Mengenal Grup Kolom Table HTML (Tag Colgroup dan Col). Pastinya sobat sudah penasaran kan? Kuy kita mulai saja pembahasannya!

Kuy Belajar - Mengal Grup Kolom Table HTML (Tag Colgroup dan Col)

Pengenalan Tag Colgroup

colgroup artinya membuat kelompok kolom secara menurun. Jadi fungsi utama colgroup adalah memberi perintah kepada kumpulan kolom, misalnya memberi warna background, mengubah ukuran teks, dan lainnya.

jika sobat 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.

Mungkin jika sobat ingin memanipulasi sebuah baris, sobat hanya perlu menambahkan atribut class atau style pada tag tr, maka seluruh baris yang tersebut akan berubah, namun hal ini tidak berlaku jika sobat ingin merubah satu baris kolom (kebawah).

Misalkan sobat ingin merubah background pada seluruh kolom pertama dan ke empat, disini lah fungsi dari Colgroup itu akan berguna. Untuk keperluan ini, HTML memiliki tag colgroup dan tag col yang berfungsi untuk ‘mengaitkan’ keseluruhan kolom. Tanpa tag ini sobat harus mengakses satu per satu sel tabel.

Pengunaan Tag Colgroup dan Col

Setelah sobat memahami apa itu Colgroup dan Col beserta fungsi nya. Sekarang mari kita langsung praktikkan saja cara penggunaan Tag Colgroup dan Col. Kuy simak kode HTML di bawah ini.


<html>




<title>Kuy Belajar colgroup Table</title>










</head>










<body>










<h1> Kuy Belajar Colgroup Tabel </h1>








<table border="1">


     <colgroup>

        <col style="background-color:yellow" />

        <col />

        <col /> 

        <col style="background-color:pink" />

     </colgroup>












    <tr>










        <th>Header 1</th>








        <th>Header 2</th>






        <th>Header 3</th>

        <th>Header 4</th> 





    </tr>








    <tr>










        <td>Baris 1, Kolom 1</td>








        <td>Baris 1, Kolom 2</td>






        <td>Baris 1, Kolom 3</td>

        <td>Baris 1, Kolom 4</td> 





    </tr>






    <tr>

        <td>Baris 2, Kolom 1</td>

        <td>Baris 2, Kolom 2</td>

        <td>Baris 2, Kolom 3</td>

        <td>Baris 2, Kolom 4</td> 

   </tr>



</table> 











</html>

Maka akan menghasilkan dokumen HTML seperti pada gambar dibawah ini.

Untuk contoh diatas, kita menggunakan tag style untuk ‘memasukkan’ kode CSS. pada atribut background-color berarti sobat memberi perintah kepada CSS untuk memberikan warna background. Dan pada value "yellow" berarti sobat memberi perintah kepada CSS untuk memberikan warna kuning pada background.

Tidak hanya memberi warna, sobat pun bisa menambahkan macam-macam atribut css pada tag <col>

Saya kira itu lah pembahasan kita tentang Mengenal Grup Kolom Table HTML (Tag Colgroup dan Col). Sekian dulu dari saya "Singkat, Semoga Bermanfaat"

Keep Coding ya Sobat!

Kuy ke Materi Selanjutnya : Cara Mengatur Lebar Table Menggunakan Atribut Width