Table merupakan sebuah kotak-kotak yang biasanya berisi sebuah data. Umumnya, table menampilkan data dalam bentuk sel yang terdiri atas baris dan kolom. Dengan adanya table didalam website, setiap data yang Anda informasikan lebih teratur tata letaknya, dan tidak menyulitkan user dalam mencari data yang lebih spesifik. Didalam table, anda dapat memberikan judul yang menjadi tanda pada tiap-tiap kolom dan baris. Disini kita akan belajar membuat table menggunakan css.
Belajar membuat table menggunakan CSS adalah materi pelajaran yang ke-10. Di materi sebelumnya, kita telah belajar tentang:
Dengan luasnnya kegunaan table pada website, hal ini membuat para pengembang HTML membuat selector <table>. Tidak hanya berhenti pada selector, ada juga pelengkap seperti properti dan value. Pada materi Sintaks telah dibahas apa itu selector, value, dan table. Ketiga ini akan diletakkan pada lembar stylesheet, sementara atribut tag akan diletakkan pada lembar html.
Properti Table pada CSS
Kegunaan properti table pada css untuk memodifikasi table menjadi lebih dinamis, khususnya pada tampilan. Anda dapat menggunakan properti table seperti yang ada dibawah ini:
- Border-collapse menentukan apakah browser harus mengontrol tampilan perbatasan yang berdekatan yang menyentuh satu sama lain atau apakah setiap sel harus mempertahankan gaya.
- Border-spacing menentukan lebar yang akan muncul dari setiap sel table.
- Caption-side menentukan keterangan yang disajikan dalam <caption> elemen. Secara default, ini dimasukkan kedalam lembar html. Anda dapat menggunakan properti caption-side (sisi-judul) untuk mengontrol penempatan judul table.
- Empty-cells menentukan apakah perbatasan harus ditampilkan jika sel tidak memiliki data (kosong).
- Table-layout memungkinkan browser untuk mempercepat tata letak table dan membantu anda dalam mengontrol bagaimana browser harus membuat atau menyusun table.
Selector & Atribut Table pada CSS
Elemen-elemen diatas nantinya akan digunakan pada bagian lembar HTML untuk memanggil CSS table. Hampir semua elemen diatas akan digunakan pada html. Nah, sekarang kita akan memulai bagaimana membuat table menggunakan html, css dengan properti seperti diatas.
Border-Collapse Property
Properti ini memiliki 2 nilai yaitu: collapse dan seperate. Ikuti contoh dibawah ini untuk menunjukkan peran dalam properti the border-collapse property.
Border-Spacing Property
Border-spacing property akan menentukan jarak untuk memisahkan tiap-tiap sel yang ada pada table. Perbatasan ini bisa mengambil satu atau dua nilai, hal ini harus bersifat satuan panjang. Jika Anda memberikan satu nilai, itu akan berlaku untuk batas vertikal dan horizontal. Anda dapat menentukan dua nilai, dalam hal ini, yang pertama mengacu pada jarak horizontal dan spasi kedua jarak vertikal.
Catatan: Properti ini tidak dapat berfungsi pada Netscape dan IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>
Sekarang, mari kita buat contoh properti menggunakan border-spacing property. Contoh dapat dilihat dibawah ini.
Caption-Side Property
Properti caption digunakan untuk memberikan judul pada table. Untuk mengaktifkan properti caption, Anda harus memasukkan <caption> kedalam lembar html untuk dihubungkan kedalam table. Properti caption dapat ditentukan letak posisinya. Anda dapat meletakkannya pada bagian: kiri, kanan, atas dan bawah. Berikut contoh meletakkan properti caption pada table.
Empty-Cells Property
Empty-cells property (Properti sel kosong) adalah sel tanpa konten yang harus memiliki batas yang ditampilkan. Menggunakan properti ini, Anda bisa memiliki salah satu dari tiga nilai, yaitu: show, hide atau inherit. Berikut properti sel kosong yang digunakan untuk menyembunyikan batas sel kosong di elemen <table>.
Table-Layout Property
Properti table-layout atau dalam arti umum properti tata letak, membantu Anda untuk mengontrol bagaimana browser harus membuat atau menyusun tabel. Properti ini memiliki 3 value, yaitu: fixed, auto atau inherit. Berikut terdapat contoh yang membedakan dari ketiga value tersebut.
Catatan: Properti ini tidak didukung oleh banyak browser sehingga tidak bergantung pada properti ini.