Cara menggunakan mengatur lebar tabel bootstrap

Question

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

Table of Contents Show

Mengatur lebar tabel pada HTML
Mengatur lebar kolom tabel pada HTML
Untuk mengatur besar tabel atau lebar tabel menggunakan atribut apa?
Manakah class khusus table yang menyebabkan warna sebuah table menjadi selang seling?

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.

Coba Script

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

Coba Script

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

Coba Script

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

Coba Script

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

Untuk mengatur besar tabel atau lebar tabel menggunakan atribut apa?

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.

Manakah class khusus table yang menyebabkan warna sebuah table menjadi selang seling?

Table striped adalah table yang memiliki warna belang atau selang-seling antar 1 baris dengan baris table lainnya. untuk membuat table striped atau table belang ini kita bisa gunakan class .table-striped .

kode bootstrap