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.


Dimas Ahmad Rizal

Hi! I'm Dimas Ahmad, a Software Engineer with more than 7+ years of experience. I have successfully completed more than 200+ projects using the latest technologies such as Laravel, ExpressJs, NextJs, and NuxtJs, I am ready to collaborate with you!