Membuat Table Sederhana Menggunakan CSS

Membuat Table Sederhana Menggunakan CSS

Biasa menyelesaikan pekerjaan menggunakan Microsoft Office Exel? Mungkin yang biasa menggunakan OS Windows ataupun XP pasti tidak asing dengan software office tersebut dan tidak asing pula dengan yang namanya kotak kotak, ya kan? pasti iya. Tadi kita telah membahas CSS3 Animasi Button nah sekarang kita kembali ke tutorial Basic terlebih dahulu yah yang mudah-mudah aja, tutorial kali ini akan membahas tentang Table.

What is the Table? Table yaitu suatu molekul-molekul atom yang bersatu karena kesalahan genetik dan membentuk sudut siku-siku (90 derajat / suatu sudut yang dibangun oleh perputaran sebesar seperempat lingkaran) yang notabenya sudut adalah suatu besaran yang dibangun oleh sinar yang diputar dengan pusat perputaran suatu titik tertentu dari suatu posisi awal ke suatu posisi terminal, terminal sendiri bagi suatu OS seperti Linux bisa diuraikan bahwa terminal merupakan media yang sangat penting atau bisa disebut juga vital dan dari semua uraian tersebut bisa kita fahami bahwa Table itu adalah media yang sangat vital. ???

Setelah kita berbincang-bincang cukup singkat pada topik diatas mari kita sudahi saja dan berpindah ke tutorial, mari simak cara-caranya dibawah ini dan untuk kode CSS letakkan diatas ]]></b:skin>

CSS

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

Style 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

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

Style 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

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

Sumber : http://koderator.blogspot.com/2012/07/membuat-table-sederhana-menggunakan-css.html