Kalau lo sering ngoding HTML, pasti nggak asing lagi sama yang namanya HTML tables. Tabel ini berguna banget buat nampilin data dengan rapi dan terstruktur di website. Nah, di artikel ini, kita bakal bahas dari dasar sampai mahir soal HTML tables. Yuk, langsung aja kita mulai!
1. Apa Itu HTML Table?
HTML Table adalah elemen dalam HTML yang digunakan buat menampilkan data dalam bentuk tabel, terdiri dari baris (rows) dan kolom (cells). Dengan tabel, lo bisa bikin tampilan data lebih rapih dan mudah dibaca.
Format dasarnya pake tag <table> di HTML. Berikut contoh sederhana sebuah tabel:
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Budi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Ani</td>
<td>23</td>
<td>Bandung</td>
</tr>
</table>
Hasilnya bakal keliatan kayak gini:
2. Struktur Dasar HTML Table
Sebuah tabel HTML biasanya terdiri dari beberapa elemen utama:
<table>→ Elemen utama yang membungkus tabel.<tr>(Table Row) → Baris dalam tabel.<th>(Table Header) → Judul kolom, biasanya ditampilkan tebal.<td>(Table Data) → Isi dari tiap sel dalam tabel.
Nah, biar makin paham, kita bahas satu per satu!
3. Table Cells (Sel Tabel)
Sel tabel adalah bagian terkecil dari tabel, yang ditandai dengan tag <td> buat data dan <th> buat header.
Contoh sederhana:
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Rudi</td>
<td>30</td>
</tr>
</table>
Hasilnya:
4. Table Rows (Baris Tabel)
Baris tabel dibuat dengan tag <tr>. Setiap <tr> bisa berisi satu atau lebih <td> atau <th>.
Misalnya, kita mau bikin tabel yang punya tiga baris data:
<table border="1">
<tr>
<th>Produk</th>
<th>Harga</th>
</tr>
<tr>
<td>Laptop</td>
<td>Rp 10.000.000</td>
</tr>
<tr>
<td>HP</td>
<td>Rp 3.000.000</td>
</tr>
</table>
Hasilnya:
Makin paham, kan?
5. Mengatur Tabel dengan Rowspan dan Colspan
Kadang kita butuh ngatur sel supaya bisa gabung secara vertikal atau horizontal. Nah, di sinilah rowspan dan colspan berperan.
- Rowspan → Gabungin beberapa baris.
- Colspan → Gabungin beberapa kolom.
Contoh colspan (menggabungkan kolom):
<table border="1">
<tr>
<th colspan="2">Informasi</th>
</tr>
<tr>
<td>Nama</td>
<td>Dian</td>
</tr>
</table>
Hasilnya:
Contoh rowspan (menggabungkan baris):
<table border="1">
<tr>
<th rowspan="2">No</th>
<th>Nama</th>
</tr>
<tr>
<td>Andi</td>
</tr>
</table>
Hasilnya:
6. Styling HTML Table dengan CSS
Biar tabel lo keliatan lebih kece, lo bisa kasih styling dengan CSS.
Contoh CSS buat ngasih warna dan padding di tabel:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Budi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Ani</td>
<td>23</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
Tabel setelah dikasih styling bakal keliatan lebih profesional!, seperti ini:
Kesimpulan
- HTML Table berguna buat nampilin data secara terstruktur di website.
- Table Cells (
<td>dan<th>) adalah elemen dasar yang membentuk tabel. - Table Rows (
<tr>) berfungsi buat bikin baris dalam tabel. - Rowspan & Colspan berguna buat gabungin sel biar tabel lebih fleksibel.
- CSS bisa bikin tabel lo lebih keren dan profesional.
Sekarang, lo udah paham cara bikin dan ngatur tabel di HTML! Jangan lupa buat latihan biar makin jago. Kalau ada pertanyaan, tulis di kolom komentar ya!
Komentar