Tutorial HTML / Membuat tabel dengan table, tr, th, dan td

Gunakan tabel HTML untuk data yang nilainya berbasis baris dan kolom. Sebuah elemen table berisi baris (tr); setiap baris memiliki sel header (th) atau sel data (td). Jangan gunakan tabel hanya untuk menempatkan bagian-bagian halaman.

Struktur dasar tabel

Tabel kecil ini menunjukkan stok dari dua jenis buah. Baris pertama memberi nama kolom; baris berikutnya berisi nilainya.

<table>
  <tr>
    <th>Buah</th>
    <th>Stok</th>
  </tr>
  <tr>
    <td>Apel</td>
    <td>12 buah</td>
  </tr>
  <tr>
    <td>Pir</td>
    <td>8 buah</td>
  </tr>
</table>

Data muncul dalam baris dan kolom sebagai berikut:

Masukkan kode ke dalam body file HTML. Setiap tr membentuk baris horizontal, dan sel-selnya muncul dari kiri ke kanan. Gaya tabel standar browser mungkin menampilkan sedikit atau tidak ada bingkai; tambahkan bingkai CSS hanya setelah struktur data benar. Saat merencanakan tabel, gambar dulu kolom dan barisnya. Untuk menambahkan jenis buah lain, tambahkan baris data lagi dengan nama jenis buah dan nilai stok.

Pisahkan baris header dan baris data

Gunakan thead dan tbody jika Anda ingin mengelompokkan baris header dan data secara eksplisit. Sebuah baris ringkasan dapat ditempatkan di tfoot. Elemen-elemen ini mengatur baris; mereka tidak menghasilkan warna atau bingkai sendiri. Anda dapat menghilangkannya dalam tabel kecil, meskipun parser HTML browser mungkin memasukkan tbody ke dalam pohon dokumen, bahkan jika itu tidak ditulis dalam kode sumber.

<table>
  <thead>
    <tr><th>Buah</th><th>Stok</th></tr>
  </thead>
  <tbody>
    <tr><td>Apel</td><td>12 buah</td></tr>
    <tr><td>Pir</td><td>8 buah</td></tr>
  </tbody>
</table>

Pilih sel header dan sel data

Gunakan th ketika suatu nilai mengidentifikasi sebuah baris atau kolom; gunakan td untuk data yang terkait dengan header ini. Jangan pilih th hanya untuk membuat teks menjadi tebal. Sebuah tabel dapat memiliki baik header kolom maupun header baris. Masukkan satuan baik di samping setiap angka atau di header yang sesuai. Nilai tunggal seperti “12” mungkin tidak memberi tahu pembaca apakah itu berarti jumlah barang atau harga. Bandingkan label tabel, scope, dan sel yang digabungkan dengan tabel yang sebenarnya di Tabel yang aksesibel: caption, scope, dan sel yang digabungkan .

Segera setelah dasarnya jelas, Anda dapat menambahkan caption untuk memberi nama pada tabel, scope untuk menjelaskan hubungan header, dan colspan atau rowspan jika sebuah sel memang mencakup beberapa posisi. Referensi tabel di MDN menjelaskan fungsi-fungsi ini.

Dalam file HTML yang sebenarnya, bungkus tabel yang lebar dengan kontainer seperti berikut. CSS overflow-x memungkinkan pengguliran horizontal tanpa menghapus data atau mengubah arah tabel.

<div class="table-scroll">
  <table>
    <!-- Masukkan baris dari tabel sebelumnya di sini. -->
  </table>
</div>

.table-scroll { max-width: 100%; overflow-x: auto; }

Memperbaiki tabel yang tidak sejajar

Periksa bahwa setiap baris normal berisi jumlah sel yang diharapkan. Jumlah sel yang berbeda dapat memindahkan data ke judul yang salah. Jika tabel lebar terpotong di layar sempit, pertimbangkan untuk menambahkan area gulir horizontal, daripada memampatkan konten sehingga tidak bisa dibaca. Jangan menambahkan spasi berulang di dalam sel untuk meniru kolom; penjajaran dan bingkai termasuk dalam CSS, sedangkan hubungan data termasuk dalam HTML.