Tutorial Tabel HTML Part 7: Cara Mengatur dan Mengubah Tinggi Tabel HTML (atribut height)
Halo Kawan-kawan,
Jika pada tutorial sebelumnya kita mempelajari cara merubah lebar tabel HTML, kali ini kita akan membahas cara merubah tinggi dari tabel HTML dengan atribut height.
Fungsi atribut height
Sama seperti atribut width, atribut height dapat digunakan di dalam tag table atau tag tr.
Jika digunakan di dalam tag table, maka nilai dari width akan dibagi secara merata kedalam seluruh baris. Namun jika kita menginginkan merubah tinggi baris tabel secara individu, tag width harus diletakkan pada setiap tag tr.
Perhatikan code berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh pemakaian attribut height dalam Tabel HTML</title>
</head>
<body>
<h2>Belajar atribut height dalam Tabel HTML</h2>
<h3>Atribut height pada tag table</h3>
<table height="200px" border="1">
<caption>------------Tinggi Tabel 200px--------------</caption>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasil Code:
Pada contoh kode HTML diatas saya menambahkan atribut height=”200px” pada tag table, sehingga web browser membagi tinggi 200px itu kepada seluruh baris yang ada.
Untuk pengaturan tinggi kolom yang lebih spesifik, kita dapat mengatur tinggi masing-masing baris dengan cara menempatkan atribut height pada setiap tag tr. Berikut contoh penggunaan atribut height pada tag tr:
<!DOCTYPE html>
<html>
<head>
<title>Contoh pemakaian attribut height dalam Tabel HTML</title>
</head>
<body>
<h2>Belajar atribut height dalam Tabel HTML</h2>
<h3>Atribut height pada tag tr</h3>
<table border="1" >
<caption>---Baris 1 = 20px, Baris 2 = 40px, Baris 3 = 60px--</caption>
<tr height="20px">
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr height="40px">
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr height="60px">
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr height="80px">
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</table>
</body>
</html>
Hasil Code:
Seperti yang terlihat, bahwa ketiga baris pada tabel diatas memiliki tinggi yang berbeda-beda, karena kita menambahkan atribut height=”20px” pada baris pertama, height=”40px” pada baris kedua, dan “height=60px” pada baris ketiga.
Catatan:
- Sebagai catatan, seandainya total tinggi dari seluruh baris (atribut height pada tag tr) melebihi tinggi tabel (atribut height pada tag table), maka atribut height pada tag tabel akan diabaikan, dan tabel ditampilkan dengan ukuran height pada tag tr. Namun jika ukuran height pada tag tabel melebihi total height dari tag tr, maka ukuran tabel akan ditampilkan “proporsional” mengikuti height dari tabel.
- Sehingga untuk menghindari tampilan yang tidak diinginkan, pastikan agar total tinggi baris tidak melebihi nilai height tabel.
- Jika anda sudah mengenal CSS, disarankan menggunakan CSS untuk menggantikan penggunaan atribut height ini.
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2