Tutorial Tabel HTML: Cara Membuat Group Kolom Tabel di Tabel HTML untuk Memberi Style ke Kolom dengan Cepat - AneIqbal - Blog Tutorial dan Informasi untuk Anda

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.

Barangkali Anda tertarik baca:
Tutorial Tabel HTML: Cara Mengatur Lebar Banyak Kolom Tabel HTML dengan Cepat dan Mudah
Tutorial Tabel HTML: Cara Mengatur Garis Antara Kolom dan Baris Tabel
Tutorial Tabel HTML: Cara Mengatur Lebar Kolom Tabel dan Lebar Tabel

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


Semua Tutorial HTML