#37 Mengatur lebar tabel dan kolom tabel pada HTML

pada tutorial ini kita belajar mengatur lebar tabel dan kolom tabel pada html, untuk mengatur lebar tabel atau kolom tabel gunakan atribut style.

HTML5 tidak mensupport atau mendukung lagi atribut width, jadi properti width didalam CSS digunakan untuk mengatur lebar tabel maupun kolom.

atribut width dibawah ini sebaiknya tidak digunakan lagi 🙂

    <table width="100%">
        ...
    </table>Code language: HTML, XML (xml)

Baca juga: Struktur dasar membuat tabel pada HTML

Mengatur lebar tabel pada HTML

    <table style="width:tambah_lebar_disini;">
        ...
    </table>Code language: HTML, XML (xml)

tambah_lebar_disini diganti dengan lebar yang kita inginkan, lebar dapat berisi nilai fixed ( tetap ) misal dalam satuan pixel (200px, 400px), maupun nilai relatif dalam bentuk persen (20%, 50%, 100%).

tambahkan atribut border=”1″ di tag <table> untuk melihat garis tabel.

contoh lebar tabel dengan nilai fixed sebagai berikut.

<!DOCTYPE html>
<html>
<head>
    <title> membuat lebar tabel pada html </title>
</head>
<body>
    <table style="width:400px" border="1">
        <thead>
            <tr>
                <th>Bulan</th>
                <th>Penjualan</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mei</td>
                <td>100.000</td>
            </tr>
            <tr>
                <td>Juni</td>
                <td>200.000</td>
            </tr>
        </tbody>
        <tfoot style="text-align:center">
            <tr>
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>Code language: HTML, XML (xml)

hasilnya

lebar tabel hanya 400px tidak lebar sesuai layar karena mengunakan nilai fixed ( tetap ).

2. contoh lebar tabel dengan nilai relatif sebagai berikut.

sebagai contoh membuat lebar tabel dengan ukuran satu layar penuh dapat menggunakan width dengan nilai 100% seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title> membuat lebar relatif tabel pada html </title>
</head>
<body>
    <table style="width:100%" border="1">
        <thead>
            <tr>
                <th>Bulan</th>
                <th>Penjualan</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mei</td>
                <td>100.000</td>
            </tr>
            <tr>
                <td>Juni</td>
                <td>200.000</td>
            </tr>
        </tbody>
        <tfoot style="text-align:center">
            <tr>
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>Code language: HTML, XML (xml)

hasilnya

jika kita memperbesar atau mengecilkan layar, lebar tabel akan menyesuaikan sesuai dengan lebar layar

Mengatur lebar kolom tabel pada HTML

mengatur lebar kolom seperti mengatur lebar tabel dengan nilai fixed atau nilai relatif. bedanya untuk mengatur lebar kolom atribut width diletakkan pada tag kolom ( tag th, td ).

contoh lebar kolom tabel dengan nilai fixed sebagai berikut.

<!DOCTYPE html>
<html>
<head>
    <title> membuat lebar fixed kolom tabel pada html </title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th width="100px">Bulan</th>
                <th width="200px">Penjualan</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mei</td>
                <td>100.000</td>
            </tr>
            <tr>
                <td>Juni</td>
                <td>200.000</td>
            </tr>
        </tbody>
        <tfoot style="text-align:center">
            <tr>
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>Code language: HTML, XML (xml)

hasilnya

Dengan mengatur lebar kolom di tag <th>, tag <td> di dalam tag <tbody> otomatis mengikuti lebar dari tag <th>

jika kita menambahkan atribut width di tag <td> dengan 300px maka tag <th> akan mengikuti lebar paling panjang dari tag <td>.

untuk mengatur lebar kolom yang benar yaitu cukup dengan mengubah tag <th> bukan tag <td>.

2. contoh lebar kolom tabel dengan nilai relatif sebagai berikut.

Jika ingin mengubah nilai kolom dengan nilai relatif buat ukuran width tabel menjadi 100%, jika lebar tabel tidak 100% maka lebar kolom tidak berfungsi, seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title> membuat lebar relatif kolom tabel pada html </title>
</head>
<body>
    <table style="width:100%" border="1">
        <thead>
            <tr>
                <th width="30%">Bulan</th>
                <th width="70%">Penjualan</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mei</td>
                <td>100.000</td>
            </tr>
            <tr>
                <td>Juni</td>
                <td>200.000</td>
            </tr>
        </tbody>
        <tfoot style="text-align:center">
            <tr>
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>Code language: HTML, XML (xml)

coba script dengan menekan tombol biru di pojok kanan atas kode, hapus width:100% maka lebar kolom tidak berfungsi karena persen dari kolom mengikuti lebar tabel

hasilnya