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 :

css, tabel, tabel css

css, tabe css, css table

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.

Berlangganan update artikel terbaru via email:

22 Responses to "Membuat Tabel Sederhana Dengan CSS"

  1. waw gampang nih.. bookmark dulu ^_^ .

    ReplyDelete
  2. Mantep soB. Saya bookmark dulu, siapa tau ntar kalau posting yang menggunakan tabel bisa kepakai. Kan lebih ringan juga kalau pakek css. hehe

    ReplyDelete
    Replies
    1. Silakan mas, terimakasih banyak atas kunjungannya.

      Delete
  3. met siang mas trmksih,ni mas trk dan infonya

    ReplyDelete
    Replies
    1. siang juga mas, terimakasih atas kunjungannya

      Delete
  4. wah manteb kang ane BM dulu yah :D

    ReplyDelete
  5. Replies
    1. silakan mas, terimakasih sudah berkenan hadir

      Delete
  6. mantep gan simpel juga bikinnya.
    thanks udah share

    ReplyDelete
  7. kunjungan siang kang sambil berteduh panas banget nih

    ReplyDelete
  8. kembali dengan tutorial .. kali ini cuma bisa nyimak aja neh kang

    ReplyDelete
  9. Untuk nambah kolom satu lagi gmn bro?

    ReplyDelete
    Replies
    1. Sobat tinggal nambahin kode
      <th> Judul Tabel 4 </th>
      DanMasukan ke ujung kode atau yang bertanda ttk-titik
      <th> Judul Tabel 1 </th><th> Judul Tabel 2 </th><th> Judul Tabel 3 </th>.........</tr></thead><tr>

      Untuk kolom isi tambahkan kode :
      <td> ISI TABEL 4 </td> sesudah kode <td> ISI TABEL 3 </td> semuanya tinggal nyesuain

      Delete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Saya memang belum tahu sobat soal tabel, tapi dengan tutorial ini sangat membantu sekali
    terima kasih atas tutorialnya yg sangat bermanfaat

    ReplyDelete
  12. Kunjungan malam,
    ternyata ada juga cara membuat tabel,
    BM dulu ah.

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel