Pusat Ilmu Secara Detil

Tutorial HTML : Mengatur Lebar Kolom Tabel

Tutorial HTML : Mengatur Lebar Kolom Tabel

Sesi tutorial HTML kali ini akan mengdiskusikan tentang cara merubah atau mengatur lebar tabel HTML. Pada tutorial sebelumnya, kita juga telah membahas bagaimana cara mengatur tinggi tabel dengan menggunakan tag-tag dalam HTML.

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>
Kita juga dapat memodifikasi lebar (width) tabel sesuai dengan keinginan kita. Kita dapat menggunakan unit persen (%) ataupun fixed-size(px). 

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 :



Share this:

You Might Also Like:

Disqus Comments