Menggunakan CSS untuk membuat tampilan table menjadi menarik
Kali ini kita akan
membahas mengenai pembuatan tabel. Eits, namun bukan pembuatan tabel biasa,
melainkan ditambahi sedikit bumbu CSS untuk dapat memperindah tampilan website
kita.
Sebelumnya, apasih CSS
itu???
CSS kepanjangannya adalah Cascading Style Sheet dimana merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Namun, jangan sampai salah ya teman-teman karena CSS bukan merupakan bahasa pemograman hloo. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dan pada umumnya CSS dipakai untuk memformat tampilan halaman web, agar lebih menarik tentunya J
CSS kepanjangannya adalah Cascading Style Sheet dimana merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Namun, jangan sampai salah ya teman-teman karena CSS bukan merupakan bahasa pemograman hloo. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Dan pada umumnya CSS dipakai untuk memformat tampilan halaman web, agar lebih menarik tentunya J
Jadi yang akan kita buat adalah tabel yang berada ditengah itu saja, dengan ketentuan, tiap cursor menyentuh baris yang bernomor ganjil atau genap muncul warna yang berbeda. nahlo gimana tuh, cekidot!
Script HTML pembuatan tabel:
<!DOCTYPE html>
<html>
<head>
<title>Table2</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table border="0">
<th>No</th>
<th>Nama Lengkap</th>
<th>Kota</th>
<tr class="ganjil">
<td class="no">1</td>
<td class="namaganjil">Amal Triadi</td>
<td>Pontianak</td>
</tr>
<tr class="genap">
<td class="no">2</td>
<td>Candra Ade</td>
<td>Bengkulu</td>
</tr>
<tr class="ganjil">
<td class="no">3</td>
<td>Tri Widianto</td>
<td>Wonogiri</td>
</tr>
<tr class="genap">
<td class="no">4</td>
<td>Abdul Haris</td>
<td>Ternate</td>
</tr>
<tr class="ganjil">
<td class="no">5</td>
<td>Aldi Satriani</td>
<td>Bali</td>
</tr>
</table>
</body>
</html>
Nah, dari scrip diatas kita ada menambahkan beberapa tag/atribut tambahan seperti:
<link rel="stylesheet" type="text/css" href="style.css"> gunanya untuk membuat css external di halaman lain.
<tr class="ganjil"> kalau yang satu ini adanya penambahan class guna untuk membedakan baik baris genap maupun ganjil.
Selanjutnya, ini dia script CSSnya:
table{
border-collapse: none;
background-color: white;
color: black;
width: 500px;
height:150px;
margin:100px;
}
th{
border-style: none;
background-color: skyblue;
border-radius: 5px 5px 0px 0px
}
td.no{
text-align: center;
}
tr.judul{
background-color: skyblue;
border-radius: 5px 5px 0px 0px;
}
tr:hover{
color: black;
}
tr.ganjil{
color:black;
background-color: white;
}
tr.ganjil:hover{
background-color: greenyellow;
}
tr.genap{
color:black;
background-color: #DDD;
}
tr.genap:hover{
background-color: magenta;
}
Sekiranya ada perintah tambahan yaitu:
border-radius: 5px 5px 0px 0px è Untuk mengubah sisi siku-siku kotak table menjadi tumpul
hover è
pada
saat kita mengarahkan pointer mouse kita, kemudian kata-kata itu mengalami roll-over.
text-align : centerèAgar memusatkan
seluruh kata-kata dalam 1 kolom yang dipilih menjadi ke tengah
Dan berikut adalah hasil tampilannya:
Yang pertama adalah tampilan ketika cursor diarahkan kepada baris ganjil
Dan yang kedua ini untuk tampilan ketika cursor diarahkan ke baris genap.
Tidak ada komentar:
Posting Komentar