Panduan Lengkap HTML Sizes dan Cara Ngatur Ukuran di Tabel HTML (Tutorial HTML Part 25)

HTML itu kayak rumah bagi website, dan ukuran elemen di dalamnya bisa diatur sesuai kebutuhan. Nah, di artikel ini kita bakal bahas HTML sizes dan cara ngatur lebar tabel, lebar kolom, serta tinggi baris biar tampilan tabel lo makin kece!

1. HTML Sizes: Ngatur Ukuran Elemen di HTML

Di HTML, ukuran elemen bisa ditentukan pakai atribut width dan height, atau lebih fleksibel pakai CSS. Formatnya bisa dalam:

• Pixel (px) → Ukuran tetap, misalnya width: 300px;
• Persentase (%) → Menyesuaikan parent element, contoh width: 50%;
• Viewport (vw/vh) → Berdasarkan ukuran layar, contoh width: 80vw;

Contohnya nih, kalau lo mau bikin gambar yang ukurannya pas di layar:

<img src="gambar.jpg" style="width: 100%; height: auto;">

Gampang, kan?

2. HTML Table Width: Ngatur Lebar Tabel

Kalau lo bikin tabel di HTML, secara default lebarnya bakal menyesuaikan konten di dalamnya. Tapi lo bisa atur lebarnya sendiri pakai atribut width di <table> atau CSS.

Contoh 1: Pakai Atribut width

<table width="500">
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
  </tr>
</table>

Hasilnya:

Contoh 2: Pakai CSS (Lebih Fleksibel)

<table style="width: 80%;">
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
  </tr>
</table>

Hasilnya:

Kalau pakai persentase (width: 80%), tabelnya bakal menyesuaikan ukuran layar.

3. HTML Table Column Width: Ngatur Lebar Kolom Tabel

Mau atur lebar tiap kolom di tabel HTML? Bisa pakai atribut width di <td>, <th>, atau pakai CSS.

Contoh 1: Pakai Atribut width

<table border="1">
  <tr>
    <td width="200">Kolom 1 (200px)</td>
    <td width="300">Kolom 2 (300px)</td>
  </tr>
</table>

Hasilnya:

Contoh 2: Pakai CSS di <colgroup> (Lebih Rapi)

<table border="1">
  <colgroup>
    <col style="width: 40%;">
    <col style="width: 60%;">
  </colgroup>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
  </tr>
</table>

Hasilnya:

Pakai <colgroup> ini keren buat styling tabel biar lebih rapi dan gampang diubah nanti.

4. HTML Table Row Height: Ngatur Tinggi Baris Tabel

Buat atur tinggi baris di tabel HTML, lo bisa pakai atribut height di <tr> atau CSS.

Contoh 1: Pakai Atribut height

<table border="1">
  <tr height="100">
    <td>Baris 1</td>
    <td>Isi</td>
  </tr>
</table>

Hasilnya:

Contoh 2: Pakai CSS (Lebih Fleksibel)

<table border="1">
  <tr style="height: 80px;">
    <td>Baris 1</td>
    <td>Isi</td>
  </tr>
</table>

Hasilnya:

Kalau pakai CSS, lebih gampang buat dimodifikasi nanti tanpa perlu ubah HTML-nya.

Kesimpulan

Ngatur ukuran elemen di HTML itu penting buat tampilan yang rapi dan responsif. Kalau mau mainin ukuran di tabel, ingat:

• Lebar tabel → Bisa pakai width di <table>
• Lebar kolom → Bisa pakai width di <td>, <th>, atau <colgroup>
• Tinggi baris → Bisa pakai height di <tr> atau CSS

Dengan trik ini, lo bisa bikin tabel yang nggak cuma enak dilihat tapi juga fungsional. Selamat ngoding!