Cara Mudah Membuat Tabel di HTML Dalam 15 Menit

Dulu sekitar tahun 2000-an sebelum standar CSS diterapkan pada setiap web browser, kebanyakan para web developer menggunakan tabel untuk mengatur tata letak sebuah halaman web. Namun untuk sekarang setelah adanya CSS, penerapan table HTML untuk layout tampilan halaman web sudah tidak disarankan kembali. Kamu sangat disarankan untuk menggunakan CSS saat mengatur tampilan halaman web.

Umumnya saat kamu menampilkan suatu data yang terstruktur dari database, kamu akan menampilkannya dalam bentuk tabel bukan? HTML sebagai bahasa markup telah menyediakan elemen table yang bisa digunakan saat kamu ingin membuat tabel. Kamu tidak perlu khawatir, karena untuk membuat tabel cukup mudah kok bahkan bisa kurang dari 15 menit.

“Belajar disaat orang lain tidur, bekerja sementara yang lain bermalas-malasan, mempersiapkan disaat orang lain bermain, dan bermimpi sementara lainnya sedang berharap” (William Arthur Ward)

Sebelum itu mari kenali terlebih dahulu apa itu tabel. Tabel pada dasarnya digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri dari baris, kolom dan sel. Baris, kolom dan sel pada suatu tabel ini sangat membantu dalam melihat informasi keterkaitan di dalamnya.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Memahami Elemen HTML dalam Membuat Tabel

Ketika kamu membuat tabel dengan HTML ada beberapa tag atau elemen HTML yang harus kamu ketahui. Akan tetapi pada dasarnya kamu sudah bisa membuat tabel dengan hanya menggunakan 3 elemen HTML berikut :

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

Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut :

Elemen <th> digunakan untuk mendefinisikan header di dalam tabel
Elemen <thead> digunakan untuk membungkus konten bagian judul atau kepala tabel
Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel
Elemen <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah dari tabel

Daripada kamu bingung dengan elemen-elemen tersebut, mari kita praktikkan saja langsung dengan menggunakan 3 elemen yang umum digunakan dalam membuat tabel.

Pertama silakan buat file html baru. Beri nama file html tersebut sesuai selera atau dapat kita beri nama “index.html”. Silakan perhatikan contoh kode berikut dan salin ke dalam file index.html.

<!DOCTYPE html>

<head>

<title>Mengenal Tabel HTML</title>

</head>

<body>

<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 di atas terdapat atribut border dalam tag table, atribut border tersebut berfungsi untuk memberikan garis pada tabel. Sedangkan angka 1 di dalam atribut border merupakan nilai ketebalan garis yang akan ditampilkan, semakin besar nilai tersebut maka semakin tebal garis yang ditampilkan.

Hasil dari kode program di atas akan seperti berikut :

Menggabungkan Sel pada Tabel HTML

Saat membuat tabel, terkadang kita dihadapkan akan kebutuhan untuk menggabungkan beberapa sel menjadi satu. Untuk menggabungkan beberapa sel menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa kamu gunakan seperti berikut :

Atribut rowspan digunakan untuk menggabungkan baris pada tabel
Atribut colspan digunakan untuk menggabungkan kolom pada tabel

Atribut tersebut bisa diterapkan pada tag td maupun th. Perhatikan contoh kode program berikut :

<!DOCTYPE html>

<head>

<title>Mengenal Tabel HTML</title>

</head>

<body>

<tr>

<th colspan="3">Nilai</th>

</tr>

<tr>

<th>Kimia</th>

<th>Fisika</th>

<th>Biologi</th>

</tr>

<tr>

<td>Robby</td>

</tr>

<tr>

<td>Rendi</td>

</tr>

<tr>

<td>Alfian</td>

</tr>

</table>

</body>

</html>

Pada kode di atas atribut rowspan memiliki nilai 2 artinya baris yang akan digabung berjumlah 2 baris. Sedangkan atribut colspan memiliki nilai 3 artinya kolom yang akan digabung berjumlah 3 kolom. Kode di atas juga terdapat tag th yang berfungsi sebagai kepala tabel. Saat ditampilkan data yang ada dalam tag th akan memiliki efek tebal atau bold dibandingkan dengan data yang ada di tag td.

Hasil dari kode program diatas seperti berikut :

Memberikan Warna dan Jarak Antar Sel pada HTML

Pada contoh kode program sebelumnya, tabel yang dihasilkan terkesan saling berdekatan antar satu sel dengan sel yang lain. Untuk mengatasi hal itu HTML telah menyediakan atribut cellpadding yang bisa kamu gunakan untuk mengatur jarak antar sel. Atribut cellpadding ini bisa diterapkan langsung pada tag table seperti berikut :

....

</table>

Semakin tinggi nilai yang ada pada atribut cellpadding maka jarak antar sel akan semakin lebar begitupun sebaliknya. Kamu juga bisa memberikan warna latar belakang pada sel atau tabel dengan menggunakan atribut bgcolor kemudian diisi dengan warna. Misal kita akan beri warna latar belakang kuning pada nilai dan abu-abu pada nama. Maka kamu hanya perlu menambahkan atribut bgcolor pada tag th seperti berikut ini :

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

Setelah ditambahkan atribut cellpadding pada tag table dan atribut bgcolor pada tag th maka tabel tadi akan tampil seperti pada gambar di bawah ini :

Menerapkan kode CSS untuk Desain Tabel

Sebelumnya sudah kita bahas bagaimana membuat garis dan memberikan warna serta jarak pada tabel dengan menggunakan atribut yang ada di HTML. Untuk saat ini setelah kehadiran CSS penggunaan atribut tersebut dalam mendesain tabel sudah tidak disarankan lagi. Kamu disarankan menggunakan kode CSS dalam membuat garis dan memberikan warna serta jarak pada tabel.

Memasukan kode CSS pada halaman web bisa dengan membuat berkas CSS terpisah atau disimpan dalam elemen head pada HTML. Usahakan jangan disimpan pada elemen HTML yang lain karena bisa membuat kode program terlihat tidak rapi. Selain itu juga dengan menyimpan kode CSS pada file terpisah atau di dalam elemen head akan membuat kode CSS tersebut dapat digunakan secara berulang-ulang.

Kode CSS dapat ditulis dengan mendefinisikan terlebih dahulu tag HTML apa yang akan kamu ubah atau beri efek CSS. Lebih jelasnya silakan kamu perhatikan contoh kode program berikut.

<!DOCTYPE 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 colspan="3">Nilai</th>

</tr>

<tr>

<th>Kimia</th>

<th>Fisika</th>

<th>Biologi</th>

</tr>

<tr>

<td>Robby</td>

</tr>

<tr>

<td>Rendi</td>

</tr>

<tr>

<td>Alfian</td>

</tr>

</table>

</body>

</html>

Contoh kode program di atas telah memiliki kode CSS. Kode CSS diletakan di dalam elemen style yang disimpan di dalam elemen head. Elemen style ini berfungsi untuk menandakan bahwa kode yang ada di dalamnya merupakan kode CSS yang digunakan untuk mendesain halaman web.

Lalu properti CSS yang ada pada kode program di atas berfungsi untuk apa aja? Mari kita ulas sekilas mengenai properti CSS yang digunakan pada kode program di atas.

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

Hasil dari kode program tersebut maka tabel yang ditampilkan akan seperti berikut :

Supaya lebih menarik lagi, kamu bisa menambahkan properti CSS width agar tabel bisa mengikuti ukuran layar. Properti hover digunakan agar baris pada tabel akan memberikan efek warna saat kursor mengarah pada baris tersebut. Sehingga kode CSS yang ada akan seperti berikut 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>

Hasilnya tabel tersebut akan terlihat seperti pada gambar di bawah ini.

Bagaimana cukup mudah bukan dalam membuat tabel di HTML? Hal yang harus kamu perhatikan saat membuat tabel adalah penggunaan atribut rowspan dan colspan. Karena kamu harus teliti dalam menentukan berapa ukuran sel yang akan diterapkan pada rowspan maupun colspan.

“Jangan mudah menyerah untuk belajar. Jangan minder. Kalau ada kegiatan seperti lomba, ikuti saja. Bisa mengasah kemampuan kita. Cobain aja dulu.”

(Putri Huriati)

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

Simak juga artikel lainnya di blog Dicoding yang bisa memperluas wawasan kamu mengenai pemrograman web.

Cara Mudah Membuat Tabel Di HTML Dalam 15 Menit – karya Robby Takdirillah, Intern Junior Content Writer di Dicoding