Tutorial HTML 11 : Cara Membuat Tabel
• 10 min read • 4052 views
Tutorial HTML 11 : Cara Membuat Tabel
Tabel adalah salah satu fitur yang penting dalam pembuatan halaman web karena memungkinkan kita untuk menyusun data secara terstruktur dan mudah dibaca. Dalam artikel ini, kita akan menjelajahi langkah-langkah praktis untuk membuat tabel menggunakan HTML. Dengan memahami konsep dasar dan penggunaan elemen-elemen tabel, pembaca akan dapat membuat tabel yang informatif dan menarik untuk halaman web mereka. Mari kita mulai dengan memahami struktur dasar sebuah tabel di HTML.
Table of Contents
Jenis Tag untuk membuat tabel di HTML
Tag untuk membuat tabel di HTML adalah elemen-elemen penting yang membantu dalam menyusun data secara terstruktur di halaman web. Dengan menggunakan tag-tag ini, pengguna dapat membuat tabel yang informatif dan mudah dibaca oleh pengunjung. Berikut adalah beberapa tag yang perlu diingat ketika membuat tabel di HTML:
- Tag `
<table>` : Tag ini digunakan untuk membungkus seluruh tabel. Ini merupakan elemen utama yang menandakan awal dan akhir dari tabel di HTML. - Tag `
<thead>` : Untuk memisahkan bagian kepala tabel, digunakan tag `<thead>`. Bagian ini biasanya berisi judul-judul kolom atau informasi penting lainnya yang ingin ditampilkan di bagian atas tabel. - Tag `
<tbody>` : Bagian body dari tabel dikelompokkan menggunakan tag `<tbody>`. Di dalamnya berisi data-data utama yang ingin ditampilkan dalam tabel. - Tag `
<tr>` (tabel row) : Untuk setiap baris dalam tabel, digunakan tag `<tr>`. Setiap elemen `<tr>` ini menandakan satu baris dalam tabel. - Tag `
<td>` (table data) : Setiap sel atau data dalam tabel ditandai dengan tag `<td>`. Ini adalah tempat dimana isi dari setiap baris dan kolom ditampilkan. - Tag `
<th>` (table head) : Tag ini digunakan untuk menandai judul pada bagian header tabel. Biasanya digunakan di dalam tag `<thead>` untuk menandai judul kolom-kolom.
Meskipun beberapa tag seperti `<thead>` dan `<tbody>` bersifat opsional, penggunaannya sangat dianjurkan untuk menjaga struktur tabel agar lebih jelas dan terorganisir.
Contoh penggunaan tag untuk membuat tabel di HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tabel HTML</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
</html>
```
Dalam contoh di atas, kita menggunakan tag `<thead>` untuk bagian kepala tabel, `<tbody>` untuk bagian body, dan `<th>` untuk judul kolom-kolom. Dengan memahami penggunaan tag-tag ini, pembuat halaman web dapat membuat tabel yang informatif dan mudah dinavigasi oleh pengunjung.
Baca Juga :
Cara Menambahkan Baris Pada Tabel di HTML.
Memahami penggunaan atribut dalam HTML sangat penting untuk mengontrol tampilan dan perilaku elemen-elemen di halaman web. Untuk menambahkan garis pada tabel, kita dapat menggunakan atribut `border` dalam tag `<table>`. Nilai dari atribut `border` menentukan ketebalan garis yang akan ditampilkan di sekeliling tabel.
Berikut adalah contoh penggunaan atribut `border` untuk menambahkan garis pada tabel:
```html
<table border="1">
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
```
Dalam contoh di atas, atribut `border` dengan nilai "1" digunakan dalam tag `<table>` untuk menambahkan garis pada tabel. Nilai "1" tersebut menentukan ketebalan garis yang akan ditampilkan di sekeliling tabel. Semakin besar nilai dari atribut `border`, semakin tebal pula garis yang akan ditampilkan. Atribut `border` ini berguna untuk memperjelas batas-batas antara sel-sel dalam tabel dan membuatnya lebih mudah dibaca oleh pengguna.
Cara atur Jarak antara Teks dan Garis Tabel di HTML
Atribut `cellpadding` adalah salah satu cara untuk mengatur jarak antara teks dan garis di dalam setiap sel tabel di HTML. Dengan menggunakan atribut ini, pengguna dapat mengontrol jarak antara konten teks dengan batas-batas dalam sel tabel.
Atribut `cellpadding` dapat diberikan kepada tag `<table>`. Berikut adalah contoh penggunaannya:
```html
<table border="1" cellpadding="10">
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
</tr>
</table>
```
Dalam contoh di atas, atribut `cellpadding` dengan nilai "10" diberikan kepada tag `<table>`. Nilai ini menentukan ukuran jarak antara konten teks dengan batas-batas dalam setiap sel tabel. Semakin besar nilai dari atribut `cellpadding`, semakin besar pula jarak antara teks dan garis di dalam sel. Dengan menggunakan atribut `cellpadding`, pengguna dapat meningkatkan keterbacaan dan estetika tabel sesuai dengan kebutuhan mereka.
Cara Tambahkan Warna pada Sel dan Baris Tabel HTML
Untuk menambahkan warna pada sel dan baris dalam tabel HTML, kita dapat menggunakan atribut `bgcolor` di dalam tag `<td>` untuk menambahkan warna pada sel, atau di dalam tag `<tr>` untuk menambahkan warna pada baris.
Berikut adalah contoh penggunaannya:
```html
<table border="1" cellpadding="10">
<tr>
<td bgcolor="yellow">Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr bgcolor="#00ff80">
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
```
Dalam contoh di atas, atribut `bgcolor` digunakan di dalam tag `<td>` dan `<tr>` untuk menambahkan warna pada sel dan baris. Nilai atribut `bgcolor` dapat berupa kode warna dalam format heksadesimal, seperti "#FFFF00" untuk warna kuning, atau dapat juga berupa nama warna dalam bahasa Inggris, seperti "yellow".
Dengan menambahkan warna pada sel dan baris dalam tabel, pengguna dapat meningkatkan estetika dan keterbacaan tabel sesuai dengan kebutuhan dan preferensi desain mereka.
Cara Gabungkan sel dalam Tabel HTML
Untuk menggabungkan sel dalam tabel HTML, kita dapat menggunakan atribut `rowspan` untuk menggabungkan baris, dan `colspan` untuk menggabungkan kolom. Atribut ini dapat diberikan kepada tag `<td>` atau `<th>`.
Mari kita lihat contoh penggunaannya:
```html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2" bgcolor="yellow">Bulan</th>
<th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
</tr>
<tr>
<th>Padi</th>
<th>Kacang</th>
</tr>
<tr>
<td>Januari</td>
<td>500 Kg</td>
<td>231 Kg</td>
</tr>
<tr>
<td>Februari</td>
<td>342 Kg</td>
<td>423 Kg</td>
</tr>
<tr>
<td>Maret</td>
<td>432 Kg</td>
<td>124 Kg</td>
</tr>
<tr>
<td>April</td>
<td>453 Kg</td>
<td>523 Kg</td>
</tr>
</table>
</body>
</html>
```Dalam contoh di atas, kita menggunakan atribut `rowspan` untuk menggabungkan baris pada kolom "Bulan", dan `colspan` untuk menggabungkan dua kolom pada baris "Hasil Panen". Dengan menggunakan atribut ini, kita dapat membuat tata letak tabel yang lebih kompleks dan informatif sesuai dengan kebutuhan kita.
- Tutorial HTML Part 1 : Pengenalan
- Tutorial HTML Part 2 : Tag, Element dan Atribut
- HTML 3 : Tutorial Membuat Paragraf
- HTML 4 : Cara Membuat Heading
- HTML Part 5 : Cara Membuat Komentar
- HTML 6 : Belajar Teks Formatting
- Tutorial HTML 7 : Membuat Link Untuk Menghubungkan Web
- Tutorial HTML 8 : Cara Menampilkan Gambar
- Tutorial HTML 9 : Jenis Atribut tag IMG HTML
- Tutorial HTML 10 : Cara Membuat List
- Tutorial HTML 11 : Cara Membuat Tabel
- Tutorial HTML 12 : Cara Membuat Form
- Tutorial HTML 14 : Cara Menampilkan Video
- Tutorial HTML 13 : Belajar Elemen Semantik
- Tutorial HTML 15 : Cara Menampilkan Audio
- Tutorial HTML 16 : Cara Membuat Website Sederhana
- Membuat Aplikasi Keuangan Pribadi Menggunakan Python dan Django ( Tutorial Lengkap )
Last updated on June 03, 2026
