Bila di panduan sebelumnya kita mempelajari cara merubah lebar tabel HTML, kali ini kita akan membahas cara merubah tinggi dari tabel HTML dengan atribut height.
Bagi kebutuhan yang lebih khusus, tinggi default tabel HTML dirasa tak mencukupi, bagi hal ini HTML menyediakan atribut height bagi mengatur tinggi tabel, dan pun mengatur tinggi masing-masing baris.
Manfaat atribut height
Sama seperti atribut width, atribut height dapat digunakan di pada tag table atau tag tr.
Bila digunakan di pada tag table, karenanya nilai dari width akan dibagi secara merata kedalam seluruh baris. Namun kalau kita menginginkan merubah tinggi baris tabel secara individu, tag width mesti diletakkan di setiap tag tr.
Berikut contoh pemakaian atribut height di tag table:
|
1 |
]<!DOCTYPE html><br/><html><br/> <head><br/> <title>Contoh pemakaian attribut height pada Tabel HTML</title><br/> </head><br/><body><br/><h2>Belajar atribut height pada Tabel HTML</h2><br/><h3>Atribut height di tag table</h3><br/><table height=200px border=1><br/> <caption>------------Tinggi Tabel 200px--------------</caption><br/> <tr><br/> <th>Judul 1</th><br/> <th>Judul 2</th><br/> <th>Judul 3</th><br/> </tr><br/> <tr><br/> <td>Baris 1, Kolom 1</td><br/> <td>Baris 1, Kolom 2</td><br/> <td>Baris 1, Kolom 3</td><br/> </tr><br/> <tr><br/> <td>Baris 2, Kolom 1</td><br/> <td>Baris 2, Kolom 2</td><br/> <td>Baris 2, Kolom 3</td><br/> </tr><br/> <tr><br/> <td>Baris 3, Kolom 1</td><br/> <td>Baris 3, Kolom 2</td><br/> <td>Baris 3, Kolom 3</td><br/> </tr><br/> </table><br/></body><br/></html> |
Di contoh kode HTML diatas saya menambahkan atribut height=”200px” di tag table, sehingga web browser membagi tinggi 200px itu kepada seluruh baris yang terdapat.
Bagi pengaturan tinggi kolom yang lebih spesifik, kita dapat mengatur tinggi masing-masing baris dengan cara menempatkan atribut height di setiap tag tr. Berikut contoh pemakaian atribut height di tag tr:
|
1 |
]<!DOCTYPE html><br/><html><br/> <head><br/> <title>Contoh pemakaian attribut height pada Tabel HTML</title><br/> </head><br/><body><br/><h2>Belajar atribut height pada Tabel HTML</h2><br/><h3>Atribut height di tag tr</h3><br/><table border=1 ><br/> <caption>---Baris 1 = 20px, Baris 2 = 40px, Baris 3 = 60px--</caption><br/> <tr height=20px><br/> <th>Judul 1</th><br/> <th>Judul 2</th><br/> <th>Judul 3</th><br/> </tr><br/> <tr height=40px><br/> <td>Baris 1, Kolom 1</td><br/> <td>Baris 1, Kolom 2</td><br/> <td>Baris 1, Kolom 3</td><br/> </tr><br/> <tr height=60px><br/> <td>Baris 2, Kolom 1</td><br/> <td>Baris 2, Kolom 2</td><br/> <td>Baris 2, Kolom 3</td><br/> </tr><br/> <tr height=80px><br/> <td>Baris 3, Kolom 1</td><br/> <td>Baris 3, Kolom 2</td><br/> <td>Baris 3, Kolom 3</td><br/> </tr><br/> </table><br/> </body><br/> </html> |
Seperti yang terlihat, bahwa ketiga baris di tabel diatas mempunyai tinggi yang berbeda-beda, karena kita menambahkan atribut height=”20px” di baris pertama-tama, height=”40px” di baris kedua, dan “height=60px” di baris ketiga.
Sehingga bagi menghindari tampilan yang tak diinginkan, pastikan agar total tinggi baris tak melebihi nilai height tabel.
Sumber https://www.duniailkom.com/
