Mendesain Custom Tabel dengan Pseudo Element CSS Oleh: Christian Rosandhy Masih dengan CSS, kali ini kita akan belajar mendesain tabel dengan CSS, sekalian belajar 3 pseudo-element yang akan sangat berguna kedepannya, yaitu first-child, last-child, dan nth-child. Penasaran? Yuk disimak.. :) Salam jagocoding, kali ini saya mau share tutorial mendesain tabel dengan CSS. Di tutorial ini kita akan membuat layout tabel yang colorful, dan tentunya juga rapi. Dan di tutorial ini juga sekalian saya pakai untuk menjelaskan beberapa pseudo-element yang akan kita gunakan, yaitu :first-child, :last-child, dan :nth-child. Langsung disimak aja ya.. :D Pertama-tama kita buat dulu tabelnya di HTML. Karena desain akan kita buat full di CSS, jadi tabel nggak perlu kita kasi background, bahkan sebaiknya cellspacing nya diset menjadi 0. (karena secara default cellspacing table itu nilainya 1). <h1>mendesain Tabel dengan CSS</h1> <table cellspacing="0"> <tr> <th>no</th> <th>nama</th> <th>alamat</th> <th>telp</th> <th>email</th> </tr> <tr> <td>1</td> <td>christian Rosandhy</td> <td>jl Kita Bersama no 999</td> <td>08888888888</td> <td>tianrosandhy@gmail.com</td> </tr> <tr> <td>2</td> <td>dewa Adi Jaya</td> <td>jl Raya Konoha no 2</td> <td>089999999999</td> <td>dewa_konoha@gmail.com</td> </tr> <tr> <td>3</td> <td>agus Fajar</td> <td>jl Memang Beda no 1</td>
--> </table> <td>0811111111111</td> <td>agusfajar@gmail.com</td> </tr> <!-- dan seterusnyaaaa...... Yah, tampilannya masih sederhana seperti ini nih.. Langsung ke CSS aja yuk.. Pertama-tama ya jangan lupa kita kasih CSS Reset dulu lah, biar margin websitenya rapi.. :D *{margin:0px auto; body{font-family: Calibri, candara, sans-serif; h1{text-align:center; line-height:2em; /*desain tabel dimulai dari sini*/ table{ border:1px solid #ccc; box-shadow: /*iseng dikit boleh lah ya.. :P */ 2px 2px 0px #fff,
3px 3px 2px #ccc, 5px 5px 0px #fff, 6px 6px 3px #ccc ; -moz-box-shadow: 2px 2px 0px #fff, 3px 3px 2px #ccc, 5px 5px 0px #fff, 6px 6px 3px #ccc ; -webkit-box-shadow: 2px 2px 0px #fff, 3px 3px 2px #ccc, 5px 5px 0px #fff, 6px 6px 3px #ccc ; table th{ background:#ac0; text-transform:uppercase; color:#fff; padding:10px; table td{ padding:5px; Keliatannya panjang ya? Sori, lagi iseng aja nambahin box-shadow.. :D Sampai disini sih desain tabelnya kita buat sebiasa mungkin aja dulu.. Dari coding saya sampai sini, hasilnya sekarang jadi seperti ini :
Sekarang kita akan berkenalan dulu dengan CSS pseudo-element first-child, dan last-child. kedua pseudo-element tersebut biasanya digunakan jika kita ingin memberikan 1 properti tersendiri yang hanya berlaku untuk elemen pertama (first-child) atau elemen terakhir (last-child). Dalam kasus ini, kita akan memanfaatkan salah satu dari kedua pseudo-class ini untuk memberikan garis vertikal pada elemen TD dan TH. Berikut ini saya berikan CSS dan hasilnya sebelum diberikan pseudo-element first-child / last-child : table td, table th{ border-left:1px solid #ccc; Nah, dari baris CSS tersebut, saya ingin menambahkan garis di sebelah kiri di setiap elemen TD dan TH, supaya ada garis dalam di tabelnya. Sayang sekali hasilnya nanti seperti ini :
Semoga gambarnya cukup jelas,, kalau mata kita cukup jeli, garis yang ada di kolom paling kiri terlihat lebih tebal bukan dari garis-garis yang lainnya? Wajar saja, hal itu terjadi karena table sudah kita berikan border sebesar 1px, eh sekarang kita malah menambahkan lagi garis disebelah kiri TH dan TD yang barusan kita buat sehingga membuatnya terlihat seperti garis setebal 2px. Disinilah first-child atau last -child kita gunakan. Supaya di tiap elemen TH dan TD pertama di tiap baris tidak ada garis, maka kita buatkan CSS Rule seperti ini : table td:first-child, table th:first-child{ border-left:none; Nah,, dengan begini, sekarang tabel terlihat lebih rapi kan? Bisa sih selesai sampai disini,, tapi kali ini saya masih mau share salah satu pseudo-element lain yang berguna untuk mewarnai tabel isian dengan 2 macam / beberapa macam warna yang berbeda, yaitu :nth-child. Cara kerja pseudo-element :nth-child sama seperti first-child atau last-child, bedanya nth-child memungkinkan kita memanggil urutan elemen secara spesifik, atau memanggil pola elemen secara spesifik. Misalnya table tr:nth-child(4) td{ background:#e4ffb2; Akan membuat baris ke 4 dari tag TR (yang diaplikasikan di tag TD) berwarna seperti yang didefinisikan.
pseudo-element :nth-child juga bisa digunakan untuk memanggil suatu pola. Pola yang diterima bisa berupa pernyataan (even - genap / odd - ganjil), atau berupa variabel (3n+1, 5n, 4n + 3,...). Biar nggak terlalu norak, saya pakai yang even odd aja deh.. :D /* PERLU DIINGAT: berbeda dengan first-child / last-child,, nth-child ini diletakkan di PARENT yang bersangkutan baru diikuti tag yang diberikan property CSS. */ table tr:nth-child(even) td{ /*untuk baris bilangan genap*/ background:#e4ffb2; table tr:nth-child(odd) td{ /*untuk baris bilangan ganjil*/ background:#f7fff0; Daaaann,, hasilnya akan menjadi seperti ini :
Demikianlah tutorial mendesain table dengan Pseudo Element CSS dari saya,, mohon maaf kalo hasil akhirnya masih keliatan norak,, mungkin kalo warnanya diutak-atik bisa terlihat lebih cantik lagi.. :D Terima kasih banyak atas perhatiannya, semoga tutorial ini bermanfaat untuk kita semua.. :) Tentang Penulis Christian Rosandhy