Tutorial Belajar CSS Part 14 - Menggabungkan CSS dan HTML untuk Membuat Tabel yang Rapi
Tutorial Belajar CSS Part 14: Menggabungkan CSS dan HTML untuk Membuat Tabel yang Rapi
Membuat tabel yang rapi dan terstruktur dengan CSS dan HTML adalah penting dalam menyajikan data secara informatif dan menarik. Dalam tutorial ini, kita akan membahas cara menggunakan CSS untuk merapikan dan mempercantik tampilan tabel HTML.
1. Mendefinisikan Struktur Tabel
Menentukan Kelas Tabel pada HTML
<table class="styled-table">
<thead>
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>john@example.com</td>
</tr>
<!-- More rows -->
</tbody>
</table>
2. Menerapkan Gaya CSS untuk Tabel
Mengatur Gaya Tabel
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
}
.styled-table th,
.styled-table td {
border: 1px solid #dddddd;
padding: 8px;
}
.styled-table th {
background-color: #f2f2f2;
}
.styled-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.styled-table tr:hover {
background-color: #f5f5f5;
}
3. Mempercantik Tampilan Tabel
Menambahkan Efek Hover
.styled-table tr:hover {
background-color: #e0e0e0;
cursor: pointer;
}
4. Responsif terhadap Ukuran Layar
Mengatur Responsif terhadap Ukuran Layar
@media screen and (max-width: 600px) {
.styled-table {
font-size: 0.8em;
}
.styled-table th,
.styled-table td {
padding: 6px;
}
}
Keuntungan Menggabungkan CSS dan HTML untuk Tabel
- Penampilan yang Menarik: Membuat tabel lebih menarik dan mudah dibaca.
- Pengaturan yang Rapi: Menyajikan data secara terstruktur dan informatif.
- Responsif: Membuat tabel menyesuaikan diri dengan berbagai ukuran layar.
Kesimpulan
Menggabungkan CSS dan HTML untuk membuat tabel yang rapi adalah kunci untuk menyajikan data secara terstruktur dan menarik. Dengan menggunakan CSS untuk mengatur tampilan, warna, dan responsivitas, Anda dapat membuat tabel lebih informatif dan mudah dibaca. Pengetahuan tentang penggunaan CSS untuk mempercantik tampilan tabel akan memperbaiki presentasi data dan meningkatkan pengalaman pengguna.