Tabel HTML Dengan CSS Keren

Element Tabel HTML - Tabel adalah salah satu element dalam bahasa pemograman HTML. Tabel ini sering digunakan untuk membuat daftar murid / siswa oleh guru. Selain itu tabel juga berfungsi sebagai diagram yang menunjukan data dengan nilai atau frekuensi tententu. Tabel dapat anda buat pada software aplikasi Microsoft Excel, Namun anda juga bisa menampilkan atau membuat tabel ini pada blog atau website yang menggunakan bahasa pemograman HTML.

Mengenal Struktur pada element Tabel HTML

Pada pembuatan dan penerapa element Tabel HTML ini anda wajib meletakan struktur pengkodeannya dengan sempurna, karena jika salah penempatan tentu akan mengubah hasil akhir dari tabel ini. Elemen Tabel HTML diawali dengan tag pembuka

<table>

dan ditutup dengan tag

</table>

Sehingga menjadi 

<table>

-------------------

</table>

Selanjutnya mengenal element <TR> (Tabel Row / Baris Tabel), element ini adalah element yang fungsinya menampilkan Baris. Semakin banyak elemen ini berarti semakin banyak baris yang di hasilkan. tag <TR> di awali dengan <TR> dan di akhiri dengan </TR>, Sehingga menjadi :

<TR>

-----------------

</TR>

Didalam tag TR terdapat tag TD

Tag TD ini berfungsi menampilkan data yang dimasukan atau diletakan didalam elemen TR, jadi jika kita ingin memasukan data pertama pada baris pertama jadinya :

Contoh :

<table>

<tr>

<td>Baris Pertama, Kolom Pertama</td>

</tr>

</table>

Hasil :

Jika anda ingin menambah jumlah baris, artinya anda harus menambahkan tag TR kembali menjadi dua.

Contoh :

<table>

<tr>

<td>Baris Pertama, Kolom Pertama</td>

</tr>

<tr>

<td>Baris Kedua, Kolom Pertama</td>

</tr>

</table>

Hasil :

Menambah jumlah Kolom menjadi 2

Jika anda ingin menambah jumlah kolom, anda harus menambahkan tag <TD>

Contoh :

<table>

<tr>

<td>Baris Pertama, Kolom Pertama</td>

<td>Baris Pertama, Kolom Kedua</td>

</tr>

<tr>

<td>Baris Kedua, Kolom Pertama</td>

</tr>

</table>

Hasil :

Sampai sini saya yakin anda sudah bisa membuat dan memahami struktur dasar Elemen HTML. namun setelah di coba, hasilnya berantakan, untuk itu mari kita beri garis pada setiap sisi tabel data yaitu dengan menambahkan attribute border. Berikutnya akan saya jelaskan tentang attribute Border pada tabel.

Tabel 1 baris, 1 kolom dengan 1 border

Contoh :

<table border="1">

<tr>

<td>Baris Pertama, Kolom Pertama</td>

</tr>

</table>

Hasil :

Tabel 2 baris, 1 kolom dengan 1 border

Contoh :

<table border="1">

<tr>

<td>Baris Pertama, Kolom Pertama</td>

</tr>

<tr>

<td>Baris Kedua, Kolom Pertama</td>

</tr>

</table>

Hasil :

Tabel 2 baris, 2 kolom dengan 1 border

Contoh :

<table border="1">

<tr>

<td>Baris Pertama, Kolom Pertama</td>

<td>Baris Pertama, Kolom Kedua</td>

</tr>

<tr>

<td>Baris Kedua, Kolom Pertama</td>

</tr>

</table>

Hasil :

Terlihat jelaskan perbedaannya Tabel yang memakai Border Dengan yang tidak.

Oh iya, ada tambahan. pada element table ini terdapat header tabel, yaitu judul tabel dengan tag <TH>

Menjadi

<table>
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
</tr>

<tr>
<td>Isi1</td>
<td>Isi2</td>
<td>Isi3</td>
</tr>

<tr>
<td>Isi1,1</td>
<td>Isi2,1</td>
<td>Isi3,1</td>
</tr>
</table>

Ditambah Border menjadi

<table border="1">
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
</tr>

<tr>
<td>Isi1</td>
<td>Isi2</td>
<td>Isi3</td>
</tr>

<tr>
<td>Isi1,1</td>
<td>Isi2,1</td>
<td>Isi3,1</td>
</tr>
</table>

Setelah anda mengerti dasar-dasar element Tabel pada HTML, sekarang kita akan langsung membuat Tabel HTML yang keren dengan menggunakan CSS

Membuat Tabel Keren 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