Tabel adalah salah satu elemen paling penting dalam desain web untuk menyajikan data secara terstruktur, seperti nilai siswa, daftar produk, atau laporan keuangan. Dalam artikel ini, Anda akan belajar cara membuat tabel menggunakan HTML dan mempercantiknya dengan CSS.
1. Apa Itu Tabel dalam HTML?
Tabel adalah struktur yang digunakan untuk menyusun data dalam format baris dan kolom. Dalam HTML, tabel dibuat menggunakan tag seperti:
- `<table>`: Membuat tabel.
- `<tr>`: Membuat baris.
- `<th>`: Membuat sel header.
- `<td>`: Membuat sel data.
Setiap tabel terdiri dari baris (`<tr>`), dan setiap baris memiliki sel data (`<td>`) atau sel header (`<th>`). Dengan elemen-elemen ini, kita dapat menyusun tabel yang rapi dan informatif.
2. Membuat Tabel Sederhana dengan HTML
Berikut adalah contoh tabel nilai siswa sederhana yang dibuat dengan HTML:
Tabel default yang dibuat dengan HTML biasanya terlihat sederhana. Untuk mempercantik tabel, kita dapat menggunakan CSS. Berikut adalah contoh kode CSS untuk menambahkan gaya pada tabel:
Penjelasan Kode CSS:
1. `body`: Mengatur tampilan dasar halaman, seperti jenis
huruf dan warna latar belakang.
2. `h2`: Membuat judul terlihat lebih menarik dengan warna hitam dan rata tengah.
3. `table`:
- Memberikan lebar 80% dari halaman.
- Menambahkan bayangan lembut di sekitar tabel.
4. `th` dan `td`:
- Memberikan padding agar konten tidak menempel dengan border.
- Membuat teks rata tengah.
- Menambahkan warna latar belakang pada header.
5. `tr:nth-child(even)`: Memberikan warna latar berbeda
untuk baris genap agar tabel lebih mudah dibaca.
6. `tr:hover`: Memberikan efek hover pada baris untuk interaktivitas.
4. Hasil Akhir
Setelah menggabungkan kode HTML dan CSS di atas, tabel akan terlihat seperti ini:
Komentar
Posting Komentar