Cara Mengatur Design Tabel dengan 5 Properti Dasar pada CSS

All Table Properties atau sekumpulan dari beberapa properti css yang secara spesifik lebih sering digunakan untuk mengatur tampilan dari elemen tabel(<table>) pada html.

Secara default, tampilan awal dari elemen tabel sebelum diberi style akan biasa saja, hanya terlihat teks biasa dan tampak menyatu dengan elemen-elemen lainnya seperti paragraf, dsb.

Dengan adanya beberapa properti khusus untuk mengatur tampilan tabel, Anda bisa membuat tampilan tersebut menjadi lebih hidup, sehingga pembaca bisa memahami dan membedakan bahwa yang sedang dibaca adalah sebuah tabel dan bukan elemen-elemen lain.

Artikel ini membahas contoh penggunaan dari beberapa properti css yang secara spesifik digunakan untuk mengatur tampilan tabel sederhana, seperti properti border, border-collapse, table-layout, dan lain sebagainya. berikut pembahasannya.

Daftar isi

1. properti border css

properti border digunakan untuk mengatur garis tepi pada suatu elemen secara keseluruhan. Artinya, penggunaan dari properti border akan menghasilkan efek berupa garis tepi yang terlihat pada elemen yang diberi style border.

sebagai contoh coba perhatikan gambar tabel dibawah ini. gambar dibawah ini sengaja dibuat secara default menggunakan elemen table(html) tanpa di beri style css berupa properti border.

tampilan tabel html sebelum diberi style css
Gambar 1

Setelah itu, coba bandingkan dengan gambar kedua dibawah ini. gambar berikut dibuat dengan tambahan style css berupa properti border.

gambar tampilan table dengan css border
Gambar 1.2
Terlihat perbedaannya bukan?. Nah, berikut adalah contoh kode css untuk membuat tabel terlihat seperti gambar diatas.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Tampilan tabel dengan properti border css </title>
        <style>
            table,tr,td{
                border: 1px solid black;
            }
        </style>
    </head>

    <body>
        <table>
            <tr><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th><th>Jabatan</th><th>Golongan Darah</th></tr>
            <tr><td>Arjuna</td><td>Batavia</td><td>Laki-Laki</td><td>Anak</td><td>B</td></tr>
            <tr><td>Batara Wisnu</td><td>Medang Kamulan</td><td>Laki-Laki</td><td>Dewa</td><td>A</td></tr>
            <tr><td>batara Guru</td><td>Dunia Fantasi</td><td>Laki-Laki</td><td>Dewa</td><td>A</td></tr>
            <tr><td>Dewi Ratih</td><td>Dunia Maya</td><td>Perempuan</td><td>Selir</td><td>O</td></tr>
            <tr><td>Indraprasta</td><td>Gelang-Gelang</td><td>Laki-Laki</td><td>Anak</td><td>AB</td></tr>
        </table>
    </body>

</html>

2. border-spacing

Properti border-spacing bisa Anda gunakan untuk mengatur spasi atau pembatas antar sel yang ada didalam elemen tabel. Lalu, darimana asalnya pembatas sel tersebut?. Secara deault, sebenarnya terdapat pembatas antara sel satu dengan sel yang lainnya pada tabel. Nah, pembatas sel tersebut bisa Anda tentukan ukurannya menggunakan properti border-spacing.

contoh kode/program/sintaks css
table,tr,td{
    border: 1px solid black;
    border-spacing: 7px;
}

contoh kode diatas adalah kelanjutan dari contoh kode pada pembahasan No 1. Jadi, contoh diatas tidak ditulis lengkap beserta dengan elemen tabel-nya, hanya berisi contoh kode CSS saja. berikut hasilnya pada halaman web.

tampilan tabel dengan style border dan border-spacing
Gambar 2

Nah, dari gambar diatas akan terlihat spasi diantara sel satu dengan sel sel yang lainnya. Spasi tersebut bias anda atur sesuai kebutuhan dengan menggunakan border-spacing.

3. border-collapse

border-collapse adalah properti css yang digunakan untuk menentukan apakah garis pada pembatas antar sel akan diciutkan menjadi satu garis atau tidak. Artinya, pembatas sel bisa dihilangkan menggunakan properti tersebut.

border-collapse memiliki 2 nilai utama yaitu separate dan collapse. separate berfungsi untuk membuat pembatas sel/table menjadi terlihat.

Sedangkan nilai collapse berfungsi untuk menghilangkan pembatas sel. Penggunaan nilai collapse tersebut tidak cocok, jika digunakan bersamaan dengan properti border-spacing. berikut contoh kodenya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Tampilan tabel dengan properti border css </title>
        <style>
            table,tr,td{
                border: 1px solid black;
            }
            .tabel-1{ 
                width: 500px;
                border-collapse: separate;
            }
            .tabel-2{ 
                width: 500px;
                border-collapse: collapse;
            }
        </style>
    </head>

    <body>
        <table class="tabel-1">
            <caption>Tabel 1 : border-collapse dengan nilai SEPARATE</caption>
            <tr><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th></tr>
            <tr><td>Arjuna</td><td>Batavia</td><td>Laki-Laki</td></tr>
            <tr><td>Batara Wisnu</td><td>Medang Kamulan</td><td>Laki-Laki</td></tr>
            <tr><td>batara Guru</td><td>Dunia Fantasi</td><td>Laki-Laki</td></tr>
        </table>
        <table class="tabel-2">
            <caption>Tabel 2 : border-collapse dengan nilai COLLAPSE</caption>
            <tr><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th></tr>
            <tr><td>Arjuna</td><td>Batavia</td><td>Laki-Laki</td></tr>
            <tr><td>Batara Wisnu</td><td>Medang Kamulan</td><td>Laki-Laki</td></tr>
            <tr><td>batara Guru</td><td>Dunia Fantasi</td><td>Laki-Laki</td></tr>
        </table>
    </body>

</html>

hasil dari contoh kode diatas akan menghasilkan 2 buah tabel, tabel pertama diatur dengan nilai separate, dan tabel kedua dengan nilai collapse. berikut screenshot hasilnya pada halaman web.

contoh properti border-collapse pada tampilan tabel
Gambar 3

4. caption-side

Jika anda menambahkan tag <caption> pada elemen tabel, maka Anda bisa mengatur posisi dari caption tersebut apakah mau ditampilkan diatas tabel atau dibawah tabel.

Properti caption-side memiliki 2 nilai utama yaitu top dan bottom, nilai top untuk membuat caption berada diatas tabel.

Sedangkan nilai bottom membuat caption berada dibawah tabel. berikut contoh kode css untuk properti caption-side dengan nilai top dan bottom.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Tampilan tabel dengan properti border css </title>
        <style>
            table,tr,td{
                border: 1px solid black;
            }
            .tabel-1{ 
                border-collapse: collapse;
                caption-side: top;
            }
            .tabel-2{
                border-collapse: collapse;
                caption-side: bottom;
            }
        </style>
    </head>

    <body>
        <table class="tabel-1">
            <caption>Tabel 1 : caption diatas</caption>
            <tr><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th></tr>
            <tr><td>Arjuna</td><td>Batavia</td><td>Laki-Laki</td></tr>
            <tr><td>Batara Wisnu</td><td>Medang Kamulan</td><td>Laki-Laki</td></tr>
            <tr><td>batara Guru</td><td>Dunia Fantasi</td><td>Laki-Laki</td></tr>
        </table>
        <table class="tabel-2">
            <caption>Tabel 2 : caption dibawah</caption>
            <tr><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th></tr>
            <tr><td>Arjuna</td><td>Batavia</td><td>Laki-Laki</td></tr>
            <tr><td>Batara Wisnu</td><td>Medang Kamulan</td><td>Laki-Laki</td></tr>
            <tr><td>batara Guru</td><td>Dunia Fantasi</td><td>Laki-Laki</td></tr>
        </table>
    </body>

</html>

langsung saja, berikut hasil dari contoh kode diatas jika ditampilkan pada halaman web.

contoh properti caption-side pada tampilan tabel
Gambar 4

5. table-layout

table-layout bisa Anda gunakan untuk mengatur tata letak tabel. Artinya, penggunaan table-layout akan mengatur tata letak keseluruhan termasuk sel, baris, dan kolom pada tabel.

terdapat 2 nilai utama untuk properti table-layout yaitu nilai fixed dan auto. Nilai fixed membuat tata letak tabel menjadi tetap, misalkan ukuran untuk lebar kolom akan sama dengan kolom lainnya.

Sedangkan nilai auto akan membuat tata letak tabel otomatis. Misalkan ukuran untuk lebar kolom akan otomatis menyesuaikan banyaknya isi kolom. Coba perhatikan gambar dibawah ini, terdapat 2 tabel yang diatur dengan nilai fixed dan auto.

contoh properti table-layout pada tampilan tabel
Gambar 5

Pada tabel pertama, ukuran untuk lebar kolom disebelah kiri dengan kanan sama. Sedangkan pada tabel kedua berbeda karena menyesuaikan isi dari kolomnya. dibawah ini contoh kodenya untuk membuat tampilan seperti gambar diatas.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Tampilan tabel dengan properti border css </title>
        <style>
            table,tr,td{
                border: 1px solid black;
            }
            .tabel-1{ 
                border-collapse: collapse;
                caption-side: top;
                width: 500px;
                table-layout: fixed;
            }
            .tabel-2{
                border-collapse: collapse;
                caption-side: top;
                width: 500px;
                table-layout: auto;
            }
        </style>
    </head>

    <body>
        <table class="tabel-1">
            <caption>Tabel 1 : table-layout dengan nilai FIXED</caption>
            <tr><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th></tr>
            <tr><td>Arjuna</td><td>Batavia</td><td>Laki-Laki</td></tr>
            <tr><td>Batara Wisnu</td><td>Medang Kamulan</td><td>Laki-Laki</td></tr>
            <tr><td>batara Guru</td><td>Dunia Fantasi</td><td>Laki-Laki</td></tr>
        </table>
        <table class="tabel-2">
            <caption>Tabel 2 : table-layout dengan nilai AUTO</caption>
            <tr><th>Nama</th><th>Alamat</th><th>Jenis Kelamin</th></tr>
            <tr><td>Arjuna</td><td>Batavia</td><td>Laki-Laki</td></tr>
            <tr><td>Batara Wisnu</td><td>Medang Kamulan</td><td>Laki-Laki</td></tr>
            <tr><td>batara Guru</td><td>Dunia Fantasi</td><td>Laki-Laki</td></tr>
        </table>
    </body>

</html>

6. Kesimpulan

dari ke-5 properti diatas(pada pembahasan No 1-5), ke-5 properti tersebut hanya properti dasar saja, yang sering digunakan untuk mengatur elemen tabel. Anda bisa mengkombinasikan dan menambahkan properti lain seperti properti color, background, padding, dsb, sehingga diharapkan design untuk tampilan tabel akan menjadi lebih berwarna.