Codingku

Cara Mengatur Tampilan Tabel dengan CSS

Akhlis akhlis

Tabel sering digunakan pada website untuk menampilkan data yang terstruktur sehingga mudah dipahami oleh pembaca.

Misalnya untuk menampilkan daftar brand smartphone beserta tipe, harga, dan spesifikasinya.

Untuk membuat tabel, silahkan ikuti tutorial cara membuat tabel di HTML.

Selanjutnya kamu bisa mengatur tampilan tabel dengan menggunakan CSS seperti pada panduan berikut.

Isi Konten

Membuat Border pada Tabel dengan CSS

Border pada tabel HTML bisa dibuat dengan 2 cara, yaitu:

  • Dengan menambahkan atribut border pada tag <table>.
  • Dengan menggunakan property CSS border.

Untuk cara yang pertama sudah dijelaskan pada tutorial cara membuat tabel di HTML.

Sedangkan untuk cara yang kedua, kamu bisa membuat border pada tabel dengan memberi properti CSS pada masing-masing tag table, th, dan td.

Pada properti border tersebut kamu bisa memberinya nilai angka dengan satuan pixel, em, rem, dll.

table, th, td {
    border: 1px solid orange;
}

Agar lebih jelas mengenai properti border, kamu bisa pelajari dulu materi tentang cara membuat border dengan CSS.

Contoh Tabel HTML sebelum diberi style:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Border dengan CSS pada Tabel</title>
    <style>
        /* beri style tabel disini */
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Judul Kolom 1</th>
            <th>Judul Kolom 2</th>
            <th>Judul Kolom 3</th>
        </tr>
        <tr>
            <td>Baris 1, Kolom 1</td>
            <td>Baris 1, Kolom 2</td>
            <td>Baris 1, Kolom 3</td>
        </tr>
        <tr>
            <td>Baris 2, Kolom 1</td>
            <td>Baris 2, Kolom 2</td>
            <td>Baris 2, Kolom 3</td>
        </tr>
        <tr>
            <td>Baris 3, Kolom 1</td>
            <td>Baris 3, Kolom 2</td>
            <td>Baris 3, Kolom 3</td>
        </tr>
    </table>
</body>

</html>

Ini tampilannya di browser Chrome

tabel tanpa border CSS

Pada contoh di atas, tabel tidak memiliki border karena belum diberi style.

Sekarang mari kita beri style berikut:

<style>
    /* beri style tabel disini */
    table, 
    th, 
    td {
        border: 1px solid orange;
    }
</style>

Dan ini hasil akhirnya di browser Chrome:

Membuat border pada tabel dengan CSS

Coba perhatikan tabel pada contoh di atas!

Tabel di atas memiliki border ganda karena kedua elemen table dan td sama-sama memiliki border yang terpisah.

Lalu bagaimana cara menggabungkan border tersebut menjadi satu?

Ikuti panduan berikut:

Menghilangkan Jarak Tabel atau Menggabungkan Border Tabel

Secara default, kolom tabel yang berdekatan akan memiliki batas yang berbeda. Sehingga tampilan border seolah-olah terlihat ganda (double border).

Untuk menghilangkan jarak antar kolom tabel ini, kamu bisa menggunakan properti CSS border-collapse: collapse;

Dengan properti CSS ini, border tabel akan terlihat menyatu.

Sekarang mari kita ubah style pada contoh di atas dengan kode berikut:

<style>
    /* beri style tabel disini */
    table {
        border-collapse: collapse;
    }

    table, 
    th, 
    td {
        border: 1px solid orange;
    }
</style>

Dan ini hasilnya di browser Chrome

Menggabungkan border tabel dengan CSS

Jika kamu ingin menampilkan border pada tabel luarnya saja, maka yang perlu diberi style border hanya pada tag table.

<style>
    /* beri style tabel disini */
    table {
        border: 1px solid orange;
    }
</style>

Tampilan di browser Chrome

Border hanya pada tabel luar

Mengatur Lebar dan Tinggi Tabel

Lebar dan tinggi tabel HTML ditentukan menggunakan properti CSS width dan height.

Sekarang kita akan mengubah lebar tabel pada contoh di atas menjadi 100%, dan tinggi elemen <th> 50px.

table {
  width: 100%;
}

th {
  height: 50px;
}

Jadi seperti ini style lengkapnya:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th {
        height: 50px;
    }

    th,
    td {
        border: 1px solid orange;
    }
</style>

Dan ini hasilnya di browser Chrome

Mengatur lebar dan tinggi tabel

Mengatur Rata Teks Tabel secara Horizontal

Untuk mengatur rata teks tabel secara horizontal seperti rata teks kanan, kiri, dan tengah, kamu bisa menggunakan properti CSS text-align pada tag <th> atau <td>.

Secara default, konten elemen <th> memiliki rata teks tengah. Dan konten elemen <td> memiliki rata teks kiri.

Pada contoh berikut, saya mengatur rata teks judul menjadi rata kiri:

th {
  text-align: left;
}

Jadi seperti ini style lengkapnya:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th {
        height: 50px;
        text-align: left;
    }

    th,
    td {
        border: 1px solid orange;
    }
</style>

Dan ini hasilnya di browser Chrome

Mengatur rata teks tabel

Mengatur Posisi Konten Tabel secara Vertikal

Untuk mengatur posisi konten tabel secara vertikal seperti posisi atas, bawah, atau tengah, kamu bisa menggunakan properti CSS vertical-align pada tag <th> atau <td>.

Secara default, posisi konten tabel berada di tengah untuk kedua elemen <th> atau <td>.

Pada contoh berikut, saya akan mengatur teks ke posisi bawah pada elemen <td>:

td {
  height: 50px;
  vertical-align: bottom;
}

Jadi seperti ini style lengkapnya:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        border: 1px solid orange;
    }

    td {
        height: 50px;
        vertical-align: bottom;
    }
</style>

Dan ini tampilannya di browser Chrome

Mengatur posisi konten tabel secara vertikal

Mengatur Padding Tabel dengan CSS

Padding tabel merupakan jarak dari border sisi dalam tabel dengan konten/teks tabel.

Agar lebih paham mengenai padding, silakan pelajari dulu referensi properti CSS padding

Untuk mengatur padding tabel, kamu bisa menggunakan properti CSS padding.

Misalnya, untuk mengatur padding kolom tabel menjadi 10 pixel, tambahkan property CSS padding: 10px; pada style sheet.

th,
td {
    padding: 10px;
}

Jadi seperti ini style lengkapnya:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        border: 1px solid orange;
        padding: 10px;
    }
</style>

Dan ini tampilannya di browser Chrome

Mengatur padding tabel dengan CSS

Mengatur Border Bawah Tabel

Untuk membuat border bawah pada tabel, kamu bisa menggunakan properti CSS border-bottom pada tag <th> dan <td>.

th, td {
  border-bottom: 1px solid #ddd;
}

Jadi seperti ini style lengkapnya:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        border-bottom: 1px solid #ddd;
        padding: 10px;
        text-align: left;
    }
</style>

Dan ini tampilannya di browser Chrome

Mengatur border bawah tabel dengan CSS

Membuat Efek Hover Tabel

Untuk membuat efek hover pada tabel, kamu bisa menggunakan selector :hover pada tag <tr>.

tr:hover {background-color: #f5f5f5;}
Contoh:

Membuat Efek Striped atau Belang pada Tabel

Untuk membuat efek striped atau belang seperti zebra pada tabel, kamu bisa menggunakan selector nth-child() dan menambahkan background-color pada semua baris tabel.

tr:nth-child(even) {background-color: #f2f2f2;}
Contoh:

Membuat Background Warna pada Tabel

Untuk membuat background warna pada tabel, kamu bisa menggunakan properti background-color.

Pada contoh berikut, saya akan memberi background warna pada tabel judul.

th {
  background-color: #4CAF50;
  color: white;
}

Seperti ini style lengkapnya:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th {
        background-color: #4CAF50;
        color: white;
    }

    th, td {
        text-align: left;
        padding: 10px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>

Dan ini tampilannya di browser Chrome

Membuat background warna pada tabel dengan CSS

Membuat Tabel Responsive

Untuk membuat tabel yang responsive, caranya tambahkan elemen container (seperti <div>) dengan properti CSS overflow-x: auto diluar elemen <table>.

Pada tabel responsive akan muncul scroll bar secara horizontal jika screen lebih kecil daripada konten tabel.

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Contoh: