CSS untuk Tabel

CSS Table: Mengatur Tabel dengan Gaya CSS

Tabel merupakan elemen HTML yang digunakan untuk menampilkan data dalam format baris dan kolom. Dengan CSS, kita bisa mengatur tampilan tabel agar lebih menarik dan mudah dibaca. Berikut ini adalah beberapa teknik yang umum digunakan untuk memperindah tampilan tabel menggunakan CSS.

1. Struktur Dasar Tabel dalam HTML

Sebelum mulai menata tabel, penting untuk memahami struktur dasar tabel dalam HTML. Tabel terdiri dari elemen-elemen utama sebagai berikut:

• <table>: Elemen utama untuk membungkus seluruh tabel.
• <tr> (table row): Elemen untuk setiap baris dalam tabel.
• <th> (table header): Elemen untuk judul kolom.
• <td> (table data): Elemen untuk setiap data sel.

2. Mengatur Gaya Tabel dengan CSS

CSS menyediakan berbagai properti untuk mengatur gaya tabel. Berikut adalah beberapa properti umum yang bisa digunakan untuk menata tabel.

a. Memberi Batas (Border) pada Tabel

Properti border digunakan untuk memberikan garis pada tabel. Anda bisa menerapkan gaya border untuk seluruh tabel atau untuk setiap elemen di dalam tabel seperti th dan td.

b. Mengubah Warna Latar Belakang Header

Kita dapat mengatur warna latar belakang header tabel untuk membedakannya dari baris data.

c. Memberi Efek Hover pada Baris Tabel

Efek hover membantu memperjelas data yang sedang dilihat. Berikut adalah contoh untuk memberi warna berbeda saat mouse berada di atas baris tabel.

d. Membuat Zebra Stripes pada Baris Tabel

Efek zebra stripes dapat meningkatkan keterbacaan dengan membuat warna latar berbeda pada baris genap dan ganjil.

3. Contoh Tabel dengan CSS

Nama	Umur	Jenis Kelamin
Andi	25	Laki-laki
Budi	30	Laki-laki
Citra	28	Perempuan

Kesimpulan

Dengan menggunakan CSS, kita dapat membuat tabel yang lebih menarik dan mudah dibaca. Teknik-teknik dasar seperti border, warna latar belakang, hover, dan zebra stripes membantu membuat tabel lebih estetis dan mudah dianalisis. Pengaturan ini penting terutama jika tabel mengandung banyak data yang membutuhkan tampilan yang jelas dan rapi.