Cara Mengatur Lebar dan Tinggi Tabel – atribut width height HTML

atribut width height tabel

Lebar tabel pada html akan mengikuti panjangnya data yang ada dalam tabel tersebut.
Semakin panjang datanya semakin lebar kolomnya, dan yang datanya pendek akan mengecil.
Kita dapat mengatur lebar tabel ini dengan atribut width…
Dan untuk mengatur tinggi tabel memaki atrihut height.

Mengatur Lebar Tabel

Untuk mengatur lebar tabel html kita akan menambah atribut width kedalam tag table.
Contoh atribut width

<!DOCTYPE html>
<html>
 <head>
 </head>
<body>
<table border="1" width="500px">
 <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>Data yang sangat panjang,
 sehingga merusak tampilan dari tabel</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>

Dari contoh ini saya membuat atribut dengan nilai 500px, artinya lebar tebal sebesar 500 pixel. Secara otomatis baris yang isinya panjang akan berpindah kebaris baru.
Perlu di ingat atribut width bukan hanya untuk tag table saja, atribut width bisa dipaki untuk tag th dan td juga.
Atribut width di tag table adalah untuk ukuran keseluruhan tabel.
Jika kita pakai atribut di tag th atau td ini akan mengatur lebar dari masing-masing kolom.
Dengan demikian Kita bisa menyamakan lebar semua kolom.
Untuk belajar silakan di edit code diatas tambahkan atribut pada tag th dengan cara seperti ini

Dengan demikian tabel akan mengubah tampilannya, kolom judul 2 lebih lebar dari pada kolom judul 1.

Mengatur Tinggi Table dengan atribut height

Jika atribut width untuk lebar tabel maka atribut height untuk mengatur tinggi tabel html.
Sama seperti atribut width,atribut height juga bisa digunakan dalam tag table ataupun dalam tag tr.
Jika digunakan di tag table fungsinya untuk mengatur tinggi keseluruhan tabel.
Jika diletakkan di dalam tag tr ini akan mengatur tinggi baris setiap tabel.
Contoh tag height

<!DOCTYPE html>
<html>
 <head>
 </head>
<body>
<table border="1" height="100px">
 <tr height="20px">
 <th>Judul 1</th>
 <th>Judul 2</th>
 <th>Judul 3</th>
 </tr>
 <tr height="30px">
 <td>Baris 1, Kolom 1</td>
 <td>Baris 1, Kolom 2</td>
 <td>Baris 1, Kolom 3</td>
 </tr>
 <tr height="50px">
 <td>Data yang sangat panjang,
 sehingga merusak tampilan dari tabel</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>

Kita dapat melihat perbedaan tinggi dari semua baris, disini saya membuat tinggi keseluruhan tabel 100px dan saya buat baris terakhir lebih tinggi daripada baris pertama dan kedua.
Mohon disesuaikan antara tinggi height pada tag table dan tag tr, jika pada tag table height nya mempunyai nilai 100px maka usahakan pada keseluruhan tag tr jangan melebihi dari 100px.
Mudah bukan untuk mengatur lebar dan tinggi tabel html?

Keyword:

  • cara mengatur tinggi kolom tabel pada html

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas