Rows & Cells

Setelah lesson ini, kamu dapat menulis baris, sel judul, dan sel data tabel dengan susunan yang konsisten.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Satu angka “12” tidak bercerita banyak. Di baris “Sains” dan kolom “Jumlah buku”, angka itu baru memiliki arti.

Menulis baris, sel judul, dan sel data tabel dengan susunan yang konsisten.

PAHAMI KONSEPNYA

Table → tr → sel

Table membungkus tabel. Tr membungkus satu baris. Th menyatakan sel judul; td menyatakan sel data. Th dan td berada di dalam tr, bukan langsung di dalam table. Di tabel sederhana, setiap baris memiliki jumlah kolom yang sama.

Header juga sebuah sel

Baris pertama dapat berisi th untuk nama kolom. Baris berikutnya berisi data, dan kolom pertama juga boleh berupa th jika menjadi judul baris. Memakai th memberi makna header, bukan hanya tulisan tebal.

Browser dapat menambahkan tbody

Saat membaca tr langsung di table, browser dapat menambahkan tbody di struktur dokumennya. Itu salah satu contoh pemulihan atau pelengkapan HTML. Pada lesson berikutnya, kelompok baris ditulis secara eksplisit agar kode lebih jelas.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<table>
  <tr><th scope="col">Kategori</th><th scope="col">Jumlah buku</th></tr>
  <tr><th scope="row">Sains</th><td>12</td></tr>
  <tr><th scope="row">Cerita</th><td>18</td></tr>
</table>

HASIL DI BROWSER

Masing-masing baris memiliki dua sel. Th Sains dan Cerita menamai baris; angka di td adalah data contoh.

KESALAHAN YANG SERING TERJADI

<table><td>Sains</td><td>12</td></table>

Sel tidak memiliki baris induk. Bungkus pasangan sel dengan tr; gunakan th jika sel itu merupakan judul.

COBA BERSAMA

Praktik memperjelas pemahaman.

Lengkapi elemen pembungkus satu baris.

<><th scope="row">Sains</th><td>12</td></tr>

Lihat petunjuk

Singkatan table row.

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

TULIS · LIHAT · PAHAMI

Catat bibit kebun

Buat tabel dua kolom: Tanaman dan Jumlah pot. Gunakan th untuk judul kolom, kemudian minimal tiga baris data tanaman dengan sel yang berada dalam tr.

<h1>Data Contoh Kebun</h1>
<table>
  <!-- Tambahkan baris dan sel -->
</table>

index.htmlHTMLLn 1, Col 14 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.

Tr membungkus baris; th dan td membungkus sel.
Th adalah sel judul, td adalah sel data.
Tabel sederhana menjaga jumlah kolom yang konsisten.

Tabel

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

Hubungkan dengan konsep lain

HTML table °HTML element °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →