HTML Tabel / Table

Tabel HTML Apel 44% Pisang 23% Jeruk 13% Lainnya 10%

---

Cobalah Sendiri - Contoh

Tabel

Cara membuat tabel dalam sebuah dokumen HTML.

Tabel perbatasan

Bagaimana menentukan batas table yang berbeda.

(Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini).

---

Tabel HTML

Tabel didefinisikan dengan tag <table>.

Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi menjadi sel-sel data (dengan tag <td>). td singkatan dari "table data," dan memegang isi sel data. Tag <td> dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll

Tabel Contoh

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

Bagaimana kode HTML di atas terlihat pada browser:

Baris 1, Kolom 1	Baris 1, Kolom 2
Baris 2, Kolom 1	Baris 2, Kolom 2

---

HTML Tabel dan Atribut Perbatasan

Jika Anda tidak menentukan atribut border, tabel akan ditampilkan tanpa batas. Kadang-kadang ini bisa bermanfaat, tapi sebagian besar waktu, kita ingin perbatasan untuk menunjukkan.

Untuk menampilkan tabel dengan perbatasan, menentukan atribut border:

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

---

HTML Tabel Header

Header informasi dalam tabel didefinisikan dengan tag <th>.

Teks dalam elemen th akan berani dan terpusat.

<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> </tr> </table>

Bagaimana kode HTML di atas terlihat pada browser:

Header 1	Header 2
Baris 1, Kolom 1	Baris 1, Kolom 2
Baris 2, Kolom 1	Baris 2, Kolom 2

---

Contoh Lainnya

Tabel tanpa batas

Cara membuat tabel tanpa batas.

Tabel header

Cara membuat header tabel.

Table dengan keterangan

Bagaimana menambahkan keterangan ke table.

Tabel span kolom-kolom yang lebih dari satu baris / kolom

Bagaimana mendefinisikan sel tabel yang span lebih dari satu baris atau satu kolom.

Tag di dalam tabel

Bagaimana menampilkan elemen-elemen di dalam unsur-unsur lain.

Cell padding

Cara menggunakan cellpadding untuk menciptakan lebih banyak ruang putih antara isi sel dan perbatasannya.

Cell spacing

Cara menggunakan cellspacing untuk meningkatkan jarak antara sel.

Atribut bingkai

Cara menggunakan "frame" atribut untuk mengontrol perbatasan di sekitar table.

---

HTML Tabel Tag

Tag	Deskripsi
<table>	Mendefinisikan tabel
<th>	Mendefinisikan sebuah header tabel
<tr>	Mendefinisikan sebuah baris tabel
<td>	Mendefinisikan sebuah kolom tabel
<caption>	Mendefinisikan sebuah judul tabel
<colgroup>	Mendefinisikan kelompok kolom dalam sebuah tabel, untuk memformat
<col />	Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam tabel
<thead>	Groups isi header dalam sebuah tabel
<tbody>	Groups isi tubuh dalam tabel
<tfoot>	Groups isi footer dalam sebuah tabel

Sumber www.w3schools.com