Kamis, 15 Desember 2011

Membuat Tabel Penawaran Produk / Jasa Pada Web Menggunakan CSS3

Posted at 17.29 by thegudangupil

kali ini saya akan berbagi hasil ramuan editing saya dalam membuat sebuah tabel penawaran / jasa menggunakan css 3, rumus hasil ramuanya sebagai berikut :

simpanlah file dokumen ini dengan nama file tabelcss.html dan carilah sebuah gambar jempol di internet dengan file format .png dan simpanlah dalam satu folder dengan dokumen tabelcss.html

<html>
<head>
<style type="text/css">
table.table2{
font-family: Calibri;
font-size: 19px;
font-style: normal;
font-weight: normal;
letter-spacing: -1px;
line-height: 1.2em;
border-collapse:collapse;
text-align:center;
}
.table2 thead th, .table2 tfoot td{
padding:20px 10px 40px 10px;
color:#6C6E64;
font-size: 26px;
background-color:#96B711;
font-weight:normal;
border-right:1px dotted #B0D02E;
border-top:3px solid #B0D02E;
-moz-box-shadow:0px -1px 4px #C2E927;
-webkit-box-shadow:0px -1px 4px #C2E927;
box-shadow:0px -1px 4px #C2E927;
text-shadow:0px 0px 1px #626A45;
text-shadow:1px 1px 1px #C2E927;
}
.table2 tfoot th{
padding:10px;
font-size:18px;
text-transform:uppercase;
color:#0564D7;
}
.table2 tfoot td{
font-size:36px;
color:#0564D7;
border-top:none;
border-bottom:3px solid #96B711;
-moz-box-shadow:0px 1px 4px #C2E927;
-webkit-box-shadow:0px 1px 4px #C2E927;
box-shadow:0px 1px 4px #C2E927;
}
.table2 thead th:empty{
background:transparent;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.table2 thead :nth-last-child(1){
border-right:none;
}
.table2 thead :first-child,
.table2 tbody :nth-last-child(1){
border:none;
}
.table2 tbody th{
text-align:right;
padding:10px;
color:#333;
text-shadow:1px 1px 1px #ADB7AA;
background-color:#78D563;
}
.table2 tbody td{
padding:10px;
background-color:#99F5D8;
border-right:1px dotted #5B9A86;
text-shadow:-1px 1px 1px #8CA19A;
text-transform:uppercase;
color:#305248;
}
.table2 tbody span.jempol::before{
content : url(gambar/jempol.png)
}
</style>
</head>
<body>
<table class="table2">
<thead>
<tr>
<th></th>
<th scope="col" abbr="Kosan">Kos-Kosan</th>
<th scope="col" abbr="Asrama">Asrama</th>
<th scope="col" abbr="Apartemen">Apartemen</th>
<th scope="col" abbr="Kontrakan">Kontrak Rumah</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Harga Per-Bulan</th>
<td>Rp. 50.000</td>
<td>Rp. 0 </td>
<td>Rp. 900.000</td>
<td>Rp. - (Masih Nego) </td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Kasur</th>
<td>Sedang</td>
<td>Kurang Tahu</td>
<td>Besar</td>
<td>Besar</td>
</tr>
<tr>
<th scope="row">Kamar Mandi</th>
<td>Di Dalam</td>
<td>Di Dalam</td>
<td>Di Dalam+Tambahan</td>
<td>Di Dalam</td>
</tr>
<tr>
<th scope="row">WiFi</th>
<td>Tersedia 2 Mbs</td>
<td>Tidak Ada</td>
<td>Unlimited</td>
<td>Tidak Ada</td>
</tr>
<tr>
<th scope="row">Biaya Listrik</th>
<td>Rp. 50.000,</td>
<td>Rp.-</td>
<td>Rp.-</td>
<td>Rp.- (Bayar Sendiri)</td>
</tr>
<tr>
<th scope="row">Dekat Pusat Perbelanjaaan</th>
<td><span class="jempol"></span></td>
<td><span class="jempol"></span></td>
<td><span class="jempol"></span></td>
<td><span class="jempol"></span></td>
</tr>
<tr>
<th scope="row">Dekat Kampus</th>
<td><span class="jempol"></span></td>
<td><span class="jempol"></span></td>
<td><span class="jempol"></span></td>
<td><span class="jempol"></span></td>
</tr>
</tbody>
</table>
</body>
</html>

hasilnya seperti gambar di bawah ini :

Jangan lupa untuk semua dokumen html dan gambar harus satu folder, disini saya menyimpan dokumen ini dalam folder karya sedangkan gambar jempol ada pada folder gambar yang berada di dalam folder karya juga.