Cara Mengatur Tinggi Tabel HTML

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.

aneiqbal-mengatur-tinggi-tabel
mengatur tinggi tabel

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.

aneiqbal-mengatur-tinggi-tabel2
mengatur tinggi tabel HTML

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.

aneiqbal-mengatur-tinggi-tabel3
mengatur tinggi tabel HTML

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.

Leave a Comment