Tabel HTML

Anda dapat membuat tabel menggunakan HTML.

Contoh

Tabel
Contoh ini menunjukkan bagaimana cara membuat tabel di dokumen HTML.
Garis pinggir tabel
Contoh ini menunjukkan berbagai jenis garis pinggir tabel.

(Beberapa contoh lainnya dapat ditemukan di bawah halaman ini)

Tabel

Tabel didefinisikan oleh tag <table>. Setiap tabel memiliki beberapa baris (didefinisikan oleh tag <tr>), setiap baris displit menjadi beberapa sel (didefinisikan oleh tag <td>). Huruf td mengacu pada data tabel (table data), yaitu konten sel data. Sel data dapat mengandung teks, gambar, daftar, paragraf, formulir, garis horizontal, tabel, dan lainnya.

<table border="1">
<tr>
<td>baris 1, sel 1</td>
<td>baris 1, sel 2</td>
</tr>
<tr>
<td>baris 2, sel 1</td>
<td>baris 2, sel 2</td>
</tr>
</table>

Tampil di browser seperti berikut:

baris 1, sel 1 baris 1, sel 2
baris 2, sel 1 baris 2, sel 2

Tabel dan atribut garis pinggir

Jika tidak mendefinisikan atribut garis pinggir, tabel akan menampilkan tanpa garis pinggir. Ini seringkali berguna, tetapi sebagian besar waktu, kita ingin menampilkan garis pinggir.

Gunakan atribut garis pinggir untuk menampilkan tabel dengan garis pinggir:

<table border="1">
<tr>
<td>Baris 1, sel 1</td>
<td>Baris 1, sel 2</td>
</tr>
</table>

Judul tabel

Judul tabel digunakan <th> tag untuk definisi.

Sebagian besar browser akan menampilkan judul tabel sebagai teks tebal dan tengah:

<table border="1">
<tr>
<th>Judul</th>
<th>Judul Lainnya</th>
</tr>
<tr>
<td>baris 1, sel 1</td>
<td>baris 1, sel 2</td>
</tr>
<tr>
<td>baris 2, sel 1</td>
<td>baris 2, sel 2</td>
</tr>
</table>

Tampil di browser seperti berikut:

Judul Judul Lainnya
baris 1, sel 1 baris 1, sel 2
baris 2, sel 1 baris 2, sel 2

Kolom kosong dalam tabel

Dalam beberapa browser, sel tabel yang kosong (tanpa konten) mungkin ditampilkan dengan kurang baik. Jika sel adalah kosong (tanpa konten), browser mungkin tidak dapat menampilkan garis pinggir sel itu.

<table border="1">
<tr>
<td>baris 1, sel 1</td>
<td>baris 1, sel 2</td>
</tr>
<tr>
<td></td>
<td>baris 2, sel 2</td>
</tr>
</table>

Browser mungkin menampilkan seperti ini:

Kolom kosong dalam tabel

Perhatian:Garis pinggir sel kosong ini belum ditampilkan. Untuk menghindari hal ini, tambahkan tanda spasi penempatan kosong di sel kosong, sehingga garis pinggir dapat ditampilkan.

<table border="1">
<tr>
<td>baris 1, sel 1</td>
<td>baris 1, sel 2</td>
</tr>
<tr>
<td> </td>
<td>baris 2, sel 2</td>
</tr>
</table>

Tampil di browser seperti berikut:

baris 1, sel 1 baris 1, sel 2
　 baris 2, sel 2

Beberapa contoh lainnya

Tabel tanpa garis pinggir
Contoh ini menunjukkan tabel tanpa garis pinggir.
Tajuk di dalam tabel (Heading)
Contoh ini menunjukkan bagaimana menampilkan tajuk tabel.
Sel kosong
Contoh ini menunjukkan bagaimana mengelola sel yang kosong dengan " ".
Tabel dengan tajuk
Contoh ini menunjukkan tabel dengan tajuk (caption).
Sel tabel yang melintasi baris atau kolom
Contoh ini menunjukkan bagaimana menentukan sel tabel yang melintasi baris atau kolom.
Tanda di dalam tabel
Contoh ini menunjukkan bagaimana menampilkan elemen di dalam elemen lain.
Garis Pengepungan Sel (Cell padding)
Contoh ini menunjukkan bagaimana menggunakan Cell padding untuk menciptakan jarak antara konten sel dan garis pengepungan.
Jarak Sel (Cell spacing)
Contoh ini menunjukkan bagaimana menggunakan Cell spacing untuk menambahkan jarak antar sel.
Menambahkan warna latar belakang atau gambar latar belakang ke tabel
Contoh ini menunjukkan bagaimana menambahkan latar belakang ke tabel.
Menambahkan warna latar belakang atau gambar latar belakang ke sel tabel
Contoh ini menunjukkan bagaimana menambahkan latar belakang ke satu atau lebih sel tabel.
Menata konten di dalam sel tabel
Contoh ini menunjukkan bagaimana menggunakaan atribut "align" untuk menata konten sel untuk menciptakan tabel yang indah.
Atribut Frame (frame)
Contoh ini menunjukkan bagaimana menggunakaan atribut "frame" untuk mengendalikan garis yang mengelilingi tabel.

Tanda tabel

Tabel Deskripsi
<table> Tentukan tabel.
<caption> Tentukan tajuk tabel.
<th> Tentukan tajuk tabel.
<tr> Tentukan baris tabel.
<td> Tentukan sel tabel.
<thead> Tentukan tajuk tabel.
<tbody> Tentukan badan tabel.
<tfoot> Tentukan kaki tabel.
<col> Tentukan atribut yang digunakan untuk kolom tabel.
<colgroup> Tentukan kelompok kolom tabel.