Menu
CoddyTech
START LEARNING

Dasar-Dasar Tabel

Termasuk bagian Dasar-Dasar dalam perjalanan HTML di Coddy. Pelajaran 48 dari 60.

Dalam HTML, tabel adalah cara untuk mengatur data ke dalam baris dan kolom. Tabel umumnya digunakan untuk menampilkan data dalam format terstruktur, seperti jadwal, statistik, atau jenis informasi lainnya yang dapat disajikan dalam kisi. Untuk membuat tabel, kamu menggunakan tag <table> bersama tag lain seperti <tr> untuk baris tabel, <td> untuk data tabel (sel), dan <th> untuk header tabel.

Berikut struktur dasar tabel HTML:

<table>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
	</tr>
	<tr>
		<td>Row 1, Cell 1</td>
		<td>Row 1, Cell 2</td>
	</tr>
	<tr>
		<td>Row 2, Cell 1</td>
		<td>Row 2, Cell 2</td>
	</tr>
</table>
  • <table>: Tag yang mendefinisikan tabel.
  • <tr>: Tag yang mendefinisikan baris tabel.
  • <th>: Tag yang mendefinisikan sel header. Sel header biasanya digunakan untuk judul kolom atau baris dan ditampilkan dalam huruf tebal secara default.
  • <td>: Tag yang mendefinisikan sel standar dalam tabel.

Beginilah tampilan tabel ini di browser:

Header 1Header 2
Baris 1, Sel 1Baris 1, Sel 2
Baris 2, Sel 1Baris 2, Sel 2

Dalam contoh ini, kita memiliki tabel dengan dua baris dan dua kolom. Baris pertama berisi sel header, sedangkan baris berikutnya berisi sel data biasa. Struktur ini membuat tata letak kisi sederhana yang mudah dibaca dan dipahami.

challenge icon

Tantangan

Mudah

Buat dokumen HTML yang mencakup tabel dengan struktur berikut:

  1. Tag <table> untuk mendefinisikan tabel.
  2. Baris tabel (<tr>) untuk header dengan dua sel header (<th>). Sel header pertama harus bertuliskan Name, dan sel kedua harus bertuliskan Age.
  3. Baris tabel (<tr>) dengan dua sel data (<td>). Sel pertama harus bertuliskan John, dan sel kedua harus bertuliskan 30.
  4. Baris tabel lainnya (<tr>) dengan dua sel data (<td>). Sel pertama harus bertuliskan Jane, dan sel kedua harus bertuliskan 25.

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <!-- Tulis kodemu di sini -->
    </body>
</html>
quiz iconUji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Dasar-Dasar

1Dasar-Dasar HTML

Apa itu HTML?Struktur Dasar HTMLTag dan ElemenTag Bersarang dan Tag PenutupKomentar dalam HTML

4Kartu Resep

Gambaran Umum ProyekJudul dan Deskripsi ResepPelajaran proyekBahan-bahanPelajaran proyekLangkah-langkahPelajaran proyek

7Halaman Profil Pribadi

Gambaran Umum ProyekBagian HeaderPelajaran proyekFoto ProfilPelajaran proyekBagian Tentang SayaPelajaran proyekTautan Media SosialPelajaran proyek

10Tabel

Dasar-Dasar TabelMenambahkan Judul TabelMembentangkan Baris dan KolomRangkuman: Tabel

2Teks dan Pemformatan

JudulParagrafPindah BarisTeks Tebal dan MiringTeks Tebal dan Miring LagiRangkuman: Pemformatan

5Menambahkan Konten

Atribut HTMLTautanTautan ke Halaman BaruGambarAtribut Gambar

8Formulir dan Input Bagian 1

Dasar FormulirInput TeksAtribut InputKolom Kata SandiLabel untuk InputUlasan, Formulir Dasar

11Halaman Pendaftaran Acara

Gambaran Umum ProyekBagian HeaderPelajaran proyekBagian Detail AcaraPelajaran proyekFormulir PendaftaranPelajaran proyekBagian FooterPelajaran proyek

3Bekerja dengan list

list Tak Berurutanlist Berurutanlist BersarangRingkasan: list

6Tata Letak Halaman

Elemen divElemen span SebarisTag SemantikBagian dan ArtikelRangkuman Tata Letak

9Formulir dan Input Bagian 2

Tombol RadioKotak CentangMenu DropdownTombolTombol dalam FormulirRangkuman, Formulir #1Rangkuman, Formulir #2

12Tantangan Akhir

Kartu Profil SederhanaKartu Undangan AcaraHalaman Artikel SederhanaDaftar Buku Favorit

Latihan sendiri: Playground Web