Tabel dalam HTML digunakan untuk menampilkan data dalam bentuk baris dan kolom. Elemen ini sangat berguna untuk menyusun informasi agar lebih rapi dan mudah dibaca. Artikel ini akan membahas tabel di HTML, meliputi penjelasan dasar, cara membuat tabel, hingga contoh penggunaannya dalam proyek web.
Struktur Dasar Tabel HTML
Untuk membuat tabel sederhana di HTML, kita menggunakan beberapa tag utama:
<table>: mendefinisikan tabel<tr>: mendefinisikan baris (table row)<th>: mendefinisikan judul kolom (table header)<td>: mendefinisikan sel data (table data)
<table border="1">
<tr>
<th>Nama</th>
<th>Jurusan</th>
<th>Angkatan</th>
</tr>
<tr>
<td>Andi</td>
<td>Informatika</td>
<td>2022</td>
</tr>
<tr>
<td>Budi</td>
<td>Sistem Informasi</td>
<td>2021</td>
</tr>
</table>
Menambahkan Border & Style pada Tabel
Agar tabel terlihat lebih menarik, kita bisa menambahkan CSS:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
Dengan kode di atas, tabel akan lebih rapi dan mudah dibaca. Kamu bisa menambahkan warna, ukuran font, hingga hover effect untuk mempercantik tampilan.
Contoh Lengkap Tabel di HTML
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tabel HTML</title>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
}
th, td {
border: 1px solid #444;
padding: 10px;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2 align="center">Contoh Tabel Mahasiswa</h2>
<table>
<tr>
<th>Nama</th>
<th>Jurusan</th>
<th>Semester</th>
</tr>
<tr>
<td>Andi</td>
<td>Informatika</td>
<td>4</td>
</tr>
<tr>
<td>Citra</td>
<td>Sistem Informasi</td>
<td>6</td>
</tr>
</table>
</body>
</html>
Backlink Internal
Jika kamu sedang belajar HTML, jangan lupa juga membaca artikel berikut:
- Cara Menambahkan Background HTML
- Contoh Soal Pilihan Ganda Pemrograman Web PHP
- Contoh Program C Biodata Mahasiswa
Kesimpulan
Tabel di HTML digunakan untuk menampilkan data secara terstruktur. Dengan menguasai cara membuat tabel dasar, menambahkan border, dan menggunakan CSS, kamu dapat membuat tampilan data lebih profesional. Untuk pemula, latihan membuat tabel sederhana adalah langkah awal penting sebelum melangkah ke desain web yang lebih kompleks.