HTML col tag | belajar <col> element
Referensi Belajar HTML col tag. Tutorial dan panduan mengenai element <col />
yang menunjukkan kolom pada sebuah tabel. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <col>.
Deskripsi
Penjelasan HTML col
HTML <col>
tag menunjukkan kolom (column) didalam sebuah table
yang pada umumnya ditulis didalam element <colgroup>
. col
didalam colgroup
dapat ditulis lebih dari satu yang menunjukkan urutan kolom dari group kolom (colgroup) tersebut.
HTML <col>
tag ditulis didalam element <table>
setelah element <caption>
dan sebelum element<thead>
, <tbody>
, <tfoot>
dan <tr>
.
HTML <col>
tag berguna ketika ingin memberi style sebuah table
berdasarkan kolom tertentu secara serentak, sehingga tidak menggunakan perulangan style yang sama untuk setiap cell dalam table tersebut.
Attributes
Atribut HTML Tag <col>
Menentukkan jumlah kolom (column) yang harus dijangkau (span). Contoh: <col span="2">
, maka kolom pertama dan kolom berikutnya dapat diberi style dan property yang sama sekaligus.
Global Attributes
Atribut Secara Global (Keseluruhan)
<col> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<col> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <col>
element
<table>
<colgroup>
<col style="background: lime">
<col style="background: cyan">
<col span="2" style="background: yellow">
</colgroup>
<tr>
<th>No</th>
<th>Nama</th>
<th>TTL</th>
<th>Pekerjaan</th>
</tr>
<tr>
<td>1</td>
<td>dr. Dedi Suryadi</td>
<td>10 Juli 1975</td>
<td>Dokter</td>
</tr>
<tr>
<td>2</td>
<td>Prof. Yudi Wahyudi</td>
<td>10 Januari 1984</td>
<td>Dosen</td>
</tr>
</table>
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo HTML col tag</title>
<style>
/* Style hanya untuk contoh 2 */
.tabel-2 {
border-collapse: collapse;
}
.tabel-2 tr {
border: 1px solid #ccc;
}
.tabel-2 th {
padding: .5em;
}
.tabel-2 td {
padding: .4em;
}
.col-1 {
background: #DFF4FB;
}
.col-2 {
background: #f7f7f7
}
.col-3 {
background: #EDFFB6;
}
</style>
</head>
<body>
<h3>Contoh 1</h3>
<table>
<colgroup>
<col style="background: lime">
<col style="background: cyan">
<col span="2" style="background: yellow">
</colgroup>
<tr>
<th>No</th>
<th>Nama</th>
<th>TTL</th>
<th>Pekerjaan</th>
</tr>
<tr>
<td>1</td>
<td>dr. Dedi Suryadi</td>
<td>10 Juli 1975</td>
<td>Dokter</td>
</tr>
<tr>
<td>2</td>
<td>Prof. Yudi Wahyudi</td>
<td>10 Januari 1984</td>
<td>Dosen</td>
</tr>
</table>
<hr />
<h3>Contoh 2</h3>
<table class="tabel-2">
<colgroup>
<col class="col-1">
<col class="col-2">
<col span="2" class="col-3">
</colgroup>
<tr>
<th>No</th>
<th>Nama</th>
<th>TTL</th>
<th>Pekerjaan</th>
</tr>
<tr>
<td>1</td>
<td>dr. Dedi Suryadi</td>
<td>10 Juli 1975</td>
<td>Dokter</td>
</tr>
<tr>
<td>2</td>
<td>Prof. Yudi Wahyudi</td>
<td>10 Januari 1984</td>
<td>Dosen</td>
</tr>
</table>
<p><b>Catatan:</b> Contoh 1 menggunakan inline style, sedangkan Contoh 2 menggunakan style tambahan.</p>
</body>
</html>
SHARE