Cara Mengatur Lebar Table Menggunakan Atribut Width

Kuy Belajar - Cara Mengatur Lebar Table Menggunakan Atribut Width. Assalamualaikum sobat semua. Alhamdulillah kita ketemu lagi nih, kita masih akan membahas seputar Table di HTML. Pada materi sebelumnya kita sudah membahas materi Mengenal Grup Kolom Table HTML (Tag Colgroup dan Col). Nah pada kesempatan ini kita akan membahas materi tentang Cara Mengatur Lebar Table Menggunakan Atribut Width. Sobat sudah penasaran kan? Kuy langsung kita mulai saja pembahasannya!

Secara otomatis ukuran tabel di HTML akan ditampilkan sesuai dengan isi data dari tabel tersebut. Jika data dalam tabel sedikit maka tampilan tabel akan pendek, begitupun sebaliknya jika data dalam tabel banyak maka tampilan tabel pun akan semakin lebar.

Nah untuk mengatur lebar dari table yang akan kita buat, HTML menyediakan sebuah fitur yang memungkinkan kita untuk mengatur table yang kita buat agar tampil lebih cantik. Kita dapat menambahkan atribut width pada tag pembuka table <table>.

Selain dengan memberi langsung atribut width pada tag <table> kita pun dapat mengatur lebar table dengan menggunakan CSS. Dan hasilnya pun akan sama saja, tergantung sobat lebih menyukai cara yang mana.

Untuk lebih jelasnya Kuy simak kode HTML di bawah ini.


<html>




<title>Kuy Belajar mengatur lebar Table</title>










</head>










<body>










<h1> Kuy Belajar Mengatur Lebar Tabel </h1>








<table border="1">


    <caption>Ini Contoh lebar Table Secara Default</caption>












    <tr>










        <th>Header 1</th>








        <th>Header 2</th>






        <th>Header 3</th>

        <th>Header 4</th> 





    </tr>








    <tr>










        <td>Baris 1, Kolom 1</td>








        <td>Baris 1, Kolom 2</td>






        <td>Baris 1 memiliki kolom yang panjang sesuai data, Kolom 3</td>

        <td>Baris 1, Kolom 4</td> 





    </tr>






    <tr>

        <td>Baris 2, Kolom 1</td>

        <td>Baris 2, Kolom 2</td>

        <td>Baris 2, Kolom 3</td>

        <td>Baris 2, Kolom 4</td> 

   </tr>



</table> 











</html>

Maka akan menghasilkan dokumen HTML seperti pada gambar dibawah ini.

Seperti yang kita lihat pada gambar di atas, tampilan tabel memanjang karena pada baris ke 1 kolom ke 3 terisi data yang panjang. Tampilan tersebut adalah tampilan secara default dari tabel HTML. Jika sobat mengecilkan jendela web browser,maka tampilan tabel akan bergeser menyesuaikan dengan lebar web browser.

Tentu saja hal ini akan merasa riskan bagi kita jika tampilan pada tabel tidak beraturan dan akan mengurangi keindahan dari web kita yang akan terkesan jelek. Maka dari itu perlu diatur ukuran pada tabel tersebut.

Penggunaan Atribut Width Pada Table

Seperti yang telah dijelaskan di atas, bahwa HTML menyediakan sebuah fitur untuk mengatur lebar table agar tampil lebih cantik, yaitu menggunakan atribut width. Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col).

Apabila atribut width dipasang pada tag <table>, maka atribut ini berfungsi untuk mengatur ukuran keseluruhan tabel tersebut. Jika atribut ini dipasang pada tag <th> atau <td> maka akan berfungsi untuk mengatur ukuran lebar kolom.

Untuk “memaksa” web browser menampilkan lebar tabel sesuai dengan yang diinginkan, kita dapat menambahkan atribut width pada tag table. Kuy simak kode HTML berikut ini.


<html>




<title>Kuy Belajar mengatur lebar Table</title>










</head>










<body>










<h1> Kuy Belajar Mengatur Lebar Tabel </h1>








<table border="1" width="500px">


    <caption>Ini Contoh lebar Table 500px</caption>












    <tr>










        <th>Header 1</th>








        <th>Header 2</th>






        <th>Header 3</th>

        <th>Header 4</th> 





    </tr>








    <tr>










        <td>Baris 1, Kolom 1</td>








        <td>Baris 1, Kolom 2</td>






        <td>Baris 1 memiliki kolom yang panjang sesuai data, Kolom 3</td>

        <td>Baris 1, Kolom 4</td> 





    </tr>






    <tr>

        <td>Baris 2, Kolom 1</td>

        <td>Baris 2, Kolom 2</td>

        <td>Baris 2, Kolom 3</td>

        <td>Baris 2, Kolom 4</td> 

   </tr>



</table> 











</html>

Maka akan menghasilkan dokumen HTML seperti pada gambar dibawah ini.

Dari gambar tersebut terlihat bahwa lebar table yang kita buat adalah 500px, sobat pun bisa mengganti satuan pixel (px) menjadi persen (%). Dan jika sobat mengecilkan ukuran dari web browser tersebut, maka lebar table tersebut akan tetap dengan lebar 500px.

Namun jika sobat menggunakan satuan persen (%), misalkan sobat menggunakan width="50%" maka ukuran dari table akan relatif mengikuti 50% dari lebar web browser sobat.

Berbeda dengan lebar table yang sebelumnya kita buat tanpa atribut width, lebar table tersebut akan menyesuaikan terhadap ukuran dari web browser yang kita gunakan.

Mengatur lebar kolom table

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).

Kita dapat mengatur lebar kolom sesuai dengan keinginan kita. Untuk mengatur dan mengubah ukuran lebar kolom tidak berbeda jauh dengan mengatur lebar pada keseluruhan tabel.

Untuk mengatur lebar kolom tabel secara manual, maka harus digunakan atribut width 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.

Kuy simak kode HTML di bawah ini.


<html>




<title>Kuy Belajar mengatur lebar Table</title>










</head>










<body>










<h1> Kuy Belajar Mengatur Lebar Tabel </h1>








<table border="1" width="500px">


    <caption>Ini Contoh lebar Table 500px</caption>












    <tr>










        <th width="100px">(lebar = 100px)</th>








        <th width="100px">(lebar = 100px)</th>






        <th width="200px">(lebar = 200px)</th>

        <th width="100px">(lebar = 100px)</th> 





    </tr>








    <tr>










        <td>Baris 1, Kolom 1</td>








        <td>Baris 1, Kolom 2</td>






        <td>Baris 1 memiliki kolom yang panjang sesuai data, Kolom 3</td>

        <td>Baris 1, Kolom 4</td> 





    </tr>






    <tr>

        <td>Baris 2, Kolom 1</td>

        <td>Baris 2, Kolom 2</td>

        <td>Baris 2, Kolom 3</td>

        <td>Baris 2, Kolom 4</td> 

   </tr>



</table> 











</html>

Maka akan menghasilkan dokumen HTML seperti pada gambar dibawah ini.

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.

Saya rasa itu lah pembahasan kita tentang Cara Mengatur Lebar Table Menggunakan Atribut Width. Sekian dulu dari saya. "Singkat, Semoga Bermanfaat"

Keep Coding ya Sobat!

Kuy ke Materi Selanjutnya : Cara Mengatur Tinggi Table Menggunakan Atribut Height