Home » » Cara Membuat Table Sederhana Menggunakan CSS

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


Demo


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 dalam sebuah komputer 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. ???

Cara Membuat Table Sederhana Menggunakan CSSCara Membuat Table HTML -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>

1 komentar:

  1. mantabss gan pantesan tadi nya saya ga bisa2 ternyata pake css dulu, maksih tutor nya gan

    BalasHapus

Advertisement