Tabel HTML Tutorial 6: Cara Membuat Group Kolom Tabel, tag colgroup dan tag col

0
25

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 menyambungkan 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>

Tabel HTML, tag col, tag colgroup gurukomputer.com, welovebet.com

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 :

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;Belajar atribut width dalam Tabel&lt;/title&gt;
   &lt;/head&gt;
&lt;body&gt;
&lt;h3&gt;Belajar atribut width dalam Tabel&lt;/h3&gt;
&lt;table border=&quot;1&quot;&gt;
    &lt;colgroup&gt;
        &lt;col width=&quot;75px&quot; style=&quot;background-color:blue&quot; /&gt;
        &lt;col width=&quot;150px&quot; /&gt;
        &lt;col width=&quot;300px&quot; /&gt;
    &lt;/colgroup&gt;
    &lt;tr&gt;
        &lt;th&gt;Judul 1&lt;/th&gt;
        &lt;th&gt;Judul 2&lt;/th&gt;
        &lt;th&gt;Judul 3&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Baris 1, Kolom 1&lt;/td&gt;
        &lt;td&gt;Baris 1, Kolom 2&lt;/td&gt;
        &lt;td&gt;Baris 1, Kolom 3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Baris 2, Kolom 1&lt;/td&gt;
        &lt;td&gt;Baris 2, Kolom 2&lt;/td&gt;
        &lt;td&gt;Baris 2, Kolom 3&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

Tabel HTML, tag col, tag colgroup gurukomputer.com, welovebet.com

Dari 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here