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>.
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
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | 1 |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | 4 |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |