Membuat Tabel Seperti Hostingan Dengan CSS3

Untuk anda yang sering meng-upload File ke Hostingan, pasti anda sering menemukan bentuk tabel seperti yang diatas, Nah coba anda lihat perbedaan Tabel Diatas dengan Table dibawah ini

|
|
|
|
|
V
Scroll 25 CM Buat Ng'liat Bentuknya haha... Sekali-kali anda ikutan Olahraga gtu wkwkw...

	Smart Starter	Smart Medium	Smart Business	Smart Deluxe
Price per month	$ 2.90	$ 5.90	$ 9.90	$ 14.90
Storage Space	512 MB	1 GB	2 GB	4 GB
Bandwidth	50 GB	100 GB	150 GB	Unlimited
MySQL Databases	Unlimited	Unlimited	Unlimited	Unlimited
Setup	19.90 $	12.90 $	free	free
PHP 5
Ruby on Rails

Yang bawah Gak bisa diklik karena bukan Gambar tapi Efek CSS3 hhe.... tapi yang diatas bisa karena itu Image biasa hhe...

Yupz, sama dengan anda, karena penasaran saya pernah isenk ingin Men-save gambar tersebut tapi tidak bisa karena itu bukanlah Image melainkan Tabel yang dibuat dengan menggunakan Efek CSS3, lalu bagaimana Cara membuatnya?

Tenang Untuk anda yang masih berdomisili di Platform Blogger anda pun dapat membuatnya, silahkan ikuti langkah Dibawah ini..

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Klo udah ketemu, silahkan masukkan Kode CSS dibawah ini tepat diatas atau sebelum Kode ]]></b:skin> tersebut

table.table1{
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse:separate;
}
.table1 thead th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568F23;
border:1px solid #93CE37;
border-bottom:3px solid #9ED929;
background-color:#9DD929;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41))
);
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.table1 thead th:empty{
background:transparent;
border:none;
}
.table1 tfoot td{
color: #9CD009;
font-size:32px;
text-align:center;
padding:10px 0px;
text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
color:#666;
}
.table1 tbody td{
padding:10px;
text-align:center;
background-color:#DEF3CA;
border: 2px solid #E7EFE0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#666;
text-shadow:1px 1px 1px #fff;
}
.table1 tbody span.check::before{
content : url(http://www.theology.edu/Remata/Android/Help/check_icon.png)
}


Dan untuk memanggilnya silahkan gunakan HTML berikut ini yang dapat anda taruh Dipostingan atau Dimanapun sesuka hati anda.

<table class="table1">
<thead>
<tr>
<th>
</th>
<th scope="col" abbr="Starter">Smart Starter</th>
<th scope="col" abbr="Medium">Smart Medium</th>
<th scope="col" abbr="Business">Smart Business</th>
<th scope="col" abbr="Deluxe">Smart Deluxe</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Storage Space</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
</tr>
<tr>
<th scope="row">Ruby on Rails</th>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
<td><span class="check"></span>
</td>
</tr>
</tbody>
</table>

Mudah bukan? Yupz untuk itu silahkan anda coba dan Praktekkan sendiri....

* Table diatas saya buat Scroll sekitar 25 Cm, Jadi klo ada yang mau ng'rubah-rubah ya silahkan ganti di CSS-nya....

Gambar Check Button saya ambil serampangan dari http://www.theology.edu/Remata/Android/Help/check_icon.png karena males Upload sendiri, jadi untuk anda yang pengen pake gambar sendiri ya silahkan upload sendiri hhe....