HTML col tag | belajar <col> element

HTML Fadlullah Fadul December 3, 2018

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>

span

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.

Value: Number (nomor/angka)

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <col> element

HTML 
<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.

SOURCE
editor 
<!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
Previous Article Next Article