Membuat Tabel Sederhana Dengan CSS

Selamat pagi sobat blogger, setelah sebelumnya Kolom Tutorial™ membahas tentang pembuatan Contact Form ala Foxy Nah Kali ini ane mau mencoba share tentang bagaimana cara pembuatan sebuah tabel yang mirip-mirip kaya Microsoft Exel, ya siapa tau aja di anatara sobat blogger belum ada yang tau tutornya.

Baiklah sobat blogger untuk tampilannya kurang lebih seperti pada gambar dibawah ini :

VIEW A DEMO

Untuk Tutorial cara penerapannya sebagai berikut :

1. Seperti biasa sobat Login ke akun Blogger sobat
2. Kalau mau di tambah di side bar tinggal Add Widget lalu kopas kode dibawah ini
3. Kalau mau di tempatkan di Postingan atau Halaman  sobat tinggal klik Buat Entri Baru kemudian klik   HTML jangan Compose dan KOPAS koding di bawah ini :

 <style type="text/css">
table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%; 
}

.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;     
}

.bordered tr:hover {
    background: #93F193;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out; 
} 

.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left; 
}

.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -moz-linear-gradient(top, #ebf3fc, #88F188);
    background-image: -ms-linear-gradient(top, #ebf3fc, #08630E);
    background-image: -o-linear-gradient(top, #ebf3fc, #08630E);
    background-image: linear-gradient(top, #ebf3fc, #08630E);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;     
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}

.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
</style>

<table class="bordered">
<thead><tr>
 
<th> Judul Tabel 1 </th><th> Judul Tabel 2 </th><th> Judul Tabel 3 </th></tr></thead><tr>

<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>

<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>

<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr><tr>
<td> ISI TABEL 1</td><td> ISI TABEL 2 </td><td> ISI TABEL 3 </td></tr>
</table>  

Note :

Silakan Edit  Judul Tabel 1, 2 dan 3 dan ganti sesuai judul tabel sobat

Ganti isi Tabel 1, 2 dan 3, dengan isi tabel sobat.

Semoga artikel ini dapat membantu sobat blogger, jika ada pertanyaa silakan tinggalkan komentar terimakasih and happy blogging.

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post