Terjemahan ke Bahasa Indonesia

Selamat datang, para pengembang web yang bersemangat! Hari ini, kita akan melihat dunia CSS tabel. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda dalam perjalanan ini. Tabel mungkin terlihat seperti hal yang usang, tapi percayalah, mereka tetap sangat berguna dalam desain web modern. mari kita roll up our sleeves dan memulai!

CSS Tables - Border Collapse

Imaginilah Anda membangun pagar di sekitar halaman Anda. Anda ingin tiang pagar bersentuhan satu sama lain, kan? Itu persis apa yang border-collapse lakukan untuk batas tabel. Itu menentukan apakah batas sel应该 dipisahkan atau runtuh menjadi batas tunggal.

table {
  border-collapse: collapse;
}

Kode ini akan membuat batas tabel Anda bersentuhan satu sama lain, menciptakan penampilan yang bersih dan terpadu. Itu seperti memberikan tabel Anda potongan rambut yang rapi!

CSS Tables - Border Spacing

Apa jika Anda ingin ada ruang antara sel tabel Anda? Itu di mana border-spacing berguna. Itu seperti jarak sosial untuk sel tabel Anda!

table {
  border-spacing: 5px;
}

Ini akan menambahkan jarak 5-piksel antara sel Anda. Anda bahkan bisa menetapkan jarak horizontal dan vertikal yang berbeda:

table {
  border-spacing: 5px 10px;
}

Di sini, kita memiliki 5 piksel jarak horizontal dan 10 piksel jarak vertikal. Itu seperti memberikan sel tabel Anda ruang pribadi!

CSS Tables - Caption Side

Tabel dapat memiliki keterangan, dan Anda dapat mengontrol di mana keterangan ini muncul menggunakan caption-side. Itu seperti memutuskan untuk menempatkan judul buku di bagian atas atau bawah sampul.

caption {
  caption-side: bottom;
}

Ini akan menempatkan keterangan tabel di bagian bawah. Anda juga dapat menggunakan top jika Anda memilih untuk menempatkannya di atas.

CSS Tables - Empty Cells

Apakah Anda pernah meragukan apa yang terjadi dengan sel kosong di tabel Anda? Properti empty-cells memungkinkan Anda menentukan apakah akan menampilkan atau menyembunyikan mereka.

table {
  empty-cells: hide;
}

Ini akan membuat sel kosong tampak disembunyikan. Itu seperti bermain hide-and-seek dengan sel tabel Anda!

CSS Tables - Table Layout

Properti table-layout menentukan bagaimana sel, baris, dan kolom tabel diberikan. Itu seperti memilih antara seating chart ketat dan free-for-all di pesta makan malam.

table {
  table-layout: fixed;
}

Ini menetapkan tata letak tabel tetap, yang dapat meningkatkan kecepatan rendering untuk tabel besar.

CSS Table - with fixed Layout

Dengan tata letak tetap, lebar tabel ditentukan oleh baris pertama atau lebar yang ditentukan. Itu seperti memiliki kursi yang ditentukan di resepsi pernikahan.

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

th, td {
  width: 25%;
}

Ini menciptakan tabel dengan empat kolom lebar yang sama, tanpa menghiraukan konten.

CSS Table - with auto Layout

Tata letak otomatis menyesuaikan lebar kolom berdasarkan konten mereka. Itu seperti membiarkan tamu memilih kursi mereka sendiri di pesta makan malam santai.

table {
  table-layout: auto;
  width: 100%;
}

Di sini, browser akan menyesuaikan lebar kolom berdasarkan konten mereka.

CSS Tables - Height and Width

Anda dapat mengontrol ukuran tabel dan selnya menggunakan properti height dan width. Itu seperti memutuskan seberapa besar meja makan Anda harusnya.

table {
  width: 100%;
}

td {
  height: 50px;
}

Ini menetapkan lebar tabel menjadi 100% dari wadahnya dan tinggi setiap sel menjadi 50 piksel.

CSS Tables - Table Alignment

Menyelaraskan konten dalam sel tabel sangat penting untuk kebacaan. Itu seperti mengatur makanan di piring - presentasi penting!

td {
  text-align: center;
  vertical-align: middle;
}

Ini menyusun konten secara horizontal dan vertikal di setiap sel.

CSS Tables - Border

Batas dapat membuat tabel Anda lebih menarik secara visual dan mudah dibaca. Itu seperti menggambar garis di kertas untuk mengatur informasi.

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

Ini menambahkan batas 1-piksel berwarna hitam ke tabel dan semua selnya.

CSS Tables - Background color

Menambahkan warna latar belakang dapat membuat tabel Anda lebih menarik secara visual dan membantu membedakan bagian yang berbeda dari tabel. Itu seperti membiarkan kamar di rumah Anda berwarna berbeda.

table {
  background-color: #f2f2f2;
}

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

Ini menetapkan warna latar belakang abu-abu kecil untuk tabel dan warna latar belakang hijau dengan teks putih untuk sel header.

CSS Tables - Font styles

Styling teks di tabel Anda dapat meningkatkan kebacaan. Itu seperti memilih font yang tepat untuk buku - itu bisa membuat perbedaan besar dalam pengalaman membaca.

table {
  font-family: Arial, sans-serif;
}

th {
  font-weight: bold;
}

td {
  font-size: 14px;
}

Ini menetapkan Arial sebagai font untuk seluruh tabel, membuat teks header tebal, dan menetapkan ukuran teks sel menjadi 14 piksel.

CSS Tables - Other Styles

Ada banyak gaya lain yang Anda dapat terapkan ke tabel. Ini adalah tinjauan cepat:

Properti	Deskripsi	Contoh
padding	Ruang di dalam sel	td { padding: 10px; }
border-radius	Tepi yang bundar	table { border-radius: 5px; }
box-shadow	Efect bayangan	table { box-shadow: 2px 2px 5px grey; }
opacity	Transparansi	table { opacity: 0.8; }

CSS Tables - Margin

Marjin dapat memberikan tabel Anda sedikit ruang untuk nafas dari elemen lain di halaman. Itu seperti meninggalkan sedikit ruang di sekitar kerangka gambar di dinding.

table {
  margin: 20px auto;
}

Ini menambahkan marjin 20-piksel ke atas dan bawah tabel, dan menengahkannya secara horizontal.

CSS Tables - Table Dividers (vertical / horizontal)

Anda dapat menambahkan pemisah ke tabel Anda untuk memisahkan kolom atau baris. Itu seperti menggunakan rular untuk menggambar garis lurus di buku catatan.

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

tr {
  border-bottom: 1px solid black;
}

Ini menambahkan garis vertikal antara kolom dan garis horizontal antara baris.

CSS Tables - Striped Table

Tabel berstrip dapat membuatnya mudah membaca baris data. Itu seperti menandai setiap baris lain di buku untuk menjaga tempat Anda.

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

Ini menciptakan baris putih dan abu-abu bergantian di tabel Anda.

CSS Tables - Responsive Table

Membuat tabel responsif memastikan mereka terlihat bagus di semua perangkat. Itu seperti memiliki meja makan yang dapat diperluas atau menyusut berdasarkan jumlah tamu.

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr { border: 1px solid #ccc; }

  td {
    border: none;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-label);
  }
}

Kode ini mengubah tabel menjadi format seperti daftar di layar kecil, membuatnya mudah dibaca di perangkat mobile.

CSS Table - Related Properties

Ini adalah tabel properti CSS yang terkait yang Anda mungkin temukan berguna saat bekerja dengan tabel:

Properti	Deskripsi
border-collapse	Menentukan apakah batas sel dipisahkan atau runtuh
border-spacing	Menetapkan jarak antara batas sel
caption-side	Menentukan penempatan keterangan tabel
empty-cells	Menentukan apakah batas ditampilkan di sel kosong
table-layout	Menentukan algoritma yang digunakan untuk menata sel, baris, dan kolom tabel
vertical-align	Menentukan vertikal alignment konten di sel
text-align	Menentukan horizontal alignment konten di sel

Dan itu adalah! Anda sekarang siap untuk membuat dan style tabel di CSS. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba properti ini. Selamat coding!

Credits: Image by storyset