Tutorial Tabel HTML: Cara Mengatur Lebar Kolom Tabel dan Lebar Tabel

cara mengatur lebar tabel

Di postingan sebelumnya, kita sudah membahas cara mengatur garis antara kolom dan baris tabel. Fungsi dari garis tersebut adalah untuk memudahkan kita melihat data-data pada tabel. Sehingga kita tidak merasa bingung dan pusing melihat data-data yang ada.

Di postingan ini, kita akan membahas cara mengatur lebar kolom tabel dan juga lebar tabelnya. Simak terus postingan ini sampai akhir ya!

Mengatur lebar tabel

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.

cara mengatur lebar tabel html

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

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.

cara mengatur lebar kolom tabel

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.

0 Komentar untuk "Tutorial Tabel HTML: Cara Mengatur Lebar Kolom Tabel dan Lebar Tabel"