Cara Mengatur dan Mengubah Lebar Tabel HTML di Blog

Setiap tabel akan diatur lebarnya secara otomatis dari besar data yang ada didalam tabel tersebut, namun jika kita ingin ‘memaksakan’pada sebuah blog.

Untuk menampilkan tabel dengan lebar tertentu, kita bisa menambahkan sebuah atribut width untuk mengatur lebar tabel.

Berikut adalah contoh tabel yang memiliki perbedaan panjang untuk baris:

Contoh kode HTML tabel tanpa Atribut Width :

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

Hasilnya terlihat seperti ini :

Tabel Tanpa Atribut Width

Judul 1	Judul 2	Judul 3
Baris 1, Kolom 1	Baris 1, Kolom 2	Baris 1, Kolom 3
Data yang sangat panjang, sehingga merusak tampilan dari tabel	Baris 2, Kolom 2	Baris 2, Kolom 3
Baris 3, Kolom 1	Baris 3, Kolom 2	Baris 3, Kolom 3

Dapat dilihat bahwa blog menampilkan tabel sesuai dengan panjang data yang terdapat pada baris terpanjang, dan jika anda mencoba mengecilkan jendela blog, tampilan tabel akan bergeser menyesuaikan dengan lebar blog. 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” blog menampilkan lebar tabel sesuai dengan yang diinginkan, kita dapat menambahkan atribut width pada tag table.

Contoh kode dengan penggunaan atribut width tabel HTML, tabelwidth.HTML

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

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

Hasilnya seperti contoh berikut:

Lebar Tabel 600px

Judul 1	Judul 2	Judul 3
Baris 1, Kolom 1	Baris 1, Kolom 2	Baris 1, Kolom 3
Data yang sangat panjang, sehingga merusak tampilan dari tabel	Baris 2, Kolom 2	Baris 2, Kolom 3
Baris 3, Kolom 1	Baris 3, Kolom 2	Baris 3, Kolom 3

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 Blog. Sehingga jika sebuah tabel memiliki lebar 50%, maka ukurannya adalah 50% dari layar Blog

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

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 kode tabel yang menggunakan atribut width pada tag th.

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

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

Lebar Tabel 600px

Judul 1 (width=300px)	Judul 2 (width=200px)	Judul 3 (width=100px)
Baris 1, Kolom 1	Baris 1, Kolom 2	Baris 1, Kolom 3
Data yang sangat panjang, sehingga merusak tampilan dari tabel	Baris 2, Kolom 2	Baris 2, Kolom 3
Baris 3, Kolom 1	Baris 3, Kolom 2	Baris 3, Kolom 3

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.

Demikian Cara Mengatur dan Mengubah Lebar Tabel HTML di Blog, Silahkan dipraktekan sendiri semoga berhasil. Terima kasih Atas kunjungannya