Tutorial HTML : Mengatur Lebar Kolom Tabel
Ketika kita membuat tabel dan mengisi data pada masing-masing kolom, maka secara default lebar tabel akan menyesuaikan berapa lebar yang dibutuhkan oleh data tersebut. Dengan demikian ukuran lebar akan secara otomatis mengikuti data yang diinputkan.
Nah sekarang, bagaimana seandainya kita ingin menentukan sendiri lebar tabel ?. Kita dapat menentukannya dengan menggunakan attribute width yang dapat dipasangkan pada :
- Tag <table>, sehingga menjadi <table width="400 px">. Model seperti ini akan membuat tabel dengan ukuran 400px. Untuk ukuran lebar kolom akan menyesuaikan dengan data.
- Tag<th>, sehingga menjadi <th width="250px">. Model seperti ini akan membuat ukuran kolom dengan ukuran 250px. Nantinya setiap lebar kolom akan memiliki ukuran yang berbeda-beda.
Pengaturan lebar tabel HTML satu layar penuh
Untuk membuat sebuah tabel HTML yang memiliki ukuran lebar satu layar penuh dapat menggunakan width yang diset 100% seperti Gambar.1 dibawah ini : |
| Gambar.1 |
Source code untuk Gambar.1 diatas :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>No</th>
<th>Nama</th>
<th>NIM</th>
<th>Jenis Kelamin</th>
</tr>
<tr>
<td>1</td>
<td>Andi Fraseria</td>
<td>220120102001</td>
<td>Pria</td>
</tr>
<tr>
<td>2</td>
<td>Rudi Hariadi</td>
<td>220120102002</td>
<td>Pria</td>
</tr>
<tr>
<td>3</td>
<td>Doni Mikarel</td>
<td>220120102003</td>
<td>Pria</td>
</tr>
</table>
</body>
</html>Pengaturan lebar kolom tabel HTML
Disini kita akan membuat tabel dengan ukuran kolom yang berbeda-beda antara satu kolom dengan kolom lainnya seperti yang ditunjukkan oleh Gambar.2 dibawah ini : |
| Gambar.2 |
Jika kita perhatikan dengan seksama, maka akan tampak kolom untuk "No", "Nama", "NIM" dan kolom "Jenis Kelamin" memiliki ukuran lebar yang berbeda. Untuk membuat ukuran kolom yang berbeda pada sebuah tabel HTML seperti Gambar.2 diatas, maka dapat dilakukan seperti script HTML dibawah ini :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th width="30px">No</th>
<th width="200px">Nama</th>
<th width="150px">NIM</th>
<th width="100px">Jenis Kelamin</th>
</tr>
<tr>
<td>1</td>
<td>Andi Fraseria</td>
<td>220120102001</td>
<td>Pria</td>
</tr>
<tr>
<td>2</td>
<td>Rudi Hariadi</td>
<td>220120102002</td>
<td>Pria</td>
</tr>
<tr>
<td>3</td>
<td>Doni Mikarel</td>
<td>220120102003</td>
<td>Pria</td>
</tr>
</table>
</body>
</html>Tutorial Tabel HTML lainnya :
- Tutorial HTML tentang pengaturan tinggi tabel
- Tutorial HTML tentang pengaturan lebar tabel dan kolom tabel
- Tutorial HTML tentang cara menambahkan judul pada tabel
- Tutorial HTML tentang atribut colspan dan rowspan pada tabel
- Tutorial HTML tentang cara memberi warna pada tabel
