Membuat Tabel Seperti Hostingan Dengan CSS3

Untuk anda yang sering meng-upload File ke Hostingan, pasti anda sering menemukan bentuk tabel seperti berikut ini.

	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 di atas Gak bisa diklik karena bukan Gambar tapi Efek CSS3 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..
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.

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)
}

4. Langkah terakhir gunakan kode HTML berikut pada postingan :

<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>

5. dan lihat hasilnya.

Mudah bukan? Yupz untuk itu silahkan anda coba dan Praktekkan sendiri....
Please rate this article: