#38 Cara mengatur tinggi tabel dan tinggi baris pada HTML

pada tutorial sebelumnya kita sudah belajar mengatur lebar tabel dan kolom tabel. sekarang kita akan belajar mengatur tinggi tabel dan tinggi baris pada html, untuk mengatur tinggi tabel atau baris tabel gunakan atribut style.

atribut height tidak didukung dalam HTML5, gunakan properti height dalam CSS untuk mengatur tinggi tabel maupun tinggi baris pada tabel.

atribut height seperti dibawah ini sebaiknya tidak digunakan lagi walaupun sekarang masih disupport oleh browser 🙂

    <table height="200px">
        ...
    </table>Code language: HTML, XML (xml)

Mengatur tinggi tabel pada HTML

    <table style="height:tambah_tinggi_disini">
        ...
    </table>Code language: HTML, XML (xml)

tambah_tinggi_disini diganti dengan tinggi yang kita inginkan, tinggi disini hanya berisi nilai fixed ( tetap ) misal dalam satuan pixel (200px, 400px).

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

1. contoh mengatur tinggi tabel

hasil sebelum tabel diatur heightnya

sekarang kita atur tingginya seperti kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title> membuat tinggi tabel pada html </title>
</head>
<body>
    <table style="height:200px;" 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>
            <tr>
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>Code language: HTML, XML (xml)

hasilnya

jika kita mengubah tabel maka yang berubah hanya yang ada di dalam tag <tbody> karena HTML5 membaca hanya konten tubuh tabel yang akan dirubah tingginya. total tinggi tabel tersebut 200px sesuai tinggi yang sudah kita atur.

2. contoh mengatur tinggi baris pada tabel

penulisan sintaks yang benar dalam mengatur tinggi baris pada tabel cukup diletakkan pada tag <tr> bukan tag <th> atau tag <td> yang biasanya dilakukan oleh programmer pemula.

<!DOCTYPE html>
<html>
<head>
    <title> membuat tinggi baris pada tabel </title>
</head>
<body>
    <table border="1">
        <thead>
            <tr style="height:50px">
                <th>Bulan</th>
                <th>Penjualan</th>
            </tr>
        </thead>
        <tbody>
            <tr style="height:30px">
                <td>Mei</td>
                <td>100.000</td>
            </tr>
            <tr style="height:30px">
                <td>Juni</td>
                <td>200.000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="height:50px">
                <td>Jumlah</td>
                <td>300.000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>Code language: HTML, XML (xml)