Tabel merupakan salah satu cara untuk menampilkan data, dengan tabel data yang ditampilkan menjadi lebih mudah untuk dibaca, dilihat, dan dicium (apa hubungannya???).
Untuk itu, tabel harus dibuat semenarik mungkin, agar data yang ditampilkan menjadi lebih menggoda.
Pada update CSS yang ketiga lalu, ada salah satu selector yang cukup powerful. Mengapa powerful? karena dengan selector tersebut, kita dapat membuat 'deret pada bilangan matematika', seperti deret ganjil-genap, deret fibonacci, deret prima dan deret-deret lainnya.
declarationnya adalah :nth-child(an+b), berikut penjelasannya:
:nth-child(an+b);
a: loncatan.
n: counter, dimulai dari 0.
b: nilai awal.
Ok, agar lebih mudah memahami selector di atas langsung saja kita menuju contohnya.
tr:nth-child(2n+1) {
background:blue;
color:white;
}
tr:nth-child(2n+2) {
background:red;
color:white;
}
Pada contoh kali ini, kita akan mewarnai tabel dengan hitungan ganjil-genap, ganjil untuk warna merah dan genap untuk warna biru.
Oleh karena warna yang digunakan ada 2, so rumusnya juga harus 2. rumusnya adalah tr:nth-child(2n+1) untuk warna merah dan tr:nth-child(2n+2) untuk warna birunya.
maksud dari tr:nth-child(2n+1) adalah, setiap 2 baris, dan dimulai dari baris ke-2 (1 di sini berarti baris 2, karena untuk baris ke-1 adalah 0) akan berwarna merah. jadi yang berwarna merah adalah baris ke-2,4,6,8 dan 10.
sedangkan untuk tr:nth-child(2n+2) sama dengan yang di atas, hanya angka awalnya bermula dari angka 2, yang berarti baris ke-3.
berikut ini kode lengakapnya.
tabel.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css"/> </head> <body> <header> <h1>Demo Tabel Futuristic</h1> </header> <center> <h1>Film Yang Telah Saya Tonton</h1> <table> <tr><th>No.</th><th>Title</th><th>Budget</th><th>Boxoffice</th><th>Genre</th><th>Star</th></tr> <tr><td>1</td><td>avatar</td><td>237 million</td><td> 2,782,275,172 </td><td>epic science fiction action</td><td>-</td></tr> <tr><td>2</td><td>titanic</td><td>200 million</td><td> 2,186,772,302 </td><td>epic romantic disaster</td><td>Kate Winslet</td></tr> <tr><td>3</td><td>the hunger game catching fire</td><td>130 million</td><td> 859,559,837 </td><td>science fiction adventure</td><td>Jennifer Lawrence</td></tr> <tr><td>4</td><td>inception</td><td>160 million</td><td> 825,532,764 </td><td>science fiction heist thriller</td><td>Leonardo DiCaprio</td></tr> <tr><td>5</td><td>2012</td><td>200 million</td><td> 769,679,473 </td><td>science fiction disaster</td><td>-</td></tr> <tr><td>6</td><td>gravity</td><td>100 million</td><td> 695,173,000 </td><td>science-fiction thriller space-drama</td><td>Sandra Bullock</td></tr> <tr><td>7</td><td>the hunger game</td><td>78 million</td><td> 691,247,768 </td><td>dystopian adventure</td><td>Jennifer Lawrence</td></tr> <tr><td>8</td><td>forrest gump</td><td>55 million</td><td> 677,387,716 </td><td>epic romantic comedy-drama</td><td>Tom Hanks</td></tr> <tr><td>9</td><td>ratatouille</td><td>150 million</td><td> 623,722,818 </td><td>computer-animated comedy</td><td>-</td></tr> <tr><td>10</td><td>brave</td><td>185 million</td><td> 538,983,207 </td><td>computer-animated fantasy</td><td>-</td></tr> </table> </center> <a href="#"> <div id="kembali"> <div id="icon"><</div> </div> </a> </body> </html>
style.css
* {
margin:0;
padding:0;
}
body {
background:#f0fff0;
}
header {
height:60px;
background:#2f4f4f;
color:white;
margin-bottom:100px;
}
header h1 {
text-align:center;
padding-top:5px;
}
#kembali {
width:60px;
height:60px;
position:fixed;
right:10px;
bottom:10px;
border-radius:30px;
background:#2f4f4f;
}
#kembali:hover {
background:#7cfc00;
}
#kembali:hover #icon{
color:#4b0082;
}
#icon {
color:#7cfc00;
font-size:50px;
margin-left:10px;
}
table {
border-collapse:collapse;
}
td,th {
border:1px solid white;
}
th {
background:green;
color:white;
}
tr:nth-child(2n+1) {
background:blue;
color:white;
}
tr:nth-child(2n+2) {
background:red;
color:white;
}
td,th {
padding:5px;
}
udah dulu lah, gue mau tidur, makasih ya yang sudah membaca sampe' habis artikelku yang sangat jelek ini. maklum pemula. :-)
thanks.
0 komentar:
Posting Komentar