Tutorial Tabel HTML: Cara Mengatur Tinggi Baris Tabel dan Tinggi Tabel

cara mengatur tinggi tabel

Di postingan sebelumnya, kita sudah membahas cara mengatur lebar kolom tabel dan juga lebar tabelnya. Mengatur lebar kolom dan tabel dapat memperjelas data-data yang ada pada tabel.

Di postingan kali ini, kita akan membahas cara mengatur tinggi baris tabel dan juga tinggi dari tabel itu sendiri.

Mengatur tinggi tabel

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.

cara 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.

cara mengatur tinggi tabel

Browser akan menampilkan tinggi tiap baris data secara proporsional. Sehingga tampak ketiga baris data tersebut memiliki tinggi yang sama.

Mengatur tinggi baris tabel

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.
mengatur tinggi tabel

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.


0 Komentar untuk "Tutorial Tabel HTML: Cara Mengatur Tinggi Baris Tabel dan Tinggi Tabel"