Membuat Table dengan CSS

Contoh Table dengan CSS

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:

<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

Jika menggunakan internal atau eksternal CSS akan kelihatan 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 berikut kita akan menggunakan atribut class dengan nama baris-ganjil

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

Kita 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