Cara Membuat Tabel Menggunakan HTML CSS

Agustus 08, 2023 Mei 03, 2023

Please wait 0 seconds...

Scroll Down and click on GET LINK for destination

Congrats! Link is Generated

Anda akan menemukan banyak atribut dan tag ketika berhadapan dengan HTML (Hypertext Markup Language) dan bahasa markup lainnya seperti XML. Tabel adalah atribut yang harus selalu Anda gunakan untuk memudahkan pengguna memindai, membandingkan, dan menganalisis data dalam jumlah besar.

Dengan tabel, pengguna dapat melihat poin-poin penting, kesimpulan, atau hasil secara sekilas, bahkan tanpa membaca keseluruhan artikel. Anda dapat menggunakan CSS untuk menata dan mengubah tampilan tabel Anda.

Ini adalah beberapa alasan mengapa Anda mungkin perlu mengatur gaya tabel dalam aplikasi Anda.

Tingkatkan tampilan visual: Tabel biasa bisa membosankan dan polos. Menata meja seperti itu akan meningkatkan penampilannya dan membuatnya menarik bagi pengguna.
Tingkatkan aksesibilitas: Tabel gaya dapat membuatnya dapat diakses bahkan oleh penyandang disabilitas.
Tingkatkan keterbacaan: Anda dapat menggunakan teknik gaya yang berbeda untuk memudahkan pengguna memindai melalui data yang disajikan dalam tabel Anda.
Branding: Anda dapat memperkuat identitas merek Anda saat Anda menerapkan font dan warna yang konsisten pada tabel Anda di seluruh aplikasi Anda.
Baik untuk mesin telusur: Mengatur data Anda dalam format tabel akan berguna jika Anda ingin membuat peringkat situs web Anda tinggi di mesin telusur.

Memahami Elemen HTML dalam Membuat Tabel

Saat Anda membuat tabel dengan HTML ada beberapa tag atau elemen HTML yang harus Anda ketahui. Namun, pada dasarnya Anda dapat membuat tabel hanya dengan menggunakan 3 elemen HTML berikut:

Elemen <table> digunakan untuk mendefinisikan pembuatan tabel
Elemen <tr> digunakan untuk mendefinisikan baris tabel
Elemen <td> digunakan untuk membuat kolom atau sel untuk setiap baris dalam tabel

Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen pilihan lain dalam pembuatan tabel sebagai berikut:

Elemen <th> digunakan untuk mendefinisikan header dalam tabel
Elemen <thead> digunakan untuk membungkus isi bagian judul atau kepala tabel
Elemen <tbody> digunakan untuk membungkus isi tabel
Elemen <tfoot> digunakan untuk membungkus isi footer atau bagian bawah tabel

Daripada bingung dengan elemen-elemen tersebut, langsung saja kita praktekkan dengan menggunakan 3 elemen yang biasa digunakan dalam pembuatan tabel.

Pertama silahkan buat file html baru. Beri nama file html sesuai selera atau bisa kita beri nama “index.html”. Silakan lihat contoh kode berikut dan salin ke file index.html.

<html>
<head>
    <title>Mengenal Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Baris ke 1 - Kolom ke 1</td>
            <td>Baris ke 1 - Kolom ke 2</td>
        </tr>
        <tr>
            <td>Baris ke 2 - Kolom ke 1</td>
            <td>Baris ke 2 - Kolom ke 2</td>
        </tr>
    </table>
</body>
</html>

Pada kode diatas terdapat atribut border pada tag tabel, atribut border berfungsi untuk menambahkan garis pada tabel. Sedangkan angka 1 pada atribut border merupakan nilai ketebalan garis yang akan ditampilkan, semakin besar nilainya maka semakin tebal garis yang ditampilkan.

Menggabungkan Sel dalam Tabel HTML

Saat membuat tabel, terkadang kita dihadapkan pada kebutuhan untuk menggabungkan beberapa sel menjadi satu. Untuk menggabungkan beberapa sel menjadi satu dalam sebuah tabel, HTML menyediakan beberapa atribut yang dapat Anda gunakan sebagai berikut:

Atribut rowpan digunakan untuk menggabungkan baris dalam sebuah tabel
Atribut colspan digunakan untuk menggabungkan kolom dalam sebuah tabel

Atribut ini dapat diterapkan pada tag td dan th. Perhatikan contoh kode program berikut ini:

<html>
<head>
    <title>Mengenal Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th rowspan="2">Nama</th>
            <th colspan="3">Nilai</th>
        </tr>
        <tr>
            <th>Kimia</th>
            <th>Fisika</th>
            <th>Biologi</th>
        </tr>
        <tr>
            <td>Robby</td>
            <td>76</td>
            <td>80</td>
            <td>81</td>
        </tr>
        <tr>
            <td>Rendi</td>
            <td>84</td>
            <td>70</td>
            <td>75</td>
        </tr>
        <tr>
            <td>Alfian</td>
            <td>96</td>
            <td>70</td>
            <td>71</td>
        </tr>
    </table>
</body>
</html>

Pada kode di atas atribut rowspan memiliki nilai 2 artinya baris yang akan digabungkan adalah 2 baris. Sedangkan atribut colspan memiliki nilai 3 artinya kolom yang akan digabungkan adalah 3 kolom. Kode di atas juga mengandung tag th yang berfungsi sebagai kepala tabel. Saat ditampilkan, data yang terdapat pada tag th akan memiliki efek bold dibandingkan dengan data yang terdapat pada tag td.

Menyediakan Warna dan Spasi Antar Sel dalam HTML

Pada contoh kode program sebelumnya, tabel yang dihasilkan tampak saling berdekatan dari satu sel ke sel lainnya. Untuk mengatasinya, HTML telah menyediakan atribut cellpadding yang dapat Anda gunakan untuk mengatur jarak antar sel. Atribut cellpadding ini dapat diterapkan langsung ke tag tabel sebagai berikut:

<table border="1" cellpadding="8">
....
</table>

Semakin tinggi nilai pada atribut cellpadding, semakin lebar jarak antar sel dan sebaliknya. Anda juga bisa memberi warna latar belakang pada sel atau tabel menggunakan atribut bgcolor lalu isi dengan warna. Misalnya, kami akan memberi warna latar belakang kuning pada nilai dan abu-abu pada namanya. Maka Anda hanya perlu menambahkan atribut bgcolor ke tag th seperti ini:

<th bgcolor="grey" rowspan="2">Nama</th>
<th bgcolor="yellow" colspan="3">Nilai</th>

Terapkan kode CSS untuk Desain Tabel

Sebelumnya kita sudah membahas cara membuat garis dan memberi warna serta spasi pada tabel menggunakan atribut pada HTML. Untuk saat ini, setelah adanya CSS, penggunaan atribut tersebut dalam mendesain tabel sudah tidak direkomendasikan lagi. Disarankan agar Anda menggunakan kode CSS untuk membuat garis dan memberikan warna dan spasi pada tabel.

Memasukkan kode CSS pada halaman web dapat dilakukan dengan membuat file CSS terpisah atau disimpan di elemen kepala dalam HTML. Usahakan untuk tidak menyimpannya pada elemen HTML lain karena dapat membuat kode program terlihat tidak rapi. Selain itu, menyimpan kode CSS di file terpisah atau di elemen head akan membuat kode CSS dapat digunakan berulang kali.

Kode CSS dapat ditulis dengan terlebih dahulu menentukan tag HTML apa yang akan Anda ubah atau beri efek CSS. Untuk lebih jelasnya silahkan lihat contoh kode program berikut ini.

<html>
<head>
    <title>Mengenal Tabel HTML</title>
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th rowspan="2">Nama</th>
            <th colspan="3">Nilai</th>
        </tr>
        <tr>
            <th>Kimia</th>
            <th>Fisika</th>
            <th>Biologi</th>
        </tr>
        <tr>
            <td>Robby</td>
            <td>76</td>
            <td>80</td>
            <td>81</td>
        </tr>
        <tr>
            <td>Rendi</td>
            <td>84</td>
            <td>70</td>
            <td>75</td>
        </tr>
        <tr>
            <td>Alfian</td>
            <td>96</td>
            <td>70</td>
            <td>71</td>
        </tr>
    </table>
</body>
</html>

Contoh kode program di atas sudah memiliki kode CSS. Kode CSS ditempatkan di dalam elemen style yang disimpan di dalam elemen head . Elemen style ini berfungsi untuk menandakan bahwa kode yang terdapat di dalamnya adalah kode CSS yang digunakan untuk mendesain halaman web.

Lalu untuk apa properti CSS pada kode program di atas berfungsi? Mari kita tinjau secara singkat properti CSS yang digunakan dalam kode program di atas.

properti border-collapse : collapse; digunakan untuk menciutkan baris tabel menjadi satu baris
properti border: 1px solid black; digunakan untuk memberikan garis beserta ketebalan garis dan warna garis
properti padding : 10px; digunakan untuk mengontrol jarak konten yang ada dalam tabel
properti background-color: #4CAF50; digunakan untuk memberikan warna latar belakang biru
properti color:white; digunakan untuk memutihkan teks

Agar lebih menarik lagi, Anda bisa menambahkan properti CSS width agar tabel bisa mengikuti ukuran layar. Properti hover digunakan agar baris dalam tabel akan memiliki efek warna saat kursor melayang di atas baris tersebut. Jadi kode CSS yang ada akan menjadi seperti ini:

<style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
 
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
        }
        th {
            background-color: rgb(19, 110, 170);
            color: white;
        }
        tr:hover {background-color: #f5f5f5;}
</style>

Seberapa mudah bukan membuat tabel di HTML? Hal yang harus diperhatikan saat membuat tabel adalah penggunaan atribut rowspan dan colspan. Karena Anda harus berhati-hati dalam menentukan ukuran sel apa yang akan diterapkan pada rowspan dan colspan.

Sering-seringlah berlatih dan terus kembangkan keterampilan Anda dengan bergabung dengan Dicoding academy Front-End Web Developer. Di sini Anda akan diajarkan mulai dari dasar HTML, CSS, Javascript hingga menyusun layout yang responsive, interaktif dan tentunya user friendly.

GET LINK