info-b

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

Posted on

Secara default bawaan HTML, setiap tabel akan diatur lebarnya secara otomatis dari besar data yang terdapat didalam tabel tersebut, namun seandainya kita ingin ‘memaksakan’ web browser bagi menampilkan tabel dengan lebar tertentu, kita dapat menambahkan sebuah atribut width untuk mengatur lebar tabel.

Sama seperti penjelasan di tutorial tentang rules, seandainya sahabat telah memahami CSS, disarankan menggunakan CSS bagi memanipulasi tampilan dari tabel diperbandingkan menggunakan atribut width secara seketika didalam tag HTML.

Berikut yakni contoh tabel yang mempunyai perbedaan panjang bagi baris:

Dapat dilihat bahwa web browser menampilkan tabel sesuai dengan panjang data yang terdapat di baris terpanjang, dan seandainya sahabat 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 bagi tag tabel (tag table) maupun bagi tag kolom (tag th, tag td, maupun tag col). Apabila diletakkan di tag table, atribut ini berfungsi bagi mengatur lebar tabel secara keseluruhan. Namun seandainya diletakkan di tag th atau td, atribut ini akan berfungsi bagi mengatur lebar kolom.

Bagi “memaksa” web browser menampilkan lebar tabel sesuai dengan yang diinginkan, kita dapat menambahkan atribut width di tag table, seperti contoh berikut:

Contoh pemakaian atribut width tabel HTML, tabelwidth.html

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

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

Apabila kita menggunakan nilai relatif seperti 50%, karenanya lebar tabel akan ditampilkan sebesar 50% dari tag induk (tag parent) dari tab tabel. Sepanjang contoh kita disini, tag parent dari tag table yakni tag body. Namun bagi tag body ini, kita tak merubah nilai widthnya, dan secara default melingkupi seluruh lebar web browser. Sehingga seandainya sebuah tabel mempunyai lebar 50%, karenanya ukurannya yakni 50% dari layar web browser.


Mengatur Lebar Kolom Dengan Atribut Width

Di contoh tabelwidth.html diatas, walaupun kita telah mengatur lebar dari tabel, namun lebar masing-masing kolom akan ‘dibagi’ secara proporsional oleh web browser. Bagi mengatur lebar kolom tabel secara individu, karenanya atribut width mesti diletakkan di tag kolom (tag th, td, maupun tag col).

Namun syarat agar kita dapat mengatur lebar masing-masing kolom, lebar tabel pun telah ditentukan terlebih dahulu lewat atribut width di tag table.

Berikut yakni contoh tabel yang menggunakan atribut width di tag th.

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

Selaku catatan, seandainya total lebar dari seluruh kolom (atribut width di tag th) melebihi lebar tabel (atribut width di tag table), karenanya lebar masing-masing kolom akan ‘disesuaikan’ agar tak melebihi lebar tabel. Sehingga bagi menghindari tampilan yang tak diinginkan, pastikan agar total lebar kolom tak melebihi nilai width tabel.


Sumber https://www.duniailkom.com/