#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
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)
hasilnya
jika tinggi baris diatas dijumlahkan, maka total tinggi nya adalah 170px (50px + 30px + 30px + 50px).
Pencarian di thohirdev:
- belajar mengatur tinggi tabel
- mengatur tinggi baris tabel html
- atribut height pada tabel tidak di support HTML5
- height tabel html