Dalam membuat tampilan tabulasi data kita tentu akan menggunakan tabel. Kita tentu menginginkan tabel yang rapi sehingga mudah untuk membaca tabel tersebut. Berikut akan dijelaskan bagaimana melakukan styling css untuk membuat tabel kita lebih rapi.
Misal kita merancang tampilan seperti ini
CSS yang perlu kita perhatikan adalah
- Pastikan border-collapse:collapse
Pada contoh kali ini:
.item_entry
{
border-collapse:collapse;
} - Tentukan warna border
Pada contoh kali ini:
.item_entry td
{
border: solid 1px #c1d2ff;
} - Tentukan warna headernya
Pada contoh kali ini:
.item_entry thead {
background-color: #7ea5fe;
color: #ffffff;
} - Tentukan warna pada baris genapnya:
Pada contoh kali ini:
.item_entry thead {
background-color: #7ea5fe;
color: #ffffff;
}
Contoh tampilan dapat dilihat pada http://aris.proweb.asia/style_css_table.html dengan source code seperti di bawah ini
<html>
<head>
<title>Style CSS Table</title>
<style type=”text/css”>
.item_entry
{
border-collapse:collapse;
}
.item_entry td
{
border: solid 1px #c1d2ff;
}
.item_entry thead {
background-color: #7ea5fe;
color: #ffffff;
}
.genap
{
background-color: #cefdff;
}
</style> </head>
<body>
<table class=”item_entry”>
<thead>
<tr>
<td>No</td>
<td>Barang</td>
<td>Jumlah</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Laptop</td>
<td>20</td>
</tr>
<tr class=”genap”>
<td>2</td>
<td>Printer</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Modem</td>
<td>1</td>
</tr>
<tr class=”genap”>
<td>4</td>
<td>Hub</td>
<td>2</td>
</tr>
<tr>
<td>5</td>
<td>Scanner</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
Untuk belajar CSS lebih lanjut silahkan mengunjungi http://www.w3schools.com/css/css_table.asp .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.