tRikSonic
Tema

HTML colgroup TAG

Terakhir diperbarui : 24 Mei 2018 - 22.29
HTML colgroup Tag - belajar html <colgroup>, element <colgroup> mempunyai definisi sebagai grup pada element <table>.

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

background html

Attibut HTML <colgroup>

Attibute Value Deskripsi
span angka Menentukan jumlah kolom yang harus dijangkau

Contoh penerapan html <colgroup> pada HTML :

<table>
  <caption>Judul Table</caption>
  <colgroup>
    <col style="background: #b1f5e5;">
    <col style="background: #7c65fb;">
    <col style="background: #e0f3b4;">
    <col span="3" style="background: #dedede;">
  </colgroup>
   <thead>
  <tr>
    <th>No</th>
    <th>title</th>
    <th>title</th>
    <th>title</th>
    <th>title</th>
    <th>title</th>
  </tr>
   </thead>
   <tbody>
  <tr>
    <td>1</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
  </tr>
  <tr>
    <td>2</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
  </tr>
  <tr>
    <td>3</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
  </tr>
  </tbody>
</table> 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<style>
table {
  width : 100%;
}
th, td {
  padding : 8px;
}
</style>
<body>

<table>
  <caption>Judul Table</caption>
  <colgroup>
    <col style="background: #b1f5e5;">
    <col style="background: #7c65fb;">
    <col style="background: #e0f3b4;">
    <col span="3" style="background: #dedede;">
  </colgroup>
   <thead>
  <tr>
    <th>No</th>
    <th>title</th>
    <th>title</th>
    <th>title</th>
    <th>title</th>
    <th>title</th>
  </tr>
   </thead>
   <tbody>
  <tr>
    <td>1</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
  </tr>
  <tr>
    <td>2</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
  </tr>
  <tr>
    <td>3</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
    <td>isi konten</td>
  </tr>
  </tbody>
</table> 

</body>
</html>

Standar CSS yang di gunakan pada html <colgroup> :

Browser yang support dengan elemen <colgroup> biasanya mempunyai nilai default:
colgroup { 
    display: table-column-group;
}

Global Attributes:

Element <colgroup> mencakup Global Attributes HTML.

Event Attributes:

Element <colgroup> mencakup Event Attributes HTML.

Browser Support:

Browser yang mendukung element <colgroup>

Desktop

ChromeYa
SafariYa
Firefox1
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox Android4
Opera AndroidYa
iOs SafariYa
Samsung InternetYa
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.