CSS : Tabel Dengan CSS

assalamualikum wr. wb.
Kali ini kita akan mempelajari cara pembuatan tabel, serta cara untuk mewarnai atau memperindah tabel dengan style css.

Latar Belakang
Dalam database, tabel sangat diperlukan menyimpan serta menampilkan informasi data. Tabel akan terlihat menarik saat kita mengatur style tabel dengan css.

Tujuan
Memperindah tampilan tabel dengan style yang ada di CSS.

Pembahasan

TABEL

Ada beberapa elemen yang dapat digunakan untuk memperindah tampilan tabel, diantaranya :
border
digunakan untuk membuat perbatasan pada tabel, cara penulisan dalam penggunaan border,

border : 2px;

Akan mengatur tebal perbatasan menjadi 2 px, warna default hitam.

border : 2px solid black;

Akan mengatur tebal perbatasan menjadi 2px jenis border solid dan warnanya hitam.

border-collapse
dugunakan untuk membuat perbatasan/border menjadi tunggal, cara penulisannya,

border-collapse: collapse;

width and height
digunakan untuk mengatur lebar dan tinggi suatu elemen dalam tabel, misalnya lebar dan tinggi elemen <table>, <th>, dan <tr> cara penulisannya dimasukkan dalam style cssnya, misal mengatur lebar dan tinggi elemen <table> dan <th>,

table{
    width: 60%;
}
th{
    height: 50px;
}

text-align
digunakan mengatur perataan teks secara horizontal yaitu kanan, kiri, dan tengah (right, left, dan center) cara penulisannya,

text-align: center;

vertical-align
digunakan untuk mengatur perataan teks secara vertikal yaitu atas, tengah dan bawah (top, middle, dan bottom) cara penulisannya,

vertical-align: middle;

padding
padding dalam elemen tabel juga sama seperti pada elemen lainnya yaitu mengatur ruang antara border dengan konten tabel, padding dituliskan dalam elemen tabel, misal kita akan menggunakan properti padding dalam elemen <th> dan <td>,

th, td {
    padding: 5px;
}

border-bottom
digunakan untuk membuat garis horizontal dibawah suatu elemen yang ditentukan, misal kita akan menambah garis horizontal untuk elemen <th> dan <td> cara penulisannya

th, td {
    border-bottom: 1px solid red;
}

:hover
sama seperti dalam elemen lainnya, fungsi hover yaitu akan mengatur suatu elemen saat pointer mouse digerakan diatasnya,misal kita akan menambah hover dalam elemen <tr> , cara penulisannya

tr:hover {
    background-color: yellow;
}

nth-child()
digunakan untuk membuat warna baris pada tabel seperti zebra dan ditambahkan properti background-color, biasanya diatur untuk baris-baris ganjil, cara penulisannya

nth-child(even) {
    bakcground-color: gray;
}

background-color
sama seperti yang digunakan dalam elemen lainnya, dalam tabel biasanya background-color ditambah di baris judul


Contoh membuat tabel
Misal kita akan membuat tabel dengan
- border collapse
- baris judul akan diberi warna
- menggunakan elemen nth-child() agar warna barisnya berbeda

1. Untuk mengatur <elemen> tabel secara keseluruhan, properti yang kita gunakan yaitu,

table {
    border-collapse: collapse;
    width: 60%;
    margin: auto;
}

Dari script yang kita tulis diatas, browser akan menghasilkan tabel dengan border collapse, lebar tabel 60% dari web browser, dan letak tabel akan di tengah karena menggunakan margin: auto;

2. Mengatur elemen <th> dan <td>

th, td {
    text-align: left;
    padding: 8px;
}

th {
    background-color: blue;
    color: white;
}

Untuk aturan diatas, elemen <th> dan <td> menggunakan perataan teks horizontal rata kiri, dengan padding nya sebesar 8px. Untuk elemen <th> diatur warna background biru dan warna tulisannya putih.

3. Mengatur elemen <tr> berwarna berbeda pada baris ganjilnya,

tr:nth-child(even){background-color: #bbb}

Baris ganjil akan memiliki warna sesuai yang telah diatur,

Hasil dari aturan style yang kita tuliskan diatas adalah seperti gambar berikut :

Untuk cara membuat tabelnya, kita hanya perlu mengetikkan kode untuk pembuatan tabel. Yang mana struktur dari pembuatan tabel adalah sebagai berikut :
Stuktur <tabel>

<table>
  <tr>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Sekian yang dapat saya postingkan, semoga dapat bermanfaat. Terimakasih.
wassalamualaikum wr. wb.

Referensi :
- http://www.w3schools.com/css/css_table.asp