Cara Membuat Table di HTML
TlawXp - Tabel adalah elemen HTML yang digunakan untuk menampilkan data dalam bentuk baris dan kolom. Tabel sering digunakan untuk menampilkan informasi yang terstruktur, seperti data angka, daftar, atau informasi lainnya. Di bawah ini, saya akan menunjukkan cara membuat tabel HTML sederhana dan menjelaskan setiap bagiannya.
Struktur Dasar Tabel HTML
Tabel dibuat menggunakan elemen <table>, dengan elemen-elemen seperti <tr> (table row/baris), <th> (table header/header kolom), dan <td> (table data/data sel). Berikut adalah contoh dasar tabel HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Tabel HTML</title>
<style>
table {
width: 100%;
border-collapse: collapse; /* Menghapus jarak antar sel */
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Contoh Tabel HTML</h2>
<table>
<tr>
<th>No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Citra</td>
<td>28</td>
</tr>
</table>
</body>
</html>Tampilan :
Gambar 1 : Table
Penjelasan Kode:
- <table>: Elemen utama untuk tabel.
- <tr> (Table Row): Elemen ini digunakan untuk membuat baris di dalam tabel.
- <th> (Table Header): Digunakan untuk membuat header kolom. Secara default, teks dalam elemen <th> dicetak tebal dan disejajarkan di tengah.
- <td> (Table Data): Digunakan untuk menampilkan data sel dalam tabel.
- CSS:
- border-collapse: collapse; digunakan untuk menghapus jarak antara border sel.
- th, td { border: 1px solid #dddddd; padding: 8px; } menambahkan border, padding, dan gaya lainnya untuk tabel agar lebih rapi.
- th { background-color: #f2f2f2; } memberikan warna latar belakang pada header kolom.
Menambahkan Kolspan dan Rowspan
colspan dan rowspan adalah atribut yang digunakan untuk menggabungkan beberapa kolom atau baris menjadi satu sel besar.
Contoh dengan colspan
<table>
<tr>
<th colspan="3">Judul Tabel</th>
</tr>
<tr>
<th>No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>25</td>
</tr>
</table>Tampilan :
Gambar 2 : Table
Penjelasan: Pada contoh di atas, header pertama pada baris pertama (Judul Tabel) menggunakan colspan="3", yang berarti sel tersebut mencakup 3 kolom.
Contoh dengan rowspan
<table>
<tr>
<th rowspan="2">No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
</tr>
</table>Tampilan :
Gambar 3 : Table
Penjelasan: Pada contoh ini, elemen No menggunakan rowspan="2", yang berarti sel tersebut mencakup 2 baris.
Menambahkan Tabel di dalam Tabel (Nested Table)
Anda juga dapat membuat tabel di dalam tabel untuk menampilkan data yang lebih kompleks.
<table>
<tr>
<th rowspan="2">No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
</tr>
</table>Tampilan :
Kesimpulan
Dengan HTML, Anda dapat membuat tabel untuk menyusun data dengan rapi dan mudah dibaca. Dengan menambahkan CSS, Anda bisa mempercantik tampilan tabel agar terlihat lebih menarik dan profesional. Tabel dapat digunakan untuk berbagai kebutuhan, seperti data statistik, laporan, atau daftar harga produk di situs web Anda. Selamat mencoba membuat tabel dan eksplorasi lebih lanjut!
Posting Komentar