📊 List dan Table

Selain teks biasa, sering kali kita butuh menampilkan informasi dalam bentuk yang lebih terstruktur, seperti daftar dan tabel. Nah, HTML udah nyediain tag khusus buat dua kebutuhan ini.
Untuk daftar, kamu bisa pakai elemen <ul> (unordered list) kalau item-nya nggak berurutan—misalnya daftar belanja atau poin-poin penting. Kalau item-nya punya urutan, seperti langkah-langkah membuat kue atau proses pendaftaran, pakainya <ol> (ordered list). Di dalam kedua tag ini, setiap item ditulis pakai tag <li> (list item). Jadi, list ini bikin konten lebih gampang dibaca dan dimengerti.
Sementara itu, tabel digunakan buat menampilkan data yang lebih kompleks, apalagi kalau melibatkan angka atau perbandingan. HTML pakai tag <table> untuk bikin tabel, lalu di dalamnya ada <tr> buat baris, <th> buat judul kolom, dan <td> buat isi sel. Tabel ini cocok banget buat menampilkan jadwal, data nilai, atau fitur produk yang mau dibandingkan. Jadi, dengan list dan table, kamu bisa bikin konten yang lebih rapi dan informatif.

📜 Struktur Umum List dan Table

<!-- Contoh List (Daftar) -->
<h3>Daftar Buah</h3>
<ul>
  <li>Apel</li>
  <li>Jeruk</li>
  <li>Mangga</li>
</ul>

<!-- Contoh Table (Tabel) -->
<h3>Jadwal Pelajaran</h3>
<table>
  <tr>
    <th>Hari</th>
    <th>Mata Pelajaran</th>
  </tr>
  <tr>
    <td>Senin</td>
    <td>HTML Dasar</td>
  </tr>
</table>

Penjelasan dari masing-masing tag di atas sebagai berikut:

List

<ul> (Unordered List), digunakan untuk membuat daftar yang tidak berurutan, biasanya ditandai dengan bullet points.
<ol> (Ordered List), digunakan untuk membuat daftar berurutan yang ditandai dengan angka atau huruf.
<li> (List Item), mewakili satu item di dalam sebuah list (baik <ul> maupun <ol>). Tag ini harus berada di dalam tag list.

Table

<table>, adalah tag utama untuk membuat sebuah tabel.
<tr> (Table Row), digunakan untuk membuat satu baris di dalam tabel.
<th> (Table Head), digunakan untuk sel header tabel. Teks di dalamnya otomatis menjadi tebal dan berada di tengah.
<td> (Table Data), digunakan untuk sel data biasa di dalam tabel.

💻 Contoh Kode:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Resep Nasi Goreng</title>
  </head>
  <body>
    <h1>Resep Nasi Goreng Spesial</h1>

    <h2>Bahan-bahan:</h2>
    <ul>
      <li>1 piring nasi putih</li>
      <li>2 siung bawang putih</li>
      <li>1 butir telur</li>
      <li>Kecap manis secukupnya</li>
    </ul>

    <h2>Informasi Gizi (Perkiraan)</h2>
    <table border="1">
      <tr>
        <th>Nutrisi</th>
        <th>Jumlah</th>
      </tr>
      <tr>
        <td>Kalori</td>
        <td>350 kcal</td>
      </tr>
      <tr>
        <td>Protein</td>
        <td>15 g</td>
      </tr>
    </table>
  </body>
</html>

⚙️ Demo Interaktif:

💡 Tips: Gunakan tag <table> untuk menampilkan data tabular (seperti spreadsheet), bukan untuk mengatur layout halaman. Untuk layout, gunakan CSS.