Membuat Table di Blog dengan Menggunakan CSS

Membuat Table dengan CSS pada Blog terkadang diperlukan, tujuannya agar tampilan tabel lebih menarik dan enak dipandang. Style margin:0 auto di dalam tag 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.

Berikut contoh table dengan CSS dengan menggunakan atribut style.

Kode HTML:

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

Hasil:

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

Anda juga dapat menggunakan internal atau eksternal CSS untuk membuatnya lebih simpel.

Kode CSS:

table{margin:0 auto;width:80%;border-collapse:collapse;background:#ecf3eb;}
caption h3{}
th, td{border:1px solid #999;}
th{padding:8px 0;background: #0cf;}
td{padding:4px 8px;}

Kode HTML:

<table>
<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>

Hasil:

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

Jika ingin membuat warna baris cell yang selang seling kita dapat menambahkan atribut "class" atau "id" di dalam tag <td>, dalam contoh:

<table>
<caption><h3>
Contoh Tabel dengan CSS</h3>
</caption>
    <tbody>
<tr>
        <th>Header Kolom 1</th>
        <th>Header Kolom 2</th>
        <th>Header Kolom 3</th>
    </tr>
<tr>
        <td class="baris-ganjil">Data Cell</td>
        <td class="baris-ganjil">Data Cell</td>
        <td class="baris-ganjil">Data Cell</td>
    </tr>
<tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>
    </tr>
<tr>
        <td class="baris-ganjil">Data Cell</td>
        <td class="baris-ganjil">Data Cell</td>
        <td class="baris-ganjil">Data Cell</td>
    </tr>
<tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>
    </tr>
</tbody></table>

Misalkan ita akan membuat background baris ganjil tersebut dengan warna putih maka di dalam CSS kita tambahkan:
.baris-ganjil{background:#fff;}

Maka hasilnya adalah sebagai berikut:

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
Data Cell	Data Cell	Data Cell
Data Cell	Data Cell	Data Cell

Sumber :http://htmlcssguides.com/samples/contoh-table-dengan-css.php