Sebelumnya, kita sudah bahas cara mengatur ukuran tabel di HTML. Kali ini, kita akan bahas bagaimana cara mengatur tinggi tabel HTML. Check it out untuk panduan selengkapnya dari AneIqbal.
Mengatur tinggi tabel HTML
Untuk mengatur tinggi tabel, yang harus dilakukan adalah menambahkan atribut height pada tag <table>.
<table height="300px">
Supaya lebih jelas lagi, mari kita coba dengan membuat 2 tabel, satu tabel diberi atribut height dan satunya lagi tidak.
Simpan kodingan berikut dengan nama table-height.html.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Tinggi Tabel dengan Atribut height</title>
</head>
<body>
<h3>Tabel dengan atribut height="100px"</h3>
<table border="1" height="100px">
<tr>
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
</table>
<h3>Tabel tanpa atribut height</h3>
<table border="1">
<tr>
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya akan terlihat berbeda.
Bagaimana kalau lebih dari 1 baris data? Oke, mari kita coba dengan 3 baris dengan tinggi tabel yang sama.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Tinggi Tabel dengan Atribut height</title>
</head>
<body>
<h3>Tabel dengan atribut height="100px"</h3>
<table border="1" height="100px">
<tr>
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
<tr>
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
<tr>
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
</table>
<h3>Tabel tanpa atribut height</h3>
<table border="1">
<tr>
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
<tr>
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
<tr>
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
</tr>
</table>
</body>
</html>
Maka akan seperti ini hasilnya.
Browser akan menampilkan tinggi tiap baris data secara proporsional. Sehingga tampak ketiga baris data tersebut memiliki tinggi yang sama.
Mengatur tinggi baris
Setiap baris data pada tabel dapat kita atur tingginya. Misal baris data pertama tingginya 100px, baris data kedua tingginya 150px, dan baris data ketiga tingginya 200px. Tambahkan atribut height pada tag <tr>.
Seperti ini kodingannya. Ohiya, simpan dengan nama table-height-baris.html
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Tinggi Tabel dengan Atribut height</title>
</head>
<body>
<h3>Tabel dengan atribut height</h3>
<table border="1">
<tr height="100px">
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
<tr height="150px">
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
<tr height="200px">
<td>Data tabel di kolom 1</td>
<td>Data tabel di kolom 2</td>
</tr>
</table>
</body>
</html>
Hasilnya akan seperti ini.
Kalau tinggi tiga baris data tadi dijumlahkan, maka totalnya adalah 450px (100px + 150px + 200px. Lalu, jika kita tambahkan atribut height pada tag <table> sebesar 300px. Maka tingginya tidak akan berubah. Tingginya akan tetap menyesuaikan dengan jumlah tinggi baris data.
Itulah panduan bagaimana cara mengatur tinggi tabel HTML. Semoga panduan singkat di atas bisa membantu Anda dan terima kasih sudah membaca sampai akhir.
