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 |