Tutorial Belajar CSS Part 14 - Menggabungkan CSS dan HTML untuk Membuat Tabel yang Rapi

• 10/16/2023
• Dimas Ahmad Rizal
• 163

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.