Belajar CSS Bagian 25: Apa Itu CSS Tables beserta Contohnya

Pada seri belajar CSS bagian 24, kita telah mempelajari tentang CSS List dan cara mengatur tampilan daftar pada halaman website. Selanjutnya, pada bagian ini kita akan membahas CSS Tables, yaitu teknik styling tabel menggunakan CSS agar tampilan data menjadi lebih rapi, menarik, dan mudah dibaca.

CSS Tables sendiri sering digunakan untuk mengatur tampilan tabel seperti data produk, laporan, jadwal, hingga informasi tabular lainnya pada website. Dengan CSS, tabel tidak hanya terlihat lebih modern, tetapi juga dapat dibuat lebih responsif dan nyaman dilihat oleh pengguna.

Di belajar CSS bagian 25 ini, kita akan mempelajari apa itu CSS Tables, fungsi penggunaannya, hingga beberapa contoh penerapan styling tabel menggunakan CSS.

Apa Itu CSS Tables?

CSS Tables adalah sekumpulan properti CSS yang digunakan untuk mengatur tampilan elemen tabel pada halaman web. Properti-properti ini memungkinkan pengembang untuk mengubah berbagai aspek visual tabel HTML, seperti garis pembatas (border), jarak antar sel (padding dan spacing), lebar kolom, hingga warna latar belakang.

Dengan kata lain, CSS Tables berfungsi sebagai alat untuk memperindah dan merapikan tampilan tabel yang secara bawaan terlihat sederhana, sehingga data yang ditampilkan menjadi lebih mudah dibaca dan lebih menarik bagi pengguna.

Poin-poin penggunaan CSS Tables

Dalam menggunakan CSS Tables, terdapat beberapa hal penting yang perlu diperhatikan agar tabel yang dibuat tampil optimal. Berikut poin point penting penggunaan css tables:

1. Struktur HTML Tabel Harus Benar
   Pastikan tabel memiliki struktur HTML yang tepat, yaitu menggunakan tag <table>, <tr>, <th>, dan <td> secara benar sebelum menerapkan CSS.
2. Gunakan border-collapse
   Properti border-collapse digunakan untuk menentukan apakah garis pembatas antar sel digabungkan (collapse) atau dipisahkan (separate). Properti ini penting untuk menjaga tampilan tabel tetap rapi.
3. Atur Jarak dengan padding
   Tambahkan padding pada elemen <th> dan <td> agar konten di dalam sel tidak terlalu rapat dengan garis pembatas, sehingga tabel lebih mudah dibaca.
4. Perhatikan Lebar Tabel dengan width
   Tentukan lebar tabel sesuai kebutuhan, baik menggunakan nilai tetap (px) maupun persentase (%) agar tabel dapat menyesuaikan ukuran layar dengan baik.
5. Gunakan table-layout untuk Konsistensi Kolom
   Properti table-layout: fixed membantu membuat lebar kolom lebih konsisten dan tidak berubah-ubah mengikuti panjang konten di dalamnya.
6. Tambahkan Warna untuk Keterbacaan
   Gunakan properti background-color dan color untuk membedakan baris header, baris genap, dan baris ganjil agar data lebih mudah dibaca.
7. Pastikan Tabel Responsif
   Tambahkan overflow-x: auto pada elemen pembungkus tabel agar tabel dapat di-scroll secara horizontal pada layar kecil seperti perangkat mobile.

Properti yang Sering Diterapkan

Berikut adalah beberapa styling CSS Tables yang paling sering digunakan beserta contoh penerapannya.

Border (Garis Pembatas)
Digunakan untuk menambahkan garis pada tabel, baris, dan sel agar terlihat lebih terstruktur. Contoh kode :

csstable, th, td {
  border: 1px solid black;
}

Border Collapse (Penggabungan Garis)
Menggabungkan garis pembatas antar sel agar tidak terjadi garis ganda.

csstable {
  border-collapse: collapse;
}

Padding (Jarak Dalam Sel)
Memberikan jarak antara konten dengan tepi sel agar lebih nyaman dibaca.

cssth, td {
  padding: 10px 15px;
}

Width dan Height (Lebar dan Tinggi)
Mengatur ukuran tabel, kolom, maupun baris sesuai kebutuhan.

csstable {
  width: 100%;
}
th {
  height: 50px;
}

Text Align dan Vertical Align (Perataan Teks)
Mengatur posisi teks di dalam sel, baik secara horizontal maupun vertikal.

cssth {
  text-align: left;
}
td {
  vertical-align: middle;
}

Background Color (Warna Latar Belakang)
Memberikan warna pada header atau baris tertentu untuk membedakan data.

cssth {
  background-color: #4CAF50;
  color: white;
}

Zebra Striping (Warna Baris Selang-Seling)
Memberikan warna berbeda pada baris genap dan ganjil agar data lebih mudah dibaca.

csstr:nth-child(even) {
  background-color: #f2f2f2;
}

Hover Effect (Efek Saat Kursor Diarahkan)
Menambahkan efek warna saat kursor diarahkan ke baris tabel.

csstr:hover {
  background-color: #ddd;
}

Table Layout (Tata Letak Tabel)
Mengatur lebar kolom agar tetap konsisten meskipun konten berbeda panjangnya.

csstable {
  table-layout: fixed;
}

Overflow untuk Responsif
Membungkus tabel agar dapat di-scroll secara horizontal pada layar kecil.

css.table-container {
  overflow-x: auto;
}

Contoh Implementasi

Berikut adalah salah satu contoh kode yang mencakup beberapa styling yang telah dibahas sebelumnya, yaitu border-collapse, padding, background-color pada header, zebra striping pada baris genap, serta overflow-x: auto untuk memastikan tabel tetap responsif di berbagai ukuran layar.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh CSS Tables</title>
  <style>
    .table-container {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    caption {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      caption-side: top;
      text-align: left;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 10px 15px;
      text-align: left;
      vertical-align: middle;
    }

    th {
      background-color: #4CAF50;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    tr:hover {
      background-color: #ddd;
    }
  </style>
</head>
<body>

  <div class="table-container">
    <table>
      <caption>Data Nilai Siswa</caption>
      <thead>
        <tr>
          <th>No</th>
          <th>Nama</th>
          <th>Mata Pelajaran</th>
          <th>Nilai</th>
          <th>Keterangan</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Budi Santoso</td>
          <td>Matematika</td>
          <td>85</td>
          <td>Lulus</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Siti Rahayu</td>
          <td>Bahasa Indonesia</td>
          <td>90</td>
          <td>Lulus</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Andi Wijaya</td>
          <td>IPA</td>
          <td>75</td>
          <td>Lulus</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Dewi Kusuma</td>
          <td>IPS</td>
          <td>60</td>
          <td>Tidak Lulus</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Riko Pratama</td>
          <td>Bahasa Inggris</td>
          <td>88</td>
          <td>Lulus</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>

Dan ketika di akses dengan browser, tampilannya akan lebih menarik dan rapi. Berikut contohnya:

BACA JUGA: 10 Rekomendasi Blog untuk Belajar Cara Membuat Situs Web

FAQ

Berikut adalah beberapa pertanyaan popular tentang apa itu CSS Tables.

Kesimpulan

CSS Tables merupakan salah satu teknik penting dalam pengembangan web untuk mengatur tampilan tabel HTML agar terlihat lebih rapi dan nyaman dibaca. Dengan memahami penggunaan CSS Tables, Anda dapat mengubah tampilan tabel yang sederhana menjadi lebih profesional, responsif, dan sesuai dengan desain website yang dibuat.

Melalui materi Belajar CSS ini, Anda juga dapat memahami apa itu CSS Tables beserta contoh penerapannya dalam berbagai kebutuhan tampilan data pada website. Dengan penerapan yang tepat, tabel tidak hanya berfungsi sebagai penyaji data, tetapi juga membantu meningkatkan pengalaman pengguna saat mengakses halaman web.

Demikian artikel kami tentang belajar CSS bagian 25 tentang CSS Tables. Ikuti terus kelas belajar CSS selanjutnya di Rumahweb Indonesia, agar kemampuan CSS Anda semakin meningkat. Selamat belajar.