Selasa, 15 Januari 2013

Membuat Table Sederhana Menggunakan CSS

0 komentar

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.
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 TableHeader Table
kiri 1kanan 1
kiri 2kanan 2
kiri 3kanan 3
kiri 4kanan 4
kiri 5kanan 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 1kanan 1
kanan 2
kiri 2kanan 3
kanan 4
kiri 3 kanan 5
kanan 6
kiri 4kanan 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

Leave a Reply

Labels

 
Rovid's Tutorial © 2011 DheTemplate.com & Main Blogger. Supported by Makeityourring Diamond Engagement Rings

You can add link or short description here