Script membuat table sederhana dengan css

Script membuat table sederhana dengan css - sobat blogger, kali ini v-datoe blog akan sedikit mengulas artikel berkaitan dengan tutorial membuat table sederhana dengan css, dimana script css table yang saya share ini bersumber dari salah satu blogger tanah air, ia adalah blog koderator yang saya temui ketika sedang blogwalking, tutorial ini sangat mudah dimengerti karena tahap pembuatan table dengan css ini tidak terlalu sulit tetapi hasilnya cukup bagus dan menarik perhatian banyak orang khususnya blogger, dan kalau menurut saya tutorial membuat table dengan css ini sangat bagus untuk di sharing ulang, karena kemungkinan banyak blogger lain yang membutuhkannya, dan baiklah tanpa berlarut-larut mari simak script css-nya.

Kode CSS 1

/* 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 }

Cara pemasangan / peletakkan kode css ini ke dalam template html blog, yaitu tepat diatas tag ]]></b:skin> dan untuk melihat hasilnya silahkan sobat buatkan postingan daftar isi dan buatkan table didalamnya. dan beberapa contoh table style yang menggunakan css bisa dilihat di bawah ini.

Kode CSS 1

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

Hasil CSS 1

Header Table	Header Table
kiri 1	kanan 1
kiri 2	kanan 2
kiri 3	kanan 3
kiri 4	kanan 4
kiri 5	kanan 5

Kode CSS 2

<table border="1" class="full config"><tbody>
<tr><th>Header 1 </th><th>Header 2 </th></tr>
<tr><td rowspan="2">kiri 1</td><td>kanan 1</td></tr>
<tr><td>kanan 2</td></tr>
<tr><td rowspan="2">kiri 2</td><td>kanan 3</td></tr>
<tr><td>kanan 4</td></tr>
<tr><td rowspan="2">kiri 3 </td><td>kanan 5</td></tr>
<tr><td>kanan 6</td></tr>
<tr><td rowspan="2">kiri 4</td><td>kanan 7</td></tr>
<tr><td>kanan 8</td></tr>
</tbody></table>

Hasil CSS 2

Header 1	Header 2
kiri 1	kanan 1
	kanan 2
kiri 2	kanan 3
	kanan 4
kiri 3	kanan 5
	kanan 6
kiri 4	kanan 7
	kanan 8

Kedua hasil css diatas menunjukkan hasil dari kode css yang telah kita pasang sebelumnya dalam kode template html blog / website kita, dan selanjutnya yang perlu diperhatikan dalam tahap pembuatan table ini adalah script pemanggilan css class="full config" , dimana kode inilah yang membuat table terlihat seperti yang kita inginkan.

Tulisan Lainnya :
Cara memasang widget lintas.me dalam blog | V-datoe
Cara mudah menyembunyikan file dikomputer | V-datoe
Cara kirim link ke digg | V-datoe
Script membuat table sederhana dengan css | V-datoe