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

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>

Contoh penggunaan tag colgroup dan tag col

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>

Contoh atribut width pada tag col HTMLDari 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. Lebih lanjut tentang atribut width, akan saya bahas secara tersendiri pada tutorial selanjutnya.


Tutorial Terkait:

12 Comments

  1. www.fanklik.com
    05 Jun 14
    • Andri
      19 Oct 15
  2. mario
    03 Dec 15
    • Andre
      04 Dec 15
  3. nuthfatin
    11 Sep 16
    • Andre
      13 Sep 16
  4. nuthfatin
    15 Sep 16
    • Andre
      16 Sep 16
  5. nuthfatin
    17 Sep 16
  6. nuthfatin
    19 Sep 16

Add Comment