Tutorial HTML : Cara Mengatur Tinggi Tabel
Ukuran default untuk sebuah tabel pada HTML (terutama masalah tinggi tabel) kadang belum sesuai dengan kebutuhan kita, oleh sebab itu kita perlu melakukan modifikasi ukuran defaultnya dengan attribute height.
Mengatur Ukuran Tinggi Tabel
Untuk memodifikasi ukuran tinggi tabel, kita dapat memanfaatkan attribute height untuk mengeset tinggi yang kita inginkan.Apabila kita ingin merubah ukuran tinggi default dari sebuah tabel dimana setiap baris memiliki tinggi yang sama, maka attribute height kita tambahkan pada tag <table>, seperti : <table height="10px">...</table>.Jika kita membedakan tinggi antara satu baris dengan baris lainnya, maka penambahan attribute height dilakukan pada tag <tr>, seperti : <tr height="10px">...</tr>. Dan disisi tag <table> tidak perlu diset atau ditambahkan attribute height.
Ukuran Tinggi Tabel HTML yang seragam
Untuk membuat ukuran tinggi tabel yang seragam atau semua baris memiliki tinggi yang sama, maka diset tinggi pada tag <table> saja seperti contoh script dibawah ini :
<!DOCTYPE html> <html> <head> </head> <body> <table border="1" height="225px"> <tr> <th>No</th> <th>Nama</th> <th>NIM</th> <th>Jenis Kelamin</th> </tr> <tr> <td>1</td> <td>Andi Fraseria</td> <td>220120102001</td> <td>Pria</td> </tr> <tr> <td>2</td> <td>Rudi Hariadi</td> <td>220120102002</td> <td>Pria</td> </tr> <tr> <td>3</td> <td>Doni Mikarel</td> <td>220120102003</td> <td>Pria</td> </tr> </table> </body> </html>Outputnya ditunjukkan oleh Gambar.1 dibawah ini :
 |
| Gambar.1 |
Perhatian, kelemahan dari sistem ini jika terdapat banyak baris sedangkan tinggi yang anda set tidak mampu mengcover tinggi tiap-tiap baris, maka tinggi yang diset pada tag <table> akan diabaikan. Hal ini dikarenakan tiap baris memiliki default tinggi sendiri, jadi apabila ukuran tingginya lebih rendah dari default, maka akan percuma kita set tinggi pada tag <table>
Ukuran Tinggi Tabel HTML yang berbeda-beda tiap baris
Berikut ini kita akan membuat tabel yang ukuran tingginya berbeda-beda untuk tiap baris, seperti yang ditunjukkan oleh Gambar.2 dibawah ini : |
| Gambar.2 |
Untuk membuat tabel seperti Gambar.2 yang memiliki tinggi berbeda-beda tiap baris:
<!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr height="28px"> <th>No</th> <th>Nama</th> <th>NIM</th> <th>Jenis Kelamin</th> </tr> <tr height="48px"> <td>1</td> <td>Andi Fraseria</td> <td>220120102001</td> <td>Pria</td> </tr> <tr height="98px"> <td>2</td> <td>Rudi Hariadi</td> <td>220120102002</td> <td>Pria</td> </tr> <tr height="18px"> <td>3</td> <td>Doni Mikarel</td> <td>220120102003</td> <td>Pria</td> </tr> </table> </body> </html>
Tutorial Tabel HTML lainnya :
