Membuat Table Menggunakan CSS

Membuat Table Mengunakan CSS | Kali ini Wammy, akan berbagi tentang tabel dan masih seputar CSS. Sebelumnya aku juga telah berbagi mengenai membuat Link List Super Keren.

Tabel ini tidak asing dengan MS Excel. Contoh penggunaan tabel ini bisa klik disini. Dan lihat didalam artikelnya. Jika blog sobat berisi banyak artikel yang mencankup IPA, cara ini bisa digunakan untuk mempermudah pembaca.

1. Langsung aja masuk di Template, kemudian centang Expand Template Widget

2. Cari kode ]]></b:skin> letakkan diatasnya..

/* Table
----------------------------------------------- */
table[border="1"]{
border-collapse:collapse;margin:0px
}
table[border="1"],table[border="1"] th,table[border="1"] td{
border:1px solid #bbb;padding:2px 7px
}
td{
vertical-align:top
}
table[border="1"] th{
background-color:#fafafa;font-weight:700;text-align:left
}
.full,table.full{
width:98.8%
}
table.config{
background-color:#FFF
}
table.config td,table.config th{
border-color:#E4E4E4
}
table.config th{
background-color:#333;color:white
}

3. Setelah memasukan kode CSS, kemudian masukan kode dibawah ini di dalam posting anda, tepatnya di HTML.

<table border="1" class="full config"><tbody>
<tr><th>Header Table</th><th>Header Table</th></tr>

<tr><td>kiri 1</td><td>kanan 1</td></tr>
<tr><td>kiri 2</td><td>kanan 2</td></tr>
<tr><td>kiri 3</td><td>kanan 3</td></tr>
<tr><td>kiri 4</td><td>kanan 4</td></tr>
<tr><td>kiri 5</td><td>kanan 5</td></tr>
</tbody></table>

4. Simpan.