Codingku change

Belajar Element HTML: <colgroup>

Tag <colgroup> mewakili grup satu atau banyak kolom dalam tabel HTML.

ELemen ini berguna untuk mengatur style kolom secara keseluruhan tanpa harus repot mengatur style masing-masing tabel cell dan row.

Catatan: Tag <colgroup> harus didalam elemen <table> setelah elemen <caption> dan sebelum elemen <thead>, <tbody>, <troot>, dan <tr>.

Syntax

Tag <colgroup> ditulis seperti <colgroup></colgroup> dengan diberi atribut span untuk mengatur jumlah kolom span, atau tanpa atribut span namun dibantu dengan tag <col> didalamnya.

Seperti ini:

<table>
	<colgroup span="" class="">
	</colgroup>
	<tr>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
</table>

Atau ini:

<table>
	<colgroup>
		<col class=""></col>
		<col class=""></col>
		<col class=""></col>
	</colgroup>
	<tr>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
</table>

Contoh sederhana

<!DOCTYPE html>
<title>Example</title>
<style>
table {border-collapse:collapse;}
td, th {border:1px solid #ccc;}
</style>
<table>
  <colgroup span="2" style="background:#eee;"></colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Contoh Multiple Elemen colgroup

<!DOCTYPE html>
<title>Example</title>
<style>
  table {border-collapse:collapse;}
  td, th {border:1px solid #ccc;}
</style>
<table>
  <colgroup span="2"></colgroup>
  <colgroup style="background:#eee;"></colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Contoh dengan Tag col

<table border="1">
  <colgroup>
    <col style="background:#AEF642;">
    <col span="3" style="background:#F4FBEA;">
    <col style="background:orange;">
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <colgroup> dengan pengaturan CSS:

colgroup {
  display: table-column-group;
}