When to Use a Table

Setelah lesson ini, kamu dapat memilih tabel untuk data dua dimensi dan daftar untuk informasi yang tidak memerlukan kolom.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Kamu ingin membandingkan jam buka perpustakaan pada tiga hari. Membacanya sebagai paragraf panjang melelahkan. Baris dan kolom membuat hubungan itu langsung terlihat.

Memilih tabel untuk data dua dimensi dan daftar untuk informasi yang tidak memerlukan kolom.

PAHAMI KONSEPNYA

Tabel untuk hubungan baris dan kolom

Data tabular memiliki informasi yang saling berpotongan: misalnya sebuah baris mewakili hari, sedangkan kolom menyatakan jam buka. Setiap sel dapat dipahami lewat judul baris dan kolomnya. Itulah alasan memakai table.

Daftar untuk kumpulan item

Daftar perlengkapan yang hanya berisi nama benda cukup memakai ul. Memaksanya menjadi tabel satu kolom menambah struktur tanpa manfaat. Sebaliknya, membandingkan beberapa atribut pada banyak item sering lebih jelas dengan tabel.

Bukan alat untuk layout halaman

Jangan menggunakan table untuk menaruh menu di kiri dan artikel di kanan. Itu tata letak visual, bukan data tabular. HTML menyatakan makna data; pengaturan layout merupakan materi CSS setelah course ini.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<table>
  <caption>Contoh jam buka ruang baca</caption>
  <tr><th scope="col">Hari</th><th scope="col">Buka</th></tr>
  <tr><th scope="row">Senin</th><td>09.00</td></tr>
  <tr><th scope="row">Sabtu</th><td>10.00</td></tr>
</table>

HASIL DI BROWSER

Hari dan jam buka adalah dua dimensi informasi. Angka waktunya adalah data contoh untuk latihan.

KESALAHAN YANG SERING TERJADI

<table><tr><td>Menu situs</td><td>Artikel utama</td></tr></table>

Menu dan artikel bukan data yang dibandingkan melalui baris dan kolom. Gunakan nav dan main, lalu atur tampilannya dengan CSS saat dibutuhkan.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Mana yang paling cocok menjadi tabel?

Tiga barang yang perlu dibawaPerbandingan jumlah buku berdasarkan kategori dan rakJudul artikel dan gambar hero

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Pilih bentuk informasi

Buat ul untuk minimal dua perlengkapan membaca. Di bawahnya buat table untuk jadwal rekaan dengan dua kolom (Hari dan Jam), satu baris header, dan minimal dua baris data.

<h1>Ruang Baca</h1>
<h2>Perlengkapan</h2>
<h2>Jadwal Contoh</h2>

index.htmlHTMLLn 1, Col 13 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Gunakan table untuk data dua dimensi.
Gunakan daftar untuk kumpulan item sederhana.
Tabel bukan alat tata letak halaman.

TabelDaftar

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

HTML table °HTML list °Semantic HTML °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →