Posted by : [H] - Hades Minggu, 13 Januari 2013

Pada kesempatan kali ini saya akan share sedikit tutorial mengenai cara membuat table menggunakan CSS + HTML. Sebenarnya untuk membuat sebuah table, baik yang sederhana atau yang kompleks sekalipun cukup menggunakan HTML saja sudah bisa.
Dengan menambahkan css tabel pada template atau pada postingan akan membuat tampilan tabel menjadi lebih menarik dan cantik pada segi tampilan warna, bentuk dan teks-nya, tampilan standar tabel hanya menampilkan bentuk baris dan kolom serta ditambah pembatas seperti garis, pada dasarnya css tabel tetap mengacu pada tampilan tabel standar, tapi dengan penambahan css tabel akan memberi tampilan yang berbeda dan lebih bagus tentunya.

Tak perlu banyak kata lagi, mendingan langsung saja simak tutorial cara membuat table menggunakan CSS + HTML berikut ini dengan baik!


table[border="1"] {border-collapse:collapse;font:normal 12px Verdana,Arial,Sans-Serif;color:#333;}
table[border="1"] tr {background:#F0F0F0;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:2px solid #fff;}
table[border="1"] tr:nth-child(even) {background:#DEDEDE;}
table[border="1"] th {background:#4A6D67;border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px;color:#fff;font-weight:bold;}


Script CSS di atas fungsinya untuk merapikan, memperindah, ataupun mengatur design tampilan dari table yang akan di buat. Nahhh, setelah itu tinggal kita buat struktur table yang kita inginkan menggunakan HTML. Perhatikan script HTML berikut ini!
<table border="1">
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
    <tr>
        <th>Header Kolom 1</th>
        <th>Header Kolom 2</th>
        <th>Header Kolom 3</th>
    </tr>
    <tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>

    </tr>
    <tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>

    </tr>
</table>

berikut tampilannya :


Di bawah ini masih ada beberapa css untuk tabel.
table[border="1"] {border-collapse:collapse;font:normal 12px Verdana,Arial,Sans-Serif;color:#333;}
table[border="1"] tr {background:#F0F0F0;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:2px solid #fff;}
table[border="1"] tr:nth-child(even) {background:#DEDEDE;}
table[border="1"] th {background:#4A6D67;border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px;color:#fff;font-weight:bold;}


Tampilannya :
 

Selanjutnya dengan CSS :
table[border="1"]{border-collapse:collapse;margin:0px;}
table[border="1"],table[border="1"] th,table[border="1"] td{border:1px solid #ccc;padding:2px 7px;}
td{vertical-align:top;}
table[border="1"] th{background-color:#343434;text-align:center;text-color:#FFFFFF;}
table th {color: #FFF;}

Dan tampilannya :


Terakhir CSS nya ada yang berbeda :

Perbedaannya adalah warna pada isi tabel (bukan kepala) pada demo adalah baris pertama mempunyai warna yang lebih tua dibandingan warna dibawahnya dan seterusnya secara horizontal, berbeda dengan contoh diatas perbedaan warna isi tabel secara vertical, untuk membuat tampilan warna isi tabel berbeda secara vertical, kode css-nya seperti ini :
table[border="1"] {border-collapse:collapse;font:normal 12px Verdana,Arial,Sans-Serif;color:#333;}
table[border="1"] tr {background:#F0F0F0;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:2px solid #fff;}
table[border="1"] td:nth-child(odd) {background:#DEDEDE;}
table[border="1"] th {background:#4A6D67;border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px;color:#fff;font-weight:bold;}

Kalian bisa menemukan perbedaan dari semua contoh kode css tabel diatas, untuk memodifikasi tampilan tabel lebih sesuai dengan keinginan, kalian bisa modifikasi pada bagian css-nya dengan tambahan kode css yang sesuai tentunya.
Terimakasih, dan sekian :)

Leave a Reply

Sebelum berkomentar, ada baiknya baca ini dulu :
1. Bahasa sopan dan dapat dimengerti oleh Pengguna dan tentunya No Spam ! :)
2. Mohon maaf apabila penulis telat menjawab pertanyaan Anda.
3. Anda juga bisa menanyakan hal yang berkaitan dengan postingan pada halaman Chat Rooms. Terimakasih.

Subscribe to Posts | Subscribe to Comments

Hades Deceptions

Popular Post

Categories

Visitors

Free counters!
Diberdayakan oleh Blogger.

Copyright © 2012 - Hades Deceptions Blog | Supported by Google | Thanks for Johanes Djogan and Blogger Indonesia