Cara Menggunakan colgroup Table HTML

Pada kesempatan kali ini saya akan mnejelaskan cara menggunakan <colgroup> table HTML. Perlu teman-teman ketahui sebelumnya, <colgroup> adalah tag yang bisa digunakan untuk membuat pengelompokan table html yang membungkus sebagai induknya. Element tag <colgroup> terletak sebelum <thead> atau tepat berada diatasnya.

Pada umumnya element tag <colgroup> tersebut digunakan untuk memberikan property pada kolom tertentu di dalam <col> table secara keseluruhan dan tidak perlu membuat format style yang sama pada setiap cell didalam table tersebut.

Sedangkan didalam element tag<colgroup> terdapat lagi element tag <col> dimana dari element tag tersebut dapat digunakan untuk mendefinisikan properti yang berbeda pada setiap kolom dalam <colgroup> tersebut. Untuk lebih mudahnya akan saya berikan contohnya dibawah ini.

Berikut Contohnya :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menggunakan <colgroup> Table HTML</title>
<style>
table{
	margin: auto;
}
colgroup {
display: table-column-group;
}
col tr td{
color: white;	
padding: 10px;
}
h1{text-align: center; display: block;}
table, th, td {
  border: 1px solid black;
}
table td:nth-child(1), td:nth-child(2), th:nth-child(1), th:nth-child(2) {
  padding: 5px;
  color: #fff;
  font-size: 14px;
}
table td:nth-child(3), th:nth-child(3) {
  padding: 5px;
  color: #111;
  font-size: 14px;
}
</style>
</head>
<body>
<h1>Daftar Siswa</h1>
<table>
  <colgroup>
    <col span="2" style="background-color:#111;">
    <col style="background-color:#fff;">
  </colgroup>
  <tr>
    <th>Nama Lengkap</th>
    <th>Jenis Kelamin</th>
    <th>Alamat</th>
  </tr>
  <tr>
    <td>Budi Daryanto</td>
    <td>Pria</td>
    <td>Jl.Dukuh Gg.Damai Rt.08/06 No.12. Sidoarjo</td>
  </tr>
  <tr>
    <td>Salsa</td>
    <td>Wanita</td>
    <td>Jl.Kesemek Rt.01/05 No.28. Jakarta-Selatan</td>
  </tr>
  <tr>
    <td>Rudi</td>
    <td>Pria</td>
    <td>Jl.Semangka Rt.02/02 No.02. Jakarta-Timur</td>
  </tr>
  <tr>
    <td>Adinda</td>
    <td>Wanita</td>
    <td>Jl.Duyung Rt.08/08 No.09. Kota-Depok</td>
  </tr>
</table>

</body>
</html>

Sampai disini penjelasan saya mengenai cara menggunakan <colgroup> table HTML, semoga bermanfaat.

Kategori