HTML colgroup tag | belajar <colgroup> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML colgroup tag. Tutorial dan panduan mengenai element <colgroup>...</colgroup> yang digunakan untuk mengelompokkan kolom di dalam table. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <colgroup>.

Deskripsi
Penjelasan HTML colgroup

HTML <colgroup> tag digunakan untuk menunjukkan sebuah grup dari kolom di dalam tabel (element <table> sebagai induknya).

Element <colgroup> terletak didalam element <table> setelah element <caption> dan sebelum element<thead>, <tbody>, <tfoot> dan <tr>.

<colgroup> umumnya digunakan untuk memberi style pada kolom tertentu di dalam table secara keseluruhan. Sehingga, tidak mengulangi format style yang sama pada setiap cell dalam table tersebut.

Didalam element <colgroup>, dapat ditulis element <col> yang digunakan untuk mendefinisikan properti yang berbeda pada setiap kolom dalam <colgroup> tersebut.

Untuk lebih jelasnya, silahkan baca juga mengenai belajar HTML <col> tag.

Global Attributes
Atribut Secara Global (Keseluruhan)

<colgroup> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<colgroup> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <colgroup> element

HTML 
<table>
  <colgroup>
    <col style="background: yellow">
    <col style="background: pink">
    <col span="2" style="background: lime">
  </colgroup>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>TTL</th>
    <th>Pekerjaan</th>
  </tr>
  <tr>
    <td>1</td>
    <td>dr. Dedi Suryadi</td>
    <td>10 Juli 1975</td>
    <td>Dokter</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Prof. Yudi Wahyudi</td>
    <td>10 Januari 1984</td>
    <td>Dosen</td>
  </tr>
</table>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo HTML colgroup tag</title>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="background: yellow">
        <col style="background: pink">
        <col span="2" style="background: lime">
      </colgroup>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>TTL</th>
        <th>Pekerjaan</th>
      </tr>
      <tr>
        <td>1</td>
        <td>dr. Dedi Suryadi</td>
        <td>10 Juli 1975</td>
        <td>Dokter</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Prof. Yudi Wahyudi</td>
        <td>10 Januari 1984</td>
        <td>Dosen</td>
      </tr>
    </table>
  </body>
</html>
SHARE
Previous Article Next Article