Penataan Tabel HTML
Gunakan CSS untuk membuat tabel Anda terlihat lebih baik.
Tabel HTML - Garis Zebra
Jika Anda menambahkan warna latar belakang pada setiap baris tabel lainnya, Anda akan mendapatkan efek garis zebra yang bagus.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Untuk menata setiap elemen baris tabel lainnya, gunakan :nth-child(even)
pemilih seperti ini:
Contoh
tr:nth-child(even) {
background-color: #D6EEEE;
}
Catatan: Jika Anda menggunakan (odd)alih-alih
(even), penataan gaya akan muncul pada baris 1,3,5 dst. alih-alih 2,4,6 dst.
Tabel HTML - Garis Zebra Vertikal
Untuk membuat garis-garis zebra vertikal, beri gaya pada setiap kolom lainnya , alih-alih setiap baris lainnya .
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Setel :nth-child(even)untuk elemen data tabel seperti ini:
Contoh
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Catatan: Letakkan :nth-child()pemilih pada keduanya thdan td
elemen jika Anda ingin memiliki gaya pada header dan sel tabel biasa.
Kombinasikan Garis Zebra Vertikal dan Horizontal
Anda dapat menggabungkan gaya dari dua contoh di atas dan Anda akan memiliki garis-garis pada setiap baris dan kolom lainnya.
Jika Anda menggunakan warna transparan Anda akan mendapatkan efek tumpang tindih.
Gunakan rgba()warna untuk menentukan transparansi warna:
Contoh
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
Pembagi Horisontal
| Nama depan | Nama keluarga | Tabungan |
|---|---|---|
| Petrus | Grifon | $100 |
| lois | Grifon | $150 |
| joe | angsa | $300 |
Jika Anda menentukan batas hanya di bagian bawah setiap baris tabel, Anda akan memiliki tabel dengan pembagi horizontal.
Tambahkan border-bottomproperti ke semua
trelemen untuk mendapatkan pembagi horizontal:
Contoh
tr {
border-bottom: 1px solid #ddd;
}
Meja yang Dapat Dilayangkan
Gunakan :hoverpemilih aktif
truntuk menyorot baris tabel dengan mouse:
| Nama depan | Nama keluarga | Tabungan |
|---|---|---|
| Petrus | Grifon | $100 |
| lois | Grifon | $150 |
| joe | angsa | $300 |
Contoh
tr:hover {background-color: #D6EEEE;}