col | Codingku

Tag <col> digunakan untuk menentukan properti kolom setiap kolom dalam elemen <colgroup>.

Tag col ini berguna jika kamu ingin menentukan tampilan satu atau beberapa kolom bersamaan, daripada mengatur tampilan pada level individu <td>, kamu bisa menerapkannya pada elemen <col>.

Maka semua elemen <td> dan <th> yang terkandung dalam <col> akan sesuai dengan pengaturan dalam <col>.

Syntax

Tag <col> ditulis seperti <col> (tanpa tag penutup). Kamu bisa menggunakan atribut span untuk mengatur jumlah kolom.

<table>
	<colgroup>
		<col class="col-1">
		<col span="2" class="normal">
	</colgroup>
	<tr>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
</table>

<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 <col> dengan pengaturan CSS:

col {
  display: table-column;
}