Bagian 5: List dan Tabel

Membuat Daftar (List)

HTML menyediakan tiga jenis daftar utama:

Daftar tidak berurutan: menggunakan tag <ul>
Daftar berurutan: menggunakan tag <ol>
Daftar deskripsi: menggunakan tag <dl>

1. Unordered List (<ul>)

Digunakan untuk daftar tanpa urutan tertentu.

<ul>
  <li>Kurma Ajwa</li>
  <li>Kurma Sukari</li>
  <li>Air Zamzam</li>
</ul>

2. Ordered List (<ol>)

Digunakan untuk daftar berurutan atau bernomor.

<ol>
  <li>Buka kemasan</li>
  <li>Tuangkan ke gelas</li>
  <li>Siap diminum</li>
</ol>

3. Descriptive List (<dl>)

Digunakan untuk menampilkan daftar istilah dan deskripsinya.

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup untuk membuat halaman web.</dd>
  <dt>CSS</dt>
  <dd>Digunakan untuk mendesain tampilan halaman web.</dd>
</dl>

Membuat Tabel

Tabel digunakan untuk menampilkan data dalam bentuk baris dan kolom.

<table>: elemen utama tabel
<tr>: baris tabel (table row)
<th>: sel judul (table header)
<td>: sel isi data (table data)

Contoh sederhana:

<table border="1">
  <tr>
    <th>Produk</th>
    <th>Harga</th>
  </tr>
  <tr>
    <td>Kurma Ajwa</td>
    <td>Rp 150.000</td>
  </tr>
</table>

Simulasi Langsung

Ketik kode HTML untuk list atau tabel, lalu klik Jalankan untuk melihat hasilnya: