Tutorial Tabel HTML: Cara Membuat Group Kolom Tabel di Tabel HTML untuk Memberi Style ke Kolom dengan Cepat

group kolom tabel di html

Seperti yang kita tahu, untuk membuat tabel di HTML, dibuat secara per baris dengan tag <tr> dan tag <td>. Sehingga, ini pun berpengaruh juga ke CSSnya.

Kita bisa memberikan style ke satu baris atau lebih tapi kita tidak bisa memberikan style ke satu kolom atau lebih. Lalu, bagaimana caranya untuk memberikan style background berwarna merah ke sel yang ada di kolom ke-1 dan ke-3? Misalnya.

Untungnya, HTML menyediakan tag khusus untuk mengatasi permasalahan tersebut. Kita dapat menanganinya dengan bantuan tag <colgroup> dan tag <col>. Bayangkan, kalau tag ini nggak ada, kita harus beri style tiap sel secara satu per satu!

Markicob, gan. Mari kita coba.

Ketik kode HTML seperti berikut.
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat group kolom tabel di tabel HTML</title>
  </head>
  <body>
    <h2>Penggunaan tag colgroup dan col</h2>
    <table border="1" cellpadding="1" cellspacing="1">
      <colgroup>
        <col style="background:red" />
        <col />
        <col style="background:red" />
        <col />
      </colgroup>
      <tr>
        <th>No.</th>
        <th>Nama</th>
        <th>Nilai</th>
        <th>Huruf</th>
      </tr>
      <tr>
        <td>1.</td>
        <td>Ane.</td>
        <td>92</td>
        <td>A+</td>
      </tr>
      <tr>
        <td>1.</td>
        <td>Ane.</td>
        <td>92</td>
        <td>A+</td>
      </tr>
      <tr>
        <td>1.</td>
        <td>Ane.</td>
        <td>92</td>
        <td>A+</td>
      </tr>
    </table>
  </body>
</html>

Simpan, lalu jalankan. Begini hasilnya.

Baca juga ya..
Tutorial Tabel HTML: Cara Membuat Struktur Tabel di Tabel HTML
Tutorial Tabel HTML: Cara Membuat Judul Tabel di Tabel HTML dengan Tag Caption
Tutorial Tabel HTML: Cara Membuat Tabel Header Kolom di Tabel HTML

membuat group kolom tabel

Tag <colgroup> dan tag <col> harus diletakkan di dalam tag <table> dan di luar tag <tr>. Jika diletakkan diluar <table>, maka tidak akan ada efek style pada tabelnya. Sesuaikan juga jumlah tag <col> dengan jumlah kolom tabelnya.

Selanjutnya >> Tutorial Tabel HTML: Cara Mengatur Lebar Banyak Kolom Tabel HTML dengan Cepat dan Mudah

0 Komentar untuk "Tutorial Tabel HTML: Cara Membuat Group Kolom Tabel di Tabel HTML untuk Memberi Style ke Kolom dengan Cepat"