Membuat Table dengan CSS

Bagi anda yang merasa malas mengetik tag tabel html ketika membuat website, terkadang lebih suka untuk mencari template table sehingga anda dapat langsung membuat tabel html dengan lebih cepat. Selain lebih mudah, anda juga dapat mencari CSS yang sudah fix sehingga anda tidak perlu menuliskan code CSS dari awal. Hal tersebut tentu saja akan mempercepat proses anda untuk membuat website.

Berikut adalah contoh tabel dengan menggunakan atribut style. Style "margin:0 auto" di dalam tag <table> dibawah adalah untuk membuat posisi tabel tersebut agar berada pada tengah dokumen, width adalah lebar dari tabel, dalam contoh adalah 80% berarti lebar dari tabel tersebut adalah 80% dari lebar jendela browser kita.

Kode HTML dan Ramuan CSS kita:

<table style="margin:0 auto;width:80%;border-collapse:collapse;background:#ecf3eb"> <caption><h3> Contoh Tabel dengan CSS</h3> </caption> <tr> <th style="border:1px solid #999;padding:8px 0;background: #0cf;">Header Kolom 1</th> <th style="border:1px solid #999;padding:8px 0;background: #0cf;">Header Kolom 2</th> <th style="border:1px solid #999;padding:8px 0;background: #0cf;">Header Kolom 3</th> </tr> <tr> <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td> <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td> <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td> </tr> <tr> <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td> <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td> <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td> </tr> </table>

 Hasilnya seperti terlihat disini.

Contoh Tabel dengan CSS

Header Kolom 1	Header Kolom 2	Header Kolom 3
Data Cell	Data Cell	Data Cell
Data Cell	Data Cell	Data Cell