CSS TABEL
Assalamu'alaikum Wr. Wb
Hai sobat semua, terima kasih sudah mengunjungi blog saya ini. Sebelumnya kita sudah mempelajari tentang Lis/Daftar pada CSS, nah untuk kesempatan kali ini kita akan lanjut kemateri selanjutnya yaitu Table pada CSS.
Langsung saja yuk...
TABEL BORDERS
Untuk menentukan batas tabel (border) dalam CSS, menggunakan properti border.
Contoh dibawah ini menetapkan border hitam untuk elemen <table>, <th>, da <tr> :
Hasilnya :
BORDER COLLAPSE
Properti border-collapse menetapkan apakah border tabel harus runtuh/melebur kedalam border tunggal.
Contoh :
Hasilnya :
Jika kita hanya ingin border disekitar tabel saja bisa menggunakan sintak berikut ini :
Hasilnya :
TABEL WIDTH DAN HEIGHT
Lebar dan tinggi tabel didefinisikan oleh sifat width dan height.
Contoh dibawah ini lebar tabel diset ke 100%, dan tinggi elemen <th> diset ke 50px :
Hasilnya :
HORIZONTAL ALIGNMENT
Properti text-align menetapkan penyelarasan horizontal (kiri, kanan, atau tengah) dari konten dalam elemen <th> atau <td>.
Contoh berikut menyelaraskan teks ke kiri kedalam elemen <th> :
Hasilnya :
VERTICAL ALIGNMENT
Properti vertical-alignment menetapkan penyelarasan vertikal (atas, bawah, atau tengah) dari konten dalam <th> atau <td>.
Contoh berikut menyelaraskan teks kebawah untuk elemen <td> :
Hasilnya :
TABEL PADDING
Untuk mengontrol ruang antara border dan konten dalam sebuah tabel menggunakan properti padding pada elemen <td> dan <th>.
Contoh :
Hasilnya :
HORIZONTAL DIVIDERS
Contoh :
Hasilnya :
TABEL HOVERABLE
Gunakan :hover pada <tr> untuk menyorot baris tabel pada saat mouse diatas baris/tabel.
Contoh :
Hasilnya :
TABEL BERGARIS
Untuk tabel zebra bergaris menggunakan nth-child() dan menambahkan background-color untuk semua baris.
Contoh :
Hasil :
TABEL WARNA
Contoh dibawah ini menetukan warna background dan wana teks elemen <th> :
Hasilnya :
TABEL RESPONSIVE
Sebuah tabel responsive akan menampilakn scroll bar horisontal jika layar terlalu kecil untuk menampilkan konten lengkap.
Dengan menambahkan elemen container (seperti <div> dengan overflow-x:auto untuk membuatya responsive.
Contoh :
Hasilnya :
Jika ukuran layar dikecilkan maka tabel juga akan berubah menjadi kecil mengikuti ukuran layar seperti ini :
Silakan dicoba sendiri ya sobat. Apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima kasih.
Melalui pembahasan ini kita bisa mengetahui cara pembuatan tabel menggunakan CSS, dengan menggunakan CSS tabel bisa lebih terlihat menarik dan responsive.
Referensi :
http://www.w3schools.com/css/css_table.asp
Wassalamu'alaikum Wr. Wb