{"id":63768,"date":"2026-05-21T08:27:00","date_gmt":"2026-05-21T01:27:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=63768"},"modified":"2026-05-15T16:29:28","modified_gmt":"2026-05-15T09:29:28","slug":"belajar-css-bagian-25","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-25\/","title":{"rendered":"Belajar CSS Bagian 25: Apa Itu CSS Tables beserta Contohnya"},"content":{"rendered":"\n

Pada seri belajar CSS bagian 24<\/a><\/strong>, 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 <\/em>tabel menggunakan CSS agar tampilan data menjadi lebih rapi, menarik, dan mudah dibaca.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Di belajar CSS bagian 25 ini, kita akan mempelajari apa itu CSS Tables, fungsi penggunaannya, hingga beberapa contoh penerapan styling tabel menggunakan CSS.<\/p>\n\n\n\n

Apa Itu CSS Tables?<\/h2>\n\n\n\n

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<\/em>), jarak antar sel (padding <\/em>dan spacing<\/em>), lebar kolom, hingga warna latar belakang.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Poin-poin penggunaan CSS Tables<\/h2>\n\n\n\n

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

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

    Properti yang Sering Diterapkan<\/h2>\n\n\n\n

    Berikut adalah beberapa styling CSS Tables yang paling sering digunakan beserta contoh penerapannya.<\/p>\n\n\n\n

    Border<\/a> (Garis Pembatas)<\/strong>
    Digunakan untuk menambahkan garis pada tabel, baris, dan sel agar terlihat lebih terstruktur. Contoh kode :<\/p>\n\n\n\n

    csstable, th, td {\n  border: 1px solid black;\n}<\/code><\/pre>\n\n\n\n
    Border Collapse (Penggabungan Garis)<\/strong>
    Menggabungkan garis pembatas antar sel agar tidak terjadi garis ganda.<\/p>\n\n\n\n
    csstable {\n  border-collapse: collapse;\n}<\/code><\/pre>\n\n\n\n
    Padding <\/a>(Jarak Dalam Sel)<\/strong>
    Memberikan jarak antara konten dengan tepi sel agar lebih nyaman dibaca.<\/p>\n\n\n\n
    cssth, td {\n  padding: 10px 15px;\n}<\/code><\/pre>\n\n\n\n
    Width dan Height<\/a> (Lebar dan Tinggi)<\/strong>
    Mengatur ukuran tabel, kolom, maupun baris sesuai kebutuhan.<\/p>\n\n\n\n
    csstable {\n  width: 100%;\n}\nth {\n  height: 50px;\n}<\/code><\/pre>\n\n\n\n
    Text Align dan Vertical Align<\/a> (Perataan Teks)<\/strong>
    Mengatur posisi teks di dalam sel, baik secara horizontal maupun vertikal.<\/p>\n\n\n\n
    cssth {\n  text-align: left;\n}\ntd {\n  vertical-align: middle;\n}<\/code><\/pre>\n\n\n\n
    Background Color<\/a> (Warna Latar Belakang)<\/strong>
    Memberikan warna pada header atau baris tertentu untuk membedakan data.<\/p>\n\n\n\n
    cssth {\n  background-color: #4CAF50;\n  color: white;\n}<\/code><\/pre>\n\n\n\n
    Zebra Striping (Warna Baris Selang-Seling)<\/strong>
    Memberikan warna berbeda pada baris genap dan ganjil agar data lebih mudah dibaca. <\/p>\n\n\n\n
    csstr:nth-child(even) {\n  background-color: #f2f2f2;\n}<\/code><\/pre>\n\n\n\n
    Hover Effect (Efek Saat Kursor Diarahkan)<\/strong>
    Menambahkan efek warna saat kursor diarahkan ke baris tabel.<\/p>\n\n\n\n
    csstr:hover {\n  background-color: #ddd;\n}<\/code><\/pre>\n\n\n\n
    Table Layout (Tata Letak Tabel)<\/strong>
    Mengatur lebar kolom agar tetap konsisten meskipun konten berbeda panjangnya.<\/p>\n\n\n\n
    csstable {\n  table-layout: fixed;\n}<\/code><\/pre>\n\n\n\n
    Overflow untuk Responsif<\/strong>
    Membungkus tabel agar dapat di-scroll secara horizontal pada layar kecil.<\/p>\n\n\n\n
    css.table-container {\n  overflow-x: auto;\n}<\/code><\/pre>\n\n\n\n
    Contoh Implementasi<\/h2>\n\n\n\n
    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.<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"id\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Contoh CSS Tables<\/title>\n  <style>\n    .table-container {\n      overflow-x: auto;\n    }\n\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      table-layout: fixed;\n    }\n\n    caption {\n      font-size: 18px;\n      font-weight: bold;\n      margin-bottom: 10px;\n      caption-side: top;\n      text-align: left;\n    }\n\n    th, td {\n      border: 1px solid #ddd;\n      padding: 10px 15px;\n      text-align: left;\n      vertical-align: middle;\n    }\n\n    th {\n      background-color: #4CAF50;\n      color: white;\n    }\n\n    tr:nth-child(even) {\n      background-color: #f2f2f2;\n    }\n\n    tr:hover {\n      background-color: #ddd;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"table-container\">\n    <table>\n      <caption>Data Nilai Siswa<\/caption>\n      <thead>\n        <tr>\n          <th>No<\/th>\n          <th>Nama<\/th>\n          <th>Mata Pelajaran<\/th>\n          <th>Nilai<\/th>\n          <th>Keterangan<\/th>\n        <\/tr>\n      <\/thead>\n      <tbody>\n        <tr>\n          <td>1<\/td>\n          <td>Budi Santoso<\/td>\n          <td>Matematika<\/td>\n          <td>85<\/td>\n          <td>Lulus<\/td>\n        <\/tr>\n        <tr>\n          <td>2<\/td>\n          <td>Siti Rahayu<\/td>\n          <td>Bahasa Indonesia<\/td>\n          <td>90<\/td>\n          <td>Lulus<\/td>\n        <\/tr>\n        <tr>\n          <td>3<\/td>\n          <td>Andi Wijaya<\/td>\n          <td>IPA<\/td>\n          <td>75<\/td>\n          <td>Lulus<\/td>\n        <\/tr>\n        <tr>\n          <td>4<\/td>\n          <td>Dewi Kusuma<\/td>\n          <td>IPS<\/td>\n          <td>60<\/td>\n          <td>Tidak Lulus<\/td>\n        <\/tr>\n        <tr>\n          <td>5<\/td>\n          <td>Riko Pratama<\/td>\n          <td>Bahasa Inggris<\/td>\n          <td>88<\/td>\n          <td>Lulus<\/td>\n        <\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Dan ketika di akses dengan browser, tampilannya akan lebih menarik dan rapi. Berikut contohnya:<\/p>\n\n\n\n\n\n\n  \n  \n  Contoh CSS Tables<\/title>\n  <style>\n    .table-container {\n      overflow-x: auto;\n    }\n\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      table-layout: fixed;\n    }\n\n    caption {\n      font-size: 18px;\n      font-weight: bold;\n      margin-bottom: 10px;\n      caption-side: top;\n      text-align: left;\n    }\n\n    th, td {\n      border: 1px solid #ddd;\n      padding: 10px 15px;\n      text-align: left;\n      vertical-align: middle;\n    }\n\n    th {\n      background-color: #4CAF50;\n      color: white;\n    }\n\n    tr:nth-child(even) {\n      background-color: #f2f2f2;\n    }\n\n    tr:hover {\n      background-color: #ddd;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"table-container\">\n    <table>\n      <caption>Data Nilai Siswa<\/caption>\n      <thead>\n        <tr>\n          <th>No<\/th>\n          <th>Nama<\/th>\n          <th>Mata Pelajaran<\/th>\n          <th>Nilai<\/th>\n          <th>Keterangan<\/th>\n        <\/tr>\n      <\/thead>\n      <tbody>\n        <tr>\n          <td>1<\/td>\n          <td>Budi Santoso<\/td>\n          <td>Matematika<\/td>\n          <td>85<\/td>\n          <td>Lulus<\/td>\n        <\/tr>\n        <tr>\n          <td>2<\/td>\n          <td>Siti Rahayu<\/td>\n          <td>Bahasa Indonesia<\/td>\n          <td>90<\/td>\n          <td>Lulus<\/td>\n        <\/tr>\n        <tr>\n          <td>3<\/td>\n          <td>Andi Wijaya<\/td>\n          <td>IPA<\/td>\n          <td>75<\/td>\n          <td>Lulus<\/td>\n        <\/tr>\n        <tr>\n          <td>4<\/td>\n          <td>Dewi Kusuma<\/td>\n          <td>IPS<\/td>\n          <td>60<\/td>\n          <td>Tidak Lulus<\/td>\n        <\/tr>\n        <tr>\n          <td>5<\/td>\n          <td>Riko Pratama<\/td>\n          <td>Bahasa Inggris<\/td>\n          <td>88<\/td>\n          <td>Lulus<\/td>\n        <\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>BACA JUGA: <a href=\"https:\/\/blog.rumahweb.com\/cara-membuat-situs-web\/\" target=\"_blank\" rel=\"noopener\" title=\"\">10 Rekomendasi Blog untuk Belajar Cara Membuat Situs Web<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<p>Berikut adalah beberapa pertanyaan popular tentang apa itu CSS Tables.<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" style=\"font-style:normal;font-weight:700\"><summary>Apa itu CSS Tables?<\/summary>\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p style=\"font-style:normal;font-weight:400\">CSS Tables adalah teknik penggunaan CSS untuk mengatur tampilan tabel HTML agar terlihat lebih rapi, menarik, dan mudah dibaca pada halaman website.<\/p>\n<\/details>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" style=\"font-style:normal;font-weight:700\"><summary>Apa fungsi CSS Tables?<\/summary>\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p style=\"font-style:normal;font-weight:400\">CSS Tables berfungsi untuk mempercantik tampilan tabel HTML, seperti mengatur border, warna, jarak antar sel, alignment, hingga membuat tabel lebih responsif.<\/p>\n<\/details>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" style=\"font-style:normal;font-weight:700\"><summary>Apakah CSS Tables hanya digunakan untuk tabel data?<\/summary>\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p style=\"font-style:normal;font-weight:400\">Tidak. Selain untuk tabel data, konsep CSS Tables juga kadang digunakan untuk membantu pengaturan layout tertentu, meskipun saat ini layout modern lebih banyak menggunakan Flexbox atau Grid.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/details>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" style=\"font-style:normal;font-weight:700\"><summary>Properti CSS apa saja yang sering digunakan pada tabel?<\/summary>\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p style=\"font-style:normal;font-weight:400\">Beberapa properti yang umum digunakan pada CSS Tables antara lain border, border-collapse, padding, text-align, background-color, dan width.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/details>\n\n\n\n<p><\/p>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Apa itu CSS Tables?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"CSS Tables adalah teknik penggunaan CSS untuk mengatur tampilan tabel HTML agar terlihat lebih rapi, menarik, dan mudah dibaca pada halaman website.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Apa fungsi CSS Tables?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"CSS Tables berfungsi untuk mempercantik tampilan tabel HTML, seperti mengatur border, warna, jarak antar sel, alignment, hingga membuat tabel lebih responsif.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Apakah CSS Tables hanya digunakan untuk tabel data?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Tidak. Selain untuk tabel data, konsep CSS Tables juga kadang digunakan untuk membantu pengaturan layout tertentu, meskipun saat ini layout modern lebih banyak menggunakan Flexbox atau Grid.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Properti CSS apa saja yang sering digunakan pada tabel?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Beberapa properti yang umum digunakan pada CSS Tables antara lain border, border-collapse, padding, text-align, background-color, dan width.\"\n      }\n    }\n  ]\n}\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 […]<\/p>\n","protected":false},"author":353,"featured_media":64492,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[1752,1751,2186],"class_list":{"0":"post-63768","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/63768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=63768"}],"version-history":[{"count":5,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/63768\/revisions"}],"predecessor-version":[{"id":64498,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/63768\/revisions\/64498"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/64492"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=63768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=63768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=63768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}