0Pricing
HTML Academy · Pelajaran

table tr td dan th

Buat tabel dasar dengan baris, sel data, dan sel header.

table tr td dan th adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Tabel HTML

Tabel menampilkan data dalam baris dan kolom. Gunakan tabel untuk data berbentuk tabel — bukan untuk tata letak halaman.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

Elemen table, tr, td

Elemen inti tabel:

  • <table> — wadah tabel
  • <tr> — baris tabel
  • <td> — sel data tabel
  • <th> — sel tajuk tabel (tebal dan rata tengah secara default)

th vs td

Gunakan <th> untuk sel tajuk — elemen ini memiliki makna semantik:

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

Struktur Dasar Tabel

Tabel minimal tetapi lengkap:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

Batas Tabel dengan CSS

Secara default, browser menampilkan tabel tanpa batas. Tambahkan batas dengan CSS:

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

Tabel Bukan untuk Tata Letak

Pada tahun 1990-an, tabel digunakan untuk tata letak halaman. Cara ini sudah usang dan merugikan:

  • Pembaca layar menafsirkan tabel sebagai data — tabel tata letak membingungkan pengguna
  • Tabel tidak fleksibel pada layar kecil
  • CSS Grid dan Flexbox telah menggantikan semua kebutuhan tata letak
  • Gunakan <table> hanya untuk data berbentuk tabel yang sebenarnya

Tabel Responsif

Tabel meluap pada layar kecil. Bungkus tabel agar dapat digulir secara horizontal:

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Sel Kosong

Tangani sel kosong secara sengaja:

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

Pratinjau thead dan tbody

Tabel sebaiknya menggunakan <thead> dan <tbody> untuk memisahkan baris tajuk dari baris data — akan dibahas dalam pelajaran berikutnya:

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

col dan colgroup untuk Pemberian Gaya Kolom

Terapkan gaya ke seluruh kolom dengan <colgroup> dan <col>:

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

Pewarnaan Baris Selang-seling dengan CSS

Gunakan warna baris bergantian agar lebih mudah dibaca:

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

Pemeriksaan Singkat

Apa perbedaan antara td dan th dalam tabel?

Rangkuman: table tr td th

Dasar-dasar tabel:

  • <table> — wadah tabel
  • <tr> — baris tabel
  • <td> — sel data
  • <th> — sel tajuk (semantik, tebal secara default)
  • Gunakan border-collapse: collapse untuk batas yang rapi
  • Tabel hanya untuk data — bukan untuk tata letak halaman

Pertanyaan yang Sering Diajukan

Apakah pelajaran “table tr td dan th” gratis?

Ya — teks lengkap “table tr td dan th” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “table tr td dan th”?

Buat tabel dasar dengan baris, sel data, dan sel header. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “table tr td dan th” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. table tr td dan th
  2. Struktur thead tbody tfoot
  3. colspan dan rowspan untuk Rentang Sel
  4. Aksesibilitas Tabel: scope summary caption
← Kembali ke HTML Academy