Belajar Membuat Table Menggunakan CSS

Belajar Membuat Table Menggunakan CSS

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

ElemenKeterangan
tableMenampilkan sebuah table dalam lembar HTML. Tanpa properti border yang diletakkan pada lembar html. Maka table HTML hanya membuat sel-sel kolom dan baris tanpa ada garis pada tiap sel.
captionMenampilkan sebuah judul table dalam lembar HTML. Posisi default judul terletak pada bagian atas table. Menggunakan properti align membuat judul berada pada bagian bawah table.
trMembuat baris tabel menjadi spesifik. Mendefenisikan atribut untuk seluruh baris: (align: left, right & center) atau (valign: top, middle & bottom).
thMendefenisikan sel header tabel. Menggunakan atribut th, akan secara default membuat judul berada di tengah dan bercetak tebal.
tdDapat mendefenisikan sebuah sel data tabel. Secara default, sel tabel akan ditampilkan secara rata kiri dan ditengah secara vertikal. Sel data tabel dapat berisi atribut untuk mendefenisikan karakteristik dari sel dan isinya.

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.

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.