CSS - Tables

Selamat datang, para pengembang web yang sedang belajar! Hari ini, kita akan melihat dunia CSS tables. Sebagai guru ilmu komputer di lingkungan yang ramah, saya sangat senang untuk membimbing Anda dalam perjalanan ini. Tabel mungkin terlihat usang, tapi percayalah, mereka tetap sangat berguna dalam desain web modern. Jadi, mari kita mulai!

CSS Tables - Border Collapse

Imaginilah Anda membangun pagar di sekitar halaman Anda. Anda ingin tiang pagar bersentuhan satu sama lain, kan? Itu tepat apa yang border-collapse lakukan untuk batas tabel. Ini menentukan apakah batas sel harus 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 pemotongan rambut yang rapi!

CSS Tables - Border Spacing

Apa bila 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 dapat mengatur 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 kapTION, dan Anda dapat mengontrol di mana kapTION 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 kapTION tabel Anda di bagian bawah. Anda juga dapat menggunakan top jika Anda memilih untuk menempatkannya di atas.

CSS Tables - Empty Cells

Apakah Anda pernah berpikir apa yang terjadi dengan sel kosong di tabel Anda? Properti empty-cells memungkinkan Anda memutuskan untuk 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 yang 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 penerimaan 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 auto menyesuaikan lebar kolom berdasarkan konten mereka. Itu seperti membiarkan tamu memilih kursi mereka sendiri di pesta makan malam yang 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 ke 100% dari wadahnya dan tinggi setiap sel ke 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 menengahkan konten secara horizontal dan vertikal di dalam 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 hitam solid 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 mengcat ruang di rumah Anda dengan warna yang berbeda.

table {
background-color: #f2f2f2;
}

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

Ini menetapkan warna latar belakang abu-abu kecil untuk tabel dan warna 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 dapat 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 ke 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 bundar	table { border-radius: 5px; }
box-shadow	Efecti bayangan	table { box-shadow: 2px 2px 5px grey; }
opacity	Transparansi	table { opacity: 0.8; }

CSS Tables - Margin

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

table {
margin: 20px auto;
}

Ini menambahkan margin 20-piksel ke atas dan bawah tabel, dan menengahkan tabel secara horizontal.

CSS Tables - Table Dividers (vertical / horizontal)

Anda dapat menambahkan pemisah ke tabel Anda untuk memisahkan kolom atau baris. Itu seperti menggunakan ruler 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 berstripes dapat membuatnya lebih mudah untuk 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 berulang 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 kapTION tabel
empty-cells	Menetapkan apakah batas ditampilkan di sel kosong
table-layout	Menetapkan algoritma yang digunakan untuk menempatkan sel, baris, dan kolom tabel
vertical-align	Menetapkan vertikal alignment konten di sel
text-align	Menetapkan horizontal alignment konten di sel

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

Credits: Image by storyset