Mudah! Cara Desain Tabel dengan CSS

Halo semuanya, pada tutorial kali ini badoystudio akan membahas bagaimana cara mendesain tabel yang sudah dibuat dengan HTML menggunakan CSS. Ingin tahu selengkapnya seperti apa? Simak melalui ulasan berikut ini.

Daftar Isi

Inilah Cara Mudah Mendesain Tabel dengan CSS

Langsung saja tanpa panjang lebar mari kita bahas bagaimana cara desain tabel HTML menggunakan CSS.

Buka Text Editor Lalu Tulis Element HTML

Langkah pertama yaitu silahkan kamu buat tabel menggunakan dengan element-element HTML pembuatan tabel pada text editor yang sudah terinstall dan sering kamu gunakan untuk belajar pemrograman.

Pada tutorial ini saya menggunakan text editor VS Code. Berikut kode – kode HTML dasar untuk membuat Tabel, kemudian saya simpan dengan nama file table.html.

<!DOCTYPE html>

<html>
    <head>
        <title>Desain Tabel dengan CSS</title>
       
    </head>

       <body>
        <h1> Desain Tabel dengan CSS</h1>

        <table class="content-table">
            <thead>
                <tr>
                    <th>Nomor </th>
                    <th>Nama Mahasiswa</th>
                    <th>Jurusan </th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>Ayu Daini</td>
                    <td>Sistem Informasi</td>
                </tr>

                <tr>
                    <td>2</td>
                    <td>Islahudin</td>
                    <td>Teknik Informatika</td>
                </tr>

                <tr>
                    <td>3</td>
                    <td>Gufron Hasan</td>
                    <td>Teknik Informatika</td>
                </tr>

            </tbody>

        </table>
      </body>

</html>

Kita bisa lihat langsung hasilnya pada browser seperti apa, kurang lebih seperti gambar berikut ini :

Di mana tabel yang dibuat belum terlihat seperti tabel karena tidak ada garisnya. Jadi, masih sangat sederhana.

Oiya, di sini kita tidak akan membahas lebih dalam penjelasan mengenai tag-tag HTML untuk membuat tabel. Kamu bisa membacanya lebih lengkap di tutorial berikut ini.

Buat Link ke File CSS

Selanjutnya silahkan buat file CSS pada folder yang sama dengan file html di atas. Adapun file yang dibuat yaitu style.css. Jika sudah silahkan hubungkan atau linkan file table.html di atas dengan cara menambahkan kode berikut di dalam tag head.

<link rel="stylesheet" type="text/css" href="style.css">

Styling Elemen Tabel

Nah, sekarang silahkan buka file style.css. Di mana pertama kali ini akan melakukan sytiling pada elemen tabel yang sudah dibuat dengan HTML. Silahkan masukkan kode-kode berikut pada file style.css.

.content-table{
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
}

Jika sudah silahkan save dan refresh pada browser. Hasilnya seperti gambar berikut :

Penjelasan singkat kode cssnya

border-collapse : membuat baris pada tabel menjadi sebaris
margin : mengatur jarak tepi bagian luar tabel
font size : mengatur ukuran font
min-width: mengatur lebar minimum element

Styling Baris Header

Kita lanjut memberikan styling pada bagian headernya, silahkan masukan kode di bawah ini pada file style.css. Tepatnya di bawah kode di atas yang sudah kita masukan.

.content-table thead tr{
    background-color:blue;
    color: #fff;
    text-align: left;
    font-weight: bold;
}

Silahkan disave dan refresh browser maka tampilan tabel khususnya bagian baris header sudah berubah seperti gambar di bawah ini :

cara desain tabel dengan css — Sumber : Dok. Pribadi

Penjelasan singkat kode CSS nya

background-color : mengatur warna latar
color : mengatur warna teks
text-align : mengatur perataan teks
font-weight : mengatur jenis style teks

Styling Sel dan Baris pada Tabel

Pada bagian ini kita akan melakukan styling pada bagian sel. Silahkan masukkan kode-kode berikut pada style.css.

.content-table th,
.content-table td{
padding: 12px 15px;

}

.content-table tbody tr{
    border-bottom: 1px solid #ddd;

}

.content-table tbody tr:nth-of-type(even){
    background-color: #f3f3;

}

.content-table tbody tr:last-of-type{
    border-bottom: 2px solid #009879;

}

Lalu save dan refresh browsernya, dan hasilnya tabel sudah mulai berubah seperti gambar berikut :

Penjelasan singkat kode CSS

border – bottom : mengatur baris bawah mulai dari ketebalan dan juga warna
padding : mengatur jarak teks dengan elemen tabel

Screenshot Kode table.html dan style.css

Untuk memudahkan berikut saya screenshotkan kode table.html dan style.css yang ditulis menggunakan text editor VS Code.

table.html

style.css

Layanan kami :

Penutup

Itulah tutorial ringkas cara desain tabel dengan CSS. Silahkan praktekan, semoga bermanfaat dan jangan lupa share ke temanmu yang lainnya juga.