Di postingan ini, kita akan membahas bagaimana cara mengatur ukuran tabel di HTML. Mulai dari lebar kolom tabel dan juga lebar tabelnya. Mengapa penting untuk bisa mengatur ukuran tabel di HTML?
Ohiya, sebelum lanjut masuk ke pembahasan, silakan cek postingan kami sebelumnya jika Anda belum. Pembahasannya yaitu cara mengatur garis antara kolom dan baris tabel HTML.
Ada beberapa alasannya. Pertama, secara default/bawaan, table HTML hanya memiliki tampilan yang sangat polos dan ukurannya akan menyesuaikan dengan panjang konten/teksnya. Kedua, supaya kita bisa mendapatkan ukuran tabel HTML sesuai dengan yang kita butuhkan.
Nah bagaimana caranya untuk bisa mengatur ukuran tabel HTML ini? Simak terus postingan ini sampai akhir ya!
Panduan cara mengatur ukuran tabel di HTML
Mengatur lebar tabel HTML
Untuk mengatur lebar tabel, kita perlu menambahkan atribut width pada tag <table>. Mengapa harus diatur lebar tabelnya? Supaya tabel terlihat lebih rapi. Perhatikan gambar berikut.
Tabel tanpa atribut width akan memanjang sesuai panjang datanya sampai memenuhi layar web browser. Jika ditambahkan atribut width, maka datanya akan menyesuaikan dengan lebar tabelnya sehingga ia akan secara otomatis berpindah baris.
<table border="1" width="500px">
Berikut kodingan HTML dari gambar di atas. Simpan dengan nama table-width.html.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Lebar Tabel dengan Atribut width</title>
</head>
<body>
<h3>Tabel tanpa atribut width</h3>
<table border="1">
<tr>
<th>Kolom</th>
<th>Judul</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Ini adalah tulisan judul</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Ini adalah tulisan judul</td>
</tr>
<tr>
<td>Baris 3, Kolom 1 - Baris 3, Kolom 1 - Baris 3, Kolom 1 - Baris 3, Kolom 1 - Baris 3, Kolom 1 - Baris 3, Kolom 1 - Baris 3, Kolom 1</td>
<td>Ini adalah tulisan judul</td>
</tr>
</table>
<h3>Tabel dengan atribut width="500px"</h3>
<table border="1" width="500px">
<tr>
<th>Kolom</th>
<th>Judul</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Ini adalah tulisan judul</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Ini adalah tulisan judul</td>
</tr>
<tr>
<td>Baris 3, Kolom 1 - Baris 3, Kolom 1 - Baris 3, Kolom 1</td>
<td>Ini adalah tulisan judul</td>
</tr>
</table>
</body>
</html>
Mengatur lebar kolom tabel HTML
Selain lebar tabel, lebar kolom tabelnya juga dapat kita atur. Caranya pun sama, yakni dengan menambahkan atribut width. Bedanya atribut tersebut ditambahkan pada tag <th> atau <td>.
Sebagai contoh, kita punya tabel dengan lebar 500px. Di dalam tabel tersebut terdapat dua kolom dan masing-masing kolom memiliki lebar 200px dan 300px.
Berikut kodingan HTML-nya. Simpan dengan nama table-width-kolom.html.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Lebar Tabel dengan Atribut width</title>
</head>
<body>
<h3>Tabel dengan atribut width="500px"</h3>
<table border="1" width="500px">
<tr>
<th width="200px">Kolom width="200px"</th>
<th width="300px">Judul width="300px"</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Ini adalah tulisan judul</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Ini adalah tulisan judul</td>
</tr>
<tr>
<td>Baris 3, Kolom 1 - Baris 3, Kolom 1 - Baris 3, Kolom 1</td>
<td>Ini adalah tulisan judul</td>
</tr>
</table>
</body>
</html>
Hasilnya akan terlihat seperti berikut.
Jadi seperti itulah cara mengatur lebar kolom tabel dan lebar tabel pada HTML. Sehingga tabel yang kita buat menjadi lebih rapi dan datanya dapat terbaca dengan jelas.
Selanjutnya, kita akan bahas bagaimana cara mengatur tinggi tabel HTML.
