Sebelumnya, kita sudah bahas cara membuat group kolom tabel HTML. Kali ini kita akan bahas cara mengatur lebar banyak kolom tabel HTML. Silakan simak panduan AneIqbal berikut sampai akhir.
Masih memanfaatkan tag <col> yang bisa dimanfaatkan oleh kode CSS.
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.
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 >> cara mengatur garis antara kolom dan baris tabel HTML.
