Tabel dalam HTML digunakan untuk menampilkan data dalam bentuk baris dan kolom, mirip dengan spreadsheet. Struktur dasar tabel di HTML menggunakan elemen-elemen seperti <table>, <tr>, <td>, dan <th>.
Berikut adalah langkah-langkah dan elemen-elemen utama yang digunakan untuk membuat tabel di HTML.
Cara Membuat Tabel di HTML
1. Struktur Dasar Tabel HTML
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table><table>: Elemen utama untuk membuat tabel.<tr>: Mendefinisikan baris dalam tabel.<th>: Mendefinisikan sel header dalam tabel (biasanya tebal dan terpusat).<td>: Mendefinisikan sel data biasa dalam tabel.
2. Contoh Tabel Sederhana
Contoh di bawah ini menunjukkan tabel dengan dua kolom dan dua baris:
<table border="1">
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
</tr>
</table>Tabel di atas akan menampilkan dua kolom, yaitu “Nama” dan “Usia”, serta dua baris data (“Andi, 25” dan “Budi, 30”).
3. Menambahkan Atribut pada Tabel
Beberapa atribut yang sering digunakan dalam tabel HTML:
border: Menambahkan garis batas (border) pada tabel.cellpadding: Memberikan jarak di dalam sel tabel.cellspacing: Memberikan jarak antar sel tabel.widthdanheight: Menentukan ukuran tabel.align: Menentukan posisi tabel (kiri, tengah, atau kanan).
Contoh tabel dengan atribut:
<table border="1" cellpadding="5" cellspacing="0" width="50%">
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
</tr>
</table>4. Tabel dengan Penggabungan Kolom dan Baris
Untuk membuat tabel yang lebih kompleks, Anda dapat menggabungkan kolom atau baris menggunakan atribut colspan dan rowspan.
Contoh Penggunaan colspan:
<table border="1">
<tr>
<th colspan="2">Data Karyawan</th>
</tr>
<tr>
<td>Nama</td>
<td>Usia</td>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
</tr>
</table>5. Styling Tabel dengan CSS
Anda bisa menambahkan CSS untuk mempercantik tabel. Contohnya:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-align: left;
}
</style>
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
</tr>
</table>
Dengan mengikuti langkah-langkah di atas, kita dapat membuat tabel yang rapi dan informatif di HTML. Gunakan atribut serta CSS untuk menyesuaikan tampilan tabel sesuai kebutuhan kita.
Berikut adalah contoh kode HTML lengkap untuk membuat tabel sederhana dengan styling dasar menggunakan CSS:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Tabel di HTML</title>
<style>
/* CSS untuk styling tabel */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<h1>Data Karyawan</h1>
<p>Berikut adalah contoh tabel yang menampilkan data karyawan dalam format HTML.</p>
<!-- Tabel HTML -->
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Jabatan</th>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
<td>Marketing</td>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
<td>IT Support</td>
</tr>
<tr>
<td>Citra</td>
<td>28</td>
<td>HRD</td>
</tr>
<tr>
<td>Dina</td>
<td>32</td>
<td>Finance</td>
</tr>
</table>
</body>
</html>