Tutorial ini akan menjelaskan langkah-langkah singkat mengenai cara menciptakan tabel dengan HTML. Anda akan diberi beberapa klarifikasi mengenai kerangka HTML tabel dari yang paling sederhana sampai menuju langkah-langkah modifikasi tampilan.
Lihat Semua Demo
Lihat demo-demo tabelnya terlebih dahulu:
Kerangka Tabel Paling Sederhana
Sebuah tabel sederhana terdiri dari elemen <table> yang diisi dengan beberapa <tr>, dimana setiap <tr> akan berisi beberapa <td>. <table> yaitu table, <tr> yaitu table row dan <td> yaitu table data:
<table> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> </table>Header Tabel
Header tabel terbentuk dari elemen <th> (table header). Secara normal, tampilan teks di dalam header tabel akan secara otomatis bercetak tebal dan tersusun rata tengah:
<table> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> </table>Menambahkan Border
tambahkan atribut border dengan nilai bukan 0 untuk menampilkan border pada tabel:
<table> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> </table>Atribut ini gotong royong tidak begitu penting, alasannya akan lebih efektif kalau kita memakai CSS untuk mengeset border pada tabel.
Caption/Judul Tabel
Tambahkan elemen <caption> sempurna sesudah isyarat <table> sebagai judul tabel:
<table> <caption>Judul Tabel</caption> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> </table>Menggabungkan Sel-Sel Tabel (Merge Cell)
Ada dua atribut yang sanggup Anda gunakan, yaitu colspan untuk menggabungkan kolom tabel dan rowspan untuk menggabungkan baris tabel. Nilai rowspan dan colspan menunjukkan jumlah sel yang ingin disatukan:
<table> <caption>Judul Tabel</caption> <tr><th colspan="2">Header 1</th><th>Header 2</th><th>Header 3</th></tr> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> </table>Catatan: Karena sel tabel mendapat atribut colspan="2", maka dua buah posisi sel akan digabungkan. Jadi, sel di sebelahnya harus dibuang. Ini berlaku juga untuk rowspan, hanya saja penggabungannya secara vertikal:
<table> <caption>Judul Tabel</caption> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> <tr><td rowspan="2">1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> </table>Mengubah Tampilan Tabel dengan CSS
Diutamakan untuk border, CSS akan menciptakan tampilan border pada tabel menjadi lebih baik dan lebih sanggup dikendalikan:
table, th, td { border:1px solid purple; }Namun, alasannya border tabel secara normal tampak terpisah, kita harus mendeklarasikan border-collapse:collapse untuk merapatkan mereka:
table, th, td { border:1px solid purple; border-collapse:collapse; /* untuk menghilangkan jarak antar sel */ }Setelah itu Anda sanggup memilih width, padding, background, font, color dan lain-lain. Beberapa properti CSS menyerupai vertical-align dan text-align juga nantinya akan dibutuhkan:
table { width:100%; /* lebar tabel menjadi sama dengan lebar kontainer */ font:normal normal 13px/1.4 Arial,Sans-Serif; color:#333; border-collapse:collapse; /* untuk menghilangkan jarak antar sel */ } table caption { padding:.4em 0; font-style:italic; font-weight:bold; text-align:left; border-top:2px solid black; } table, th, td { border:1px solid black; } th, td { padding:1em 1.4em; vertical-align:top; /* menciptakan semua konten tabel menjadi rata atas */ text-align:left; /* menciptakan semua teks di dalam tabel menjadi rata kiri */ } th { background-color:#080; color:white; }Markup HTML Standar
Markup HTML tabel standar secara garis besar sanggup disusun menyerupai ini:
<table summary="Tabel ini menjelaskan wacana perkembangan kelangsungan hidup umat insan di tahun 2013"> <caption>Tabel Kelangsungan Hidup Manusia</caption> <thead> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> </thead> <tbody> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr> <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr> <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr> </tbody> </table>Setiap kelompok baris yang mengandung elemen <th> akan dibungkus kembali dengan elemen <thead> sementara kelompok baris yang mengandung elemen <td> akan dibungkus dengan elemen <tbody>
Footer Tabel
Anehnya, footer tabel harus diletakkan di sebelah atas, lebih tepatnya sebelum <tbody>. Tapi jangan khawatir, alasannya hasil kesannya nanti akan tetap tampil di bab paling bawah:
<table> <caption>Judul Tabel</caption> <thead> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> </thead> <tfoot> <tr><td>Total</td><td>XXX</td><td>YYY</td></tr> </tfoot> <tbody> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr> <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr> <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr> </tbody> </table>Berikut ini yaitu salah satu uraian mengenai elemen <tfoot> dari W3:
TFOOTmust appear beforeTBODYwithin aTABLEdefinition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.
Catatan Tambahan
Lawan border-collapse:collapse yaitu border-collapse:separate
Tidak semua tabel harus dilengkapi dengan border. Lebih baik set deklarasi border hanya untuk elemen tabel yang mempunyai atribut border="1":
table[border=1] { border-collapse:collapse; background-color:white; } table[border=1] th, table[border=1] td { border:1px solid black; padding:1em 1.4em; }Dulu Saya pernah sekali mencatat beberapa isyarat CSS untuk HTML tabel. Anda sanggup membacanya di sini. Mungkin itu akan berkhasiat sebagai acuan tambahan.