Tutorial Tabel HTML Part 8: Cara Mengatur dan Mengubah Lebar Tabel HTML (atribut width)

Secara default bawaan HTML, setiap tabel akan diatur lebarnya secara otomatis dari besar data yang ada didalam tabel tersebut, namun jika kita ingin 'memaksakan' web browser untuk menampilkan tabel dengan lebar tertentu, kita bisa menambahkan sebuah atribut width untuk mengatur lebar tabel.

Sama seperti penjelasan pada tutorial tentang rules, jika anda telah memahami CSS, disarankan menggunakan CSS untuk memanipulasi tampilan dari tabel dibandingkan menggunakan atribut width secara langsung didalam tag HTML.

Berikut adalah contoh tabel yang memiliki perbedaan panjang untuk baris:

<!DOCTYPE html>
<html>
   <head>
      <title>Contoh pemakaian attribut width dalam Tabel HTML</title>
   </head>
<body>
<h2>Belajar atribut width dalam Tabel HTML</h2>
<table border="1">
<caption>------------Tabel Tanpa Atribut Width--------------</caption>
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Data yang sangat panjang, 
            sehingga merusak tampilan dari tabel</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 3, Kolom 1</td>
        <td>Baris 3, Kolom 2</td>
        <td>Baris 3, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Contoh Tabel HTML Tabel Tanpa Atribut Width

Dapat dilihat bahwa web browser menampilkan tabel sesuai dengan panjang data yang terdapat pada baris terpanjang, dan jika anda mencoba mengecilkan jendela web browser, tampilan tabel akan bergeser menyesuaikan dengan lebar web browser. Inilah tampilan default dari tabel HTML.


Mengatur Lebar Tabel Dengan Atribut Width

Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col). Jika diletakkan pada tag table, atribut ini berfungsi untuk mengatur lebar tabel secara keseluruhan. Namun jika diletakkan pada tag th atau td, atribut ini akan berfungsi untuk mengatur lebar kolom.

Untuk "memaksa" web browser menampilkan lebar tabel sesuai dengan yang diinginkan, kita dapat menambahkan atribut width pada tag table, seperti contoh berikut:

Contoh penggunaan atribut width tabel HTML, tabelwidth.html

<!DOCTYPE html>
<html>
   <head>
      <title>Contoh pemakaian attribut width dalam Tabel HTML</title>
   </head>
<body>
<h2>Belajar atribut width dalam Tabel HTML</h2>
<table border="1" width="600px">
<caption>------------Lebar Tabel 600px--------------</caption>
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Data yang sangat panjang, 
            sehingga merusak tampilan dari tabel</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 3, Kolom 1</td>
        <td>Baris 3, Kolom 2</td>
        <td>Baris 3, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Contoh Tabel HTML Tabel Dengan Atribut Width

Jika anda mencoba mengubah kembali ukuran web browser, tampilan tabel akan tetap, sesuai dengan nilai dari atribut width.

Atribut width dapat berisi nilai fixed (tetap), yakni dalam satuan pixel (misalnya: 400px, 600px), maupun nilai relatif dalam bentuk persen (misalnya: 30%, 60%).

Jika kita menggunakan nilai relatif seperti 50%, maka lebar tabel akan ditampilkan sebesar 50% dari tag induk (tag parent) dari tab tabel. Sepanjang contoh kita disini, tag parent dari tag table adalah tag body. Namun untuk tag body ini, kita tidak merubah nilai widthnya, dan secara default mencakup seluruh lebar web browser. Sehingga jika sebuah tabel memiliki lebar 50%, maka ukurannya adalah 50% dari layar web browser.

Mengatur Lebar Kolom Dengan Atribut Width

Pada contoh tabelwidth.html diatas, walaupun kita telah mengatur lebar dari tabel, namun lebar masing-masing kolom akan 'dibagi' secara proporsional oleh web browser. Untuk mengatur lebar kolom tabel secara individu, maka atribut width harus diletakkan pada tag kolom (tag th, td, maupun tag col).

Namun syarat agar kita bisa mengatur lebar masing-masing kolom, lebar tabel juga telah ditentukan terlebih dahulu melalui atribut width pada tag table.

Berikut adalah contoh tabel yang menggunakan atribut width pada tag th.

<!DOCTYPE html>
<html>
   <head>
      <title>Contoh pemakaian attribut width dalam Tabel HTML</title>
   </head>
<body>
<h2>Belajar atribut width dalam Tabel HTML</h2>
<table border="1" width="600px">
<caption>------------Lebar Tabel 600px--------------</caption>
    <tr>
        <th width="300px">Judul 1 (width=300px)</th>
        <th width="200px">Judul 2 (width=200px)</th>
        <th width="100px">Judul 3 (width=100px)</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Data yang sangat panjang, 
            sehingga merusak tampilan dari tabel</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 3, Kolom 1</td>
        <td>Baris 3, Kolom 2</td>
        <td>Baris 3, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Contoh Tabel HTML Tabel Dengan Atribut Width Pada Kolom

Seperti yang terlihat, bahwa lebar dari masing-masing kolom diset melalui nilai atribut width.

Sebagai catatan, seandainya total lebar dari seluruh kolom (atribut width pada tag th) melebihi lebar tabel (atribut width pada tag table), maka lebar masing-masing kolom akan 'disesuaikan' agar tidak melebihi lebar tabel. Sehingga untuk menghindari tampilan yang tidak diinginkan, pastikan agar total lebar kolom tidak melebihi nilai width tabel.

54 Comments

  1. rofiq7706
    10 Feb 14
    • Andre
      22 Feb 14
  2. trimaya maiyaha
    20 Feb 14
    • Andre
      22 Feb 14
  3. bhipury
    06 Apr 14
    • Andre
      06 Apr 14
  4. wildan
    13 May 14
    • Andre
      27 May 14
  5. dondon
    08 Nov 14
    • Andre
      07 Jun 15
  6. sandi sunday
    07 Dec 14
  7. upi
    07 Jan 15
  8. Hafizhul
    18 Jan 15
  9. budies
    12 Feb 15
    • Andre
      12 Feb 15
  10. Ipan Sabora
    03 Apr 15
    • Andre
      05 Apr 15
  11. steven bunga
    06 Jun 15
    • Andre
      07 Jun 15
      • steven bunga
        07 Jun 15
        • Andre
          08 Jun 15
  12. steven bunga
    09 Jun 15
    • Andre
      10 Jun 15
  13. oka
    11 Sep 15
  14. Azanul Ahyan
    02 Nov 15
    • Andre
      03 Nov 15
  15. SaputraMZ
    05 Nov 15
    • Andre
      05 Nov 15
  16. Anonymous
    14 Nov 15
  17. Blogger Pemula
    24 Dec 15
    • Andre
      26 Dec 15
  18. Anonymous
    01 Mar 16
  19. wijaya
    04 Apr 16
    • Andre
      04 Apr 16
  20. rendy juniansyah
    25 Jul 16
  21. alifah
    25 Aug 16
    • Andre
      26 Aug 16
  22. yusuf
    25 Sep 16
  23. Pembaca
    21 Nov 17
    • Andre
      22 Nov 17
  24. Anonymous
    19 Jul 18
    • Andre
      19 Jul 18
    • Andre
      24 Feb 19
  25. abdul
    24 Aug 19
  26. Syaripudin
    07 Nov 19
  27. user
    18 Feb 20
  28. SarwoEdt
    01 Sep 20
  29. joelzr
    22 Feb 22
  30. Anonymous
    25 Nov 22
  31. Rifa Fauziah
    14 Oct 23

Add Comment