Maret 30, 2012

Modifikasi Tampilan Tabel Dengan Css Tabel

Situseo Blog : 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.



Sebelumnya pernah saya postkan mengenai cara membuat sebuah tabel, tampilan tabel pada postingan tersebut akan menghasilkan tabel seperti yang dijelaskan pada postingan tersebut, berbeda dengan tampilan tabel seperti yang terlihat pada demo (jika kalian melihatnya), dengan menambahkan css tabel akan menghasilkan tampilan tabel yang seperti dalam demo, untuk membentuk tampilan seperti dalam demo, kalian bisa menambahkan kode css tabel dibawah ini dan letakan diatas kode ]]</b:skin>

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

Atau bisa juga css tabel tersebut disatukan penempatannya dengan kode tabel pada postingan dengan menambahkan kode :

<style type="text/css">
...css tabel
</style>

Coba kalian perhatikan warna pada isi tabel pada demo dan warna isi tabel pada contoh dibawah ini :



Kepala 1Kepala 2Kepala 3
Baris1 - Kolom1Baris1 - kolom2Baris1 - Kolom3
Baris2 - Kolom1Baris2 - kolom2Baris2 - Kolom3
Baris3 - Kolom1Baris3 - kolom2Baris3 - Kolom3
Baris4 - Kolom1Baris4 - kolom2Baris4 - Kolom3


Perbedaan yang terlihat adalah warna pada isi tebel (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 kedua contoh kode css tabel tersebut diatas, untuk memodifikasi tampilan tabel lebih sesuai dengan keinginan, kalian bisa modifikasi pada bagian css-nya dengan tambahan kode css yang sesuai tentunya.

Sedangkan untuk kode tabel standar yang saya pergunakan untuk contoh diatas adalah seperti berikut :

<table border="1" style="width: 400px;"><tbody>
<tr><th>Kepala 1</th><th>Kepala 2</th><th>Kepala 3</th></tr>
<tr><td>Baris1 - Kolom1</td><td>Baris1 - kolom2</td><td>Baris1 - Kolom3</td></tr>
<tr><td>Baris2 - Kolom1</td><td>Baris2 - kolom2</td><td>Baris2 - Kolom3</td></tr>
<tr><td>Baris3 - Kolom1</td><td>Baris3 - kolom2</td><td>Baris3 - Kolom3</td></tr>
<tr><td>Baris4 - Kolom1</td><td>Baris4 - kolom2</td><td>Baris4 - Kolom3</td></tr>
</tbody> </table>

untuk lebih jelas mengenai cara pembuatan tabel, kalian bisa membaca caranya pada post "Cara Membuat Tabel" link aktif ada pada alenia 2.

Semoga bermanfaat,

15 Diskusi untuk Modifikasi Tampilan Tabel Dengan Css Tabel

30 Maret 2012 14.54  

Bagus juga nich...

3 April 2012 02.31  

boleh juga nih mas dalang,, langsung di terapkan,,
btw cara bikin menu follow me, recent post, random post, sama apa kata mereka ga di share ya mas,,
kalau boleh sih request itu menu apa nama ny .. :D

3 April 2012 14.39  

@angga.jacxx sudah di postingkan, search melalui search box vertical tab view

3 April 2012 15.27  

@Mas Dalang ok lah mas dalang, TKP langsung,, :)

27 April 2012 17.32  

keren nie trik nya

6 Mei 2012 08.33  

makasih info dan tutorialnya... sangat bermanfaat :D

9 Mei 2012 17.33  

Great Web :)

17 September 2012 16.11  

terima kasih atas tutornya, akhirnya keren juga tampilan tabelnya...

18 September 2012 18.27  

keren mas yang kedua mas hasilnya tampilan nya cocok pas bgt m blog saya jd gk perlu di edit-edit lagi. thx mas :)

Keren banget tabelnya, mas...cuma, kok saya masih bingung ya?
Makasih dah sharing :)

Salam kenal dari Direktori Penerjemah Indonesia - Media Promosi Online dan Kirim Artikel Terjemahan Gratis!

15 Oktober 2012 05.24  

thanks ya gan :D
membantu bgt waktu ane kepepet :p
nice tutorial ^_^

4 Januari 2013 12.53  

makasih gan :) sangat membantu untuk newbie seperti saya :v

mohon kunjungan baliknya ^_^
fharhiyedh.blogspot.com

4 Juli 2013 16.52  

mas, saya minta tolong sekali, gmn caranya membuat tombol-tombol di bagian tas pada halaman blog seperti pada halaman beranda secara berurutan seperti BARANDA KESEHATAN OLAHRAGA dst. Mohon sekali penjelasannya. Tolong lewat email Okeeeoke@gmail.com. Terima kasih sebelumnya mas.

16 Oktober 2014 17.39  

makasih gan akhir nya bisa juga, kalau sudah pasang table css nya,kerennn

19 Oktober 2017 09.35  

terima kasih and matur nuwun.
www.JavaneseTrans.com

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top