Belajar Table Tingkat Lanjut

Assalamualaikum Wr.Wb.

Sekilas tentang table

Table (table) sangat diperlukan ketika ingin menampilkan data yang berbentuk kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang di pakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolahan data dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

Tabel Border

Untuk menentukan batas tabel dalam CSS, menggunakan perbatasan properti.

Contoh di bawah menentukan batas hitam untuk <table>, <th>, dan <td> elemen:

Perkecil Tabel Borders

Border-collapse properti menetapkan apakah perbatasan table harus runtuh ke dalam perbatasan tunggal:

Tabel Lebar dan Tinggi

Lebar dan tinggi tabel didefinisikan oleh lebar  dan tinggi sifat.

Contoh di bawah set lebar tabel untuk 100%, dan ketinggian <th> elemen untuk 50px:

Penyelarasan Horizontal

Align properti menetapkan alignment horizontal (seperti kiri, kanan, atau tengah) dari konten dalam <th> atau <td>.

Secara default, isi dari <th> elemen adalah pusat-aligned dan isi dari <td> elemen yang tersisa-blok.

Contoh berikut kiri meluruskan teks dalam <th> elemen:

Keselarasan vertikal

Vertical-align properti menetapkan alignment vertikal (seperti atas, bawah, atau tengah) dari konten dalam <th> atau <td>.

Secara default, alignment vertikal dari konten dalam sebuah tabel adalah tengah (untuk kedua <th> dan <td> elemen).

Contoh berikut menetapkan alignment teks vertikal ke bawah untuk <td> elemen:

Contoh berikut kiri meluruskan teks dalam <th> elemen:

Tabel Padding

Untuk mengontrol ruang antara perbatasan dan konten dalam sebuah tabel, gunakan bantalan properti pada <td> dan <th> elemen:

Selamat mencoba..
Kalau ada yang jurang jelas silahkan komen atau lihat di w3school.com
terima kasih.