bewoksatukosong.com | Halo semua balik lagi dengan om bewok, kali ini om bewok bakal membahas mengenai table css, Mengapa table harus menggunakan CSS ? agar lebih menarik tampilanya.
Ada 3 penambahan yang om bewok share yaitu
1. Border untuk garis
2. Background untuk warna latar belakang
3. Hover untuk pseudo-class.
Codinganya seperti dibawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title>Membuat table</title>
<style type="text/css">
table {
width: 100%;
border:3px solid #fff;
background: #3498db;
text-align: center;
padding:2%;
}
table:hover {
background: #e74c3c;
cursor: pointer;
}
th {
border:3px solid #fff;
padding:20px;
}
th:hover {
background: #c0392b;
color:#fff;
cursor: pointer;
}
td {
border:3px solid #fff;
padding:2%;
}
td:hover {
background: #c0392b;
color:#fff;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<th>No</th>
<th>Nama Pria</th>
<th>Nama Perempuan</th>
<th>Jodoh atau Tidak Jodoh</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>Pradina</td>
<td>Jodoh</td>
</tr>
<tr>
<td>2</td>
<td>Rinto</td>
<td>Raisa</td>
<td>Tidak Jodoh</td>
</tr>
<tr>
<td>3</td>
<td>Rendi</td>
<td>Maya Silvia</td>
<td>Jodoh</td>
</tr>
<tr>
<td>4</td>
<td>Giman</td>
<td>Novi</td>
<td>Jodoh</td>
</tr>
<tr>
<td>5</td>
<td>Om bewok</td>
<td>Isyana</td>
<td>Jodoh (sudah Pasti)</td>
</tr>
</table>
</body>
</html>
Om bewok akan jelasin satu - satu ya.
table {
width: 100%;
border:3px solid #fff;
background: #3498db;
text-align: center;
padding:2%;
}
width : lebar 100 % oleh karena itu tablenya sampai ujung browser
border 3px artinya ketebalanya 3px, semakin dikit misalnya 1px maka makin garisnya semakin tipis. Solid ini artinya garis, ada juga dash artinya garisnya putus - putus. #fff ini bebas warnanya kebetulan om bewok menggunakan berwarna putih. #fff = warna putih. background warna belakang om bewok ubah menjadi warna #3498db yaitu warna biru. lalu text -align artinya alinea tengah, semua tulisan berada di tengah. untuk padding 2% artinya jarak dalam kotak dan teks jaraknya 2%, coba kalau ga digunain sudah pasti mepet, sempit dan gaenak diliat.
table:hover {
background: #e74c3c;
cursor: pointer;
}
Artinya hover maka jika disentuh ke object maka akan berbeda, seperti background yang dari biru tapi ketika disentuh berubah menjadi warna itu karena menggunakan :hover. untuk cursor artinya panah atau penunjuk yang mana om bewok mengubahnya menjadi gambar telunjuk tangan ketika di sentuh.
th {
border:3px solid #fff;
padding:20px;
}
th ini adalah table row, yang belum tau th ini yang bagian tulisan no, nama pria, nama perempuan dan jodoh. kita bisa lihat om bewok memberi garis 3px sama seperti table, dan padding 20px itu artinya jarak dalam kotak dan teks.
th:hover {
background: #c0392b;
color:#fff;
cursor: pointer;
}
Kita bisa lihat th:hover tidak berbeda jauh dengan table:hover. background berubah menjadi warna merah, lalu teks ketika disentuh berubah menjadi warna putih (#fff), dan penunjuk berubah menjadi tangan.
td {
border:3px solid #fff;
padding:2%;
}
td:hover {
background: #c0392b;
color:#fff;
cursor: pointer;
}
td itu isinya seperti 1.andi dan pradina jodoh sampe seterusnya itu adalah sebuah td.
ga beda jauh dari sebelumnya border yaitu garis menggunakan 3px lalu garis tersebut diberi warna putih, dan ukuran dalam kotak dan isinya menjadi 2% (padding)
td:hover seperti biasa menggunakan background berwarna merah, lalu teksnya berubah menjadi warna putih lalu, cursor berubah menjadi jari telunjuk berwarna putih.
Itu saja Tutorial CSS 14 Mengenai Table, semoga bermanfaat bagi teman - teman.
No comments:
Post a Comment