Membuat Table dengan CSS

Sabtu, 07 Desember 2013

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

1 komentar:

Andrian Antonius13 Maret 2020 pukul 08.02
Terimakasih kak atas blog nya sangat memabantu saya dalam memahami html table dengan menerapkan css.saya mau berataya kak apa bisa coding html dan css di pisah jadi dua coding kak? Dan terus berkarya kak.
Perkenalkan nama saya : Andrian Antonius Nim sya : 1922500215 web kampus saya : https://www.atmaluhur.ac.id/
BalasHapus
Balasan

Tambahkan komentar