Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Dalam tutorial belajar HTML cara membuat tabel HTML ini kita akan membahas cara penggunaannya.
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag
, tag
, dan tag
:
Tag
digunakan untuk memulai tabel
Tag
adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
Tag
adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:
Contoh penggunaan tag
:
Penggunaan Tag Tabel
Belajar Tag Tabel
Baris 1, Kolom 1
Baris 1, Kolom 2
Baris 1, Kolom 3
Baris 2, Kolom 1
Baris 2, Kolom 2
Baris 2, Kolom 3
Baris 3, Kolom 1
Baris 3, Kolom 2
Baris 3, Kolom 3
Baris 4, Kolom 1
Baris 4, Kolom 2
Baris 4, Kolom 3
Perhatikan bahwa pada tag
kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.
eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.
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.
Attribute lain yang sudah tidak didukung oleh HTML5 tidak dibahas disini.
Global AttributesAtribut Secara Global (Keseluruhan)
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.
Silahkan, lihat referensi mengenai HTML Global Attribute
Event AttributesAtribut event (Peristiwa)
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.
Silahkan, lihat referensi mengenai HTML Events Attribute
ExampleContoh HTML
No.
Nama
Infak
Total
80.000
1.
Rodiah
50.000
2.
Inayah
30.000
2
Contoh 1
Contoh HTML table sederhana yang dibentuk dengan baris (
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.
SOURCE
editor
<html><head><metacharset="utf-8"/><title>Demo HTML table tag - by apacara.comtitle><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>Namatd><td>Tempat Lahirtd>tr><tr><td>1.td><td>Rodiahtd><td>Serangtd>tr>table><br/><h3>Contoh 2:h3><tableclass="table2"><thead><tr><th>No.th><th>Namath><th>Infakth>tr>thead><tfoot><tr><th>th><th>Totalth><th>80.000th>tr>tfoot><tbody><tr><td>1.td><td>Rodiahtd><td>50.000td>tr><tr><td>2.td><td>Inayahtd><td>30.000td>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
Contoh lainnya yang berkaitan, untuk memperkaya materi yang disampaikan dapat dilihat dibawah ini:
Contoh 3
Contoh HTML table element dengan tambahan
, dan
HTML
editor
<tableid="table3"><caption><strong>Juara Lomba Bulu Tangkis Antar Kelas IXstrong><details><summary>Hadiahsummary><p><strong>Juara 1strong> mendapatkan Uang Pembinaan sebesar <strong>Rp. 3.000.000strong>, <strong>Juara 2strong> sebesar <strong>Rp. 2.000.000strong> dan <strong>Juara 3strong> sebesar <strong>Rp. 1.000.000strong>.p>details>caption><thead><tr><th>No.th><th>Kelasth><th>Juarath>tr>thead><tbody><tr><td>1.td><td>Kelas IX Atd><th>Juara 1th>tr><tr><td>2.td><td>Kelas IX Ctd><th>Juara 2th>tr><tr><td>3.td><td>Kelas IX Btd><th>Juara 3th>tr>tbody>table>
<figure><figcaption>Juara Kelas Tahun Ajaran 2015-2016 Kelas VIIIfigcaption><p>Ranking 1-3 masing-masing mendapatkan uang saku sebesar Rp. 500.000.p><tableid="table4"><thead><tr><th>No.th><th>Namath><th>Nilai Rata-Ratath><th>Rankingth>tr>thead><tbody><tr><td>1.td><td>Suntiyemtd><td>9.5td><th>Ranking 1th>tr><tr><td>2.td><td>Markonahtd><td>9.0td><th>Ranking 2th>tr><tr><td>3.td><td>Sarboahtd><td>8.5td><th>Ranking 3th>tr>tbody>table>figure>
Tag untuk Membuat Tabel di HTML
Tag untuk membungkus bagian kepala tabel. Tag untuk membungkus bagian body dari tabel. Tag
(tabel row) untuk membuat baris. Tag
(table data) untuk membuat sel.
Apa itu TR dan TD dalam HTML?
Tag <tr> berfungsi untuk membuat baris pada tabel (table row). Tag <td> digunakan untuk membuat kolom di dalam baris tabel di HTML sehingga akan membentuk sel (table data).
