HTML table tag | belajar <table> element
Referensi Belajar HTML table tag. Tutorial dan panduan mengenai element <table>...</table> yang digunakan untuk membuat tabel atau data tabular. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <table>.
Deskripsi
Penjelasan HTML table
Tabel (Table) adalah sebuah data tabular dalam bentuk grid yang terdiri dari kolom (column), baris (row) dan celll yang merupakan pertemuan antara kolom dan baris.
HTML <table> element merepresentasikan data dengan lebih dari satu dimensi dalam bentuk sebuah tabel (table).
Table di dalam HTML dibentuk dengan sebuah baris (row), tepatnya menggunakan element <tr> yang merupakan kepanjangan dari table row. Adapun element pendukung lain yang membentuk sebuah table adalah <th> (table header) dan <td> (table data). <td> menunjukkan sebuah cell, sedangkan <th> menunjukkan cell induk dan ditandai dengan tulisan cetak tebal.
Element lain yang berkaitan dan digunakan dalam sebuah HTML table adalah <caption>, <col>, <colgroup>, <thead>, <tfoot> dan <tbody>.
HTML table tidak boleh digunakan untuk layout halaman atau tidak tepat digunakan untuk mendesain tata letak beberapa element dalam sebuah tabel.
Attributes
Atribut HTML Tag <table>
Digunakan sebagai antarmuka untuk memberi kemampuan menyortir (memilih-milih) table.
Attribute lain yang sudah tidak didukung oleh HTML5 tidak dibahas disini.
Global Attributes
Atribut Secara Global (Keseluruhan)
<table> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<table> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <table>
Contoh 1
Contoh HTML table sederhana yang dibentuk dengan baris (<tr>) dan cell (<td>).
<table>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Tempat Lahir</td>
</tr>
<tr>
<td>1.</td>
<td>Rodiah</td>
<td>Serang</td>
</tr>
</table>
Contoh 2
Contoh HTML table dengan tambahan element <thead<, <tfoot>, dan <tbody>.
<table class="table2">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Infak</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Total</th>
<th>80.000</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Rodiah</td>
<td>50.000</td>
</tr>
<tr>
<td>2.</td>
<td>Inayah</td>
<td>30.000</td>
</tr>
</tbody>
</table>
Harap diperhatikan: <tfoot> ditulis setelah <thead> (ditengah-tengah), bukannya setelah <tbody> (terakhir). Meskipun demikian, <tfoot> akan terlihat pada baris akhir tabel secara visual.
Untuk mempercantik table, CSS style mungkin diperlukan seperti ini:
/* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
Untuk Contoh 1 dan Contoh 2, dapat diedit dan dilihat hasilnya pada Demo Editor dibawah ini:
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML table tag - by apacara.com</title>
<style>
/* style untuk contoh 2 */
.table2 {
border-collapse: collapse;
width: 100%;
}
.table2 td, .table2 th {
border: thin solid #ccc;
padding: .2em;
}
</style>
</head>
<body>
<h3>Contoh 1:</h3>
<table>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Tempat Lahir</td>
</tr>
<tr>
<td>1.</td>
<td>Rodiah</td>
<td>Serang</td>
</tr>
</table>
<br />
<h3>Contoh 2:</h3>
<table class="table2">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Infak</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Total</th>
<th>80.000</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Rodiah</td>
<td>50.000</td>
</tr>
<tr>
<td>2.</td>
<td>Inayah</td>
<td>30.000</td>
</tr>
</tbody>
</table>
<br/>
<p>Pada Contoh 1, table tidak diberi CSS style apapun, sedangkan Contoh 2 diberi sedikit CSS style sehingga terlihat kotak-kotak seperti tabel pada umumnya.</p>
</body>
</html>
Contoh lainnya yang berkaitan, untuk memperkaya materi yang disampaikan dapat dilihat dibawah ini:
Contoh 3
Contoh HTML table element dengan tambahan <caption>, <detail> dan <summary>
<table id="table3">
<caption>
<strong>Juara Lomba Bulu Tangkis Antar Kelas IX</strong>
<details>
<summary>Hadiah</summary>
<p><strong>Juara 1</strong> mendapatkan Uang Pembinaan sebesar <strong>Rp. 3.000.000</strong>, <strong>Juara 2</strong> sebesar <strong>Rp. 2.000.000</strong> dan <strong>Juara 3</strong> sebesar <strong>Rp. 1.000.000</strong>.</p>
</details>
</caption>
<thead>
<tr>
<th>No.</th>
<th>Kelas</th>
<th>Juara</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Kelas IX A</td>
<th>Juara 1</th>
</tr>
<tr>
<td>2.</td>
<td>Kelas IX C</td>
<th>Juara 2</th>
</tr>
<tr>
<td>3.</td>
<td>Kelas IX B</td>
<th>Juara 3</th>
</tr>
</tbody>
</table>
/* style untuk contoh 3 */
table#table3 {
border-collapse: collapse;
width: 100%;
}
table#table3 td, table#table3 th {
border: thin solid #ccc;
padding: .2em;
}
table#table3 thead tr th:first-child {
width: 40px;
}
Contoh 4
Contoh HTML table yang ditulis di dalam element <figure>
<figure>
<figcaption>Juara Kelas Tahun Ajaran 2015-2016 Kelas VIII</figcaption>
<p>Ranking 1-3 masing-masing mendapatkan uang saku sebesar Rp. 500.000.</p>
<table id="table4">
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Nilai Rata-Rata</th>
<th>Ranking</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Suntiyem</td>
<td>9.5</td>
<th>Ranking 1</th>
</tr>
<tr>
<td>2.</td>
<td>Markonah</td>
<td>9.0</td>
<th>Ranking 2</th>
</tr>
<tr>
<td>3.</td>
<td>Sarboah</td>
<td>8.5</td>
<th>Ranking 3</th>
</tr>
</tbody>
</table>
</figure>
/* style untuk contoh 4 */
table#table4 {
border-collapse: collapse;
width: 100%;
}
table#table4 td, table#table4 th {
border: thin solid #ccc;
padding: .2em;
}
figure figcaption {
text-align: center;
font-weight: bold;
}
Contoh 5
Contoh HTML table dengan colspan dan rowspan attribute di dalam <th> element serta penempatan <caption> yang berada dibawah table menggunakan CSS.
<table id="table5">
<caption>Nilai Ulangan Harian Siswa</caption>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
<th rowspan="2">Jumlah</th>
</tr>
<tr>
<td>Matematika</td>
<td>Biologi</td>
<td>Fisika</td>
</tr>
<tr>
<td>1</td>
<td>Bevi</td>
<td>9</td>
<td>7</td>
<td>8</td>
<th>24</th>
</tr>
<tr>
<td>2</td>
<td>Fika</td>
<td>8</td>
<td>7</td>
<td>8</td>
<th>23</th>
</tr>
</table>
/* style untuk contoh 5 */
table#table5 {
border-collapse: collapse;
}
/* judul (caption) diletakkan dibawah tabel */
table#table5 caption {
caption-side: bottom;
}
table#table5 td, table#table5 th {
border: thin solid #ccc;
padding: .3em 1em;
}
SHARE