HTML col tag | belajar <col> element

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>

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.


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

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
<!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