Table di html bisa kita atur tampilannya, supaya data yang disajikan tidak membosankan.
Tapi, mengatur style table bukan hal yang mudah. Ini agak rumit. Karena itu, mohon bacanya pelan-pelan ya.
Contoh implementasi
Supaya paham goal yang ingin dicapai. Perhatikan tabel berikut:
Sebelum style:
| No | Nama orang |
|---|---|
| 1 | Puntadewa |
| 2 | Werkudhara |
| 3 | Janaka |
| 4 | Nakula |
| 5 | Sadewa |
Setelah style:
| No | Nama orang |
|---|---|
| 1 | Puntadewa |
| 2 | Werkudhara |
| 3 | Janaka |
| 4 | Nakula |
| 5 | Sadewa |
Pahami strukturnya
Sebelum memulai, pastikan kamu benar-benar bisa membuat tabel di html. Ada bagian-bagian element tabel yang perlu kamu style.
Pada umumnya yang dipakai ada dua bagian, yaitu <thead> untuk mendefinisikan kolom, dan <tbody> untuk isi data. Ada juga <tfoot> tapi jarang dipakai.
Didalam ketiganya, ada baris <tr> yang di dalamnya ada kolom <td>. Jadi, ada kolom di dalam baris, bukan baris dalam kolom.
Berikut selektor yang harus kamu pahami:
- Thead, selektornya
table thead {} - Baris dalam
thead, selektornya:table thead tr {} - Kolom dalam
thead, selektornya:table thead tr th {} - Tbody, selektornya
table tbody {} - Baris dalam
tbody, selektornya:table tbody tr {} - Kolom dalam
tbody, selektornya:table tbody tr th {} - Jika table diberi
id="style", selektornya:table #style {} - Jika
class="style", selektornya:table .style {}
Mengatur style
Jika kamu sudah paham strukturnya, sekarang kita mulai mengatur tampilannya.
Style ini adalah style yang umum digunakan dalam tabel.
Width dan height
Yang umum diatur adalah panjang tabel dan tinggi kolom.
table {width: 100%}
table tr td, table tr th {height:50px;}
| Nama Depan | Nama orang |
|---|---|
| Achmad | Puntadewa |
| Yusron | Werkudhara |
| Arif | Janaka |
Border
Pertama kamu bisa menganti border dengan css. Semuanya bisa kamu buat border, tabel, baris maupun kolom.
table {
border: 1px solid #1707c4;
}
Tinggal ganti table dengan element yang kamu inginkan, misal table tbody tr.
| Nama Depan | Nama orang |
|---|---|
| Achmad | Puntadewa |
| Yusron | Werkudhara |
| Arif | Janaka |
Border collapse
Supaya lebih paham, lihat contoh dibawah:
Kodenya:
table{
border-collapse: collapse;
}
Background
Yang biasa diberi warna background adalah barisnya.
table tr {
background: black
}
| Nama Depan | Nama orang |
|---|---|
| Achmad | Puntadewa |
| Yusron | Werkudhara |
| Arif | Janaka |
Background selang-seling
Kamu bisa mengatur background baris selang-seling, misal yang ganjil putih dan yang genap abu-abu.
table tr {background-color:white}
table tr:nth-child(even){background-color: #f2f2f2;}
Tambahkan :nth-child(even) untuk mengedit style yang genap (even).
| Nama Depan | Nama orang |
|---|---|
| Achmad | Puntadewa |
| Yusron | Werkudhara |
| Arif | Janaka |
| Arif | Mantap |
Style text table
Yang biasa digunakan adalah: text-align dan vertical-align. Karena teks ada di dalam kolom, maka selectornya ya di dalam kolom.
table tr td {
text-align:center;
vertical-align:bottom;
}
Untuk style teks di css saya sudah membahasnya di artikel yang lain.
Margin dan padding
Untuk mengatur margin dan padding tinggal diberi:
table tr td {
margin:10px;
padding:10px
}
Property CSS Table
Berikut ini adalah tabel daftar properti css untuk tabel:
| property | keterangan |
|---|---|
| table-layout | Mengatur algoritma layout pada tabel |
| empty-cells | Mengatur style jika cell kosong |
| caption-side | Mengatur style caption tabel |
| border-spacing | Mengatur jarak border |
| border-collapse | Supaya border collapse (tidak ada jarak antar border) |
| border | Syntax shorthand untuk mengatur border |
Sekian tutorial style css tabel. Dicoba-coba aja sendiri ya, misal border yang di atas atau bawah.