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

mengatur lebar kolom dengan cepat dan mudah

Di postingan sebelumnya, kita sudah membahas cara membuat group kolom tabel HTML yang sangat berguna sekali untuk pengkodean CSS. Cukup dengan menulis kode CSS di salah satu tag <col>, maka kolom tabel akan langsung berubah.

Selain itu, kita juga dapat mengatur lebar kolom tabel dengan cepat dan mudah. Tanpa harus kita beri style satu per satu tiap kolomnya.

Untuk itu, yang perlu kita lakukan adalah menambahkan atribut width pada tag <col>. Lalu beri valuenya sesuai dengan selera dan dalam satuan pixel.

Seperti ini contohnya:
<col width="100px" style="background:red" />

Markicob, gan. Mari kita coba.

Buat kodingan HTML seperti berikut ini.
<!DOCTYPE html>
<html>
  <head>
    <title>Mengatur lebar kolom tabel dengan cepat dan mudah</title>
  </head>
  <body>
    <h3>Mengatur lebar kolom tabel dengan cepat dan mudah</h3>
    <table border="1" cellpadding="1" cellspacing="1">
      <colgroup>
       <col width="99px" style="background:green" />
       <col width="120px" style="background:red" />
      </colgroup>
      <tr>
        <th>No.</th>
        <th>Huruf</th>
      </tr>
      <tr>
        <td>1.</td>
        <td>A</td>
      </tr>
      <tr>
        <td>2.</td>
        <td>B</td>
      </tr>
      <tr>
        <td>3.</td>
        <td>C</td>
      </tr>
      <tr>
        <td>4.</td>
        <td>D</td>
      </tr>
      <tr>
        <td>5.</td>
        <td>E</td>
      </tr>
    </table>
  </body>
</html>


Simpan, lalu jalankan. Seperti ini jadinya.

Baca juga ya..
Tutorial Tabel HTML: Cara Membuat Group Kolom Tabel di Tabel HTML untuk Memberi Style ke Kolom dengan Cepat
Tutorial Tabel HTML: Cara Membuat Struktur Tabel di Tabel HTML
Tutorial Tabel HTML: Cara Membuat Judul Tabel di Tabel HTML dengan Tag Caption

mengatur lebar kolom tabel html

Kita nggak perlu kasih kode CSS di tiap tag <td>. Kalau hanya ada 1 2 sih nggak masalah kita pakai cara inline stylesheet. Bayangkan kalau ada 1000, nggak mungkin kan kita pakai cara itu?

Tag <colgroup> dan <col> ini sangat efektif, efisien, dan membantu dalam membuat serta memodifikasi style tabel di HTML dengan cepat dan mudah.

Selanjutnya >> Tutorial Tabel HTML: Cara Mengatur Garis Antara Kolom dan Baris Tabel


0 Komentar untuk "Tutorial Tabel HTML: Cara Mengatur Lebar Banyak Kolom Tabel HTML dengan Cepat dan Mudah"