Belajar HTML #06 | Membuat Tabel Pada HTML
Belajar Bareng Minarsih - Edisi Ngoding
30 Agustus 2022
Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel.
Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table> untuk membuat table.
Tabel terdiri dari 4 unsur utama:
Ada beberapa tag untuk membuat tabel di HTML apa aja ?
<table> untuk membungkus tabelnya.<thead> untuk membungkus bagian kepala tabel.<tbody> untuk membungkus bagian body dari tabel.<tr> (tabel row) untuk membuat baris.<td> (table data) untuk membuat sel.<th> (table head) untuk membuat judul pada header.Dan berikut contoh membuat tabel pada HTML.
<!DOCTYPE html>
<html>
<head>
<title>Membuat tebel Pada HTML</title>
</head>
<body>
<table>
<tr>
<td>No</td>
<td>Nama</td>
<td>Tanggal Lahir</td>
</tr>
<tr>
<td>1</td>
<td>Upin</td>
<td>3 September 1999</td>
</tr>
</table>
</body>
</html>
Berikut hasilnya:
Kok tidak ada garisnya? iya soalnya kita belum menambahkan atribut border.
Agar tabelnya memiliki garis kita harus menambahkan atribut border pada tag tabel.
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat tebel Pada HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>No</td>
<td>Nama</td>
<td>Tanggal Lahir</td>
</tr>
<tr>
<td>1</td>
<td>Upin</td>
<td>3 September 1999</td>
</tr>
<tr>
<td>2</td>
<td>Ipin</td>
<td>3 September 1999</td>
</tr>
</table>
</body>
</html>
Hasilnya: 
Nilai "1" pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan semakin besar pula ukuran garisnya.
Dalam Tag tabel juga terdapat atribut Cellspacing dan Cellpadding.
Apa sih Cellpadding, Cellspacing itu ?
Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri.
Berikut contoh penggunaan atribut cellpadding dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Membuat tebel Pada HTML</title>
</head>
<body>
<table border="1" cellpadding="3">
<tr>
<td>No</td>
<td>Nama</td>
<td>Tanggal Lahir</td>
</tr>
<tr>
<td>1</td>
<td>Upin</td>
<td>3 September 1999</td>
</tr>
<tr>
<td>2</td>
<td>Ipin</td>
<td>3 September 1999</td>
</tr>
</table>
</body>
</html>
Dan hasilnya: 
Bisa Kamu lihat contoh diatas tampilannya sangat berbeda dari sebelumnya. Yang belum dikasih atribut cellpadding. Pengaturan cellpadding yang tepat akan membuat isi text tabel menjadi lebih rapi dan mudah dibaca.
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.
Berikut contoh penggunaan atribut cellspacing dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Membuat tebel Pada HTML</title>
</head>
<body>
<table border="1" cellspacing="5">
<tr>
<td>No</td>
<td>Nama</td>
<td>Tanggal Lahir</td>
</tr>
<tr>
<td>1</td>
<td>Upin</td>
<td>3 September 1999</td>
</tr>
<tr>
<td>2</td>
<td>Ipin</td>
<td>3 September 1999</td>
</tr>
</table>
</body>
</html>
Hasilnya: 
Bisa Kamu lihat contoh diatas tampilannya sangat berbeda dari sebelumnya. Yang belum dikasih atribut cellspacing.
Menggabungkan sel pada tabel HTML
Untuk menggabungkan beberapa sel menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa kamu gunakan seperti berikut :
Atribut ini bisa kita letakkan pada tag <td> atau <th>. 
Sc gambar: petanikode.com
Berikut contoh kode program :
<!DOCTYPE html>
<html>
<head>
<title>Membuat tebel Pada HTML</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">No</th>
<th colspan="3">Daftar</th>
</tr>
<tr>
<th>Nama</th>
<th>Tanggal lahir</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Upin</td>
<td>3 September 1999</td>
<td>Desa durian Rutuh</td>
</tr>
<tr>
<td>2</td>
<td>Ipin</td>
<td>3 September 1999</td>
<td>Desa durian Rutuh</td>
</tr>
</table>
</body>
</html>
Berikut Hasilnya: 
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.
Memberi Warna Pada Tabel
Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat tebel Pada HTML</title>
</head>
<body>
<table border="1">
<tr bgcolor="#348fge">
<th rowspan="2">No</th>
<th colspan="3">Daftar</th>
</tr>
<tr bgcolor="#869gef">
<th>Nama</th>
<th>Tanggal lahir</th>
<th>Alamat</th>
</tr>
<tr>
<td bgcolor="yellow">1</td>
<td>Upin</td>
<td>3 September 1999</td>
<td>Desa durian Rutuh</td>
</tr>
<tr>
<td bgcolor="yellow">2</td>
<td>Ipin</td>
<td>3 September 1999</td>
<td>Desa durian Rutuh</td>
</tr>
</table>
</body>
</html>
Berikut hasilnya: 
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.
Artikel Lainnya Dengan Kategori Terkait :
1. 5 HTML Tags For Accessibility
2. Belajar HTML #01 | Apa Itu HTML ? Pengertian HTML Lengkap Untuk Pemula
3. Belajar HTML #02 | Cara Sederhana Membuat Code HTML
4. Belajar HTML #03 | Membuat Heading di HTML
5. Belajar HTML #04 | Format Text di HTML
6. Belajar HTML #05 | Membuat Paragraf di HTML
7. Belajar HTML #06 | Membuat Tabel Pada HTML
8. Belajar HTML #07 | Membuat Link Pada HTML
9. Belajar HTML #08 | Cara Membuat List Di HTML
10. Belajar HTML #09 | Cara Membuat Box Shadow CSS dan HTML Praktis Tanpa ribet (efek bayangan CSS)
11. Belajar HTML #10 | Cara Menampilkan Gambar Pada Halaman Website Menggunakan HTML
12. Belajar HTML #11 | Cara Menampilkan Video Pada Halaman Website Menggunakan HTML
13. Belajar HTML #12 | Cara Membuat Form Pada HTML
14. Belajar HTML #13 | Belajar Membuat Layout Pada HTML
15. Belajar HTML #14 | Belajar Menghubungkan HTML dengan CSS
16. Belajar HTML #15 | Cara Menambahkan Audio ke Halaman Website Menggunakan HTML.
17. Belajar HTML #16 | Cara Menambahkan Garis Horizontal di HTML
18. Belajar HTML #17 | Cara Menambahkan Komentar di HTML
19. Belajar HTML #18 | Tutorial Cara Membuat Checkbox dan Radio Button di HTML
20. Buat Desain Web Responsif CSS
21. Cara Membuat Accordions Dengan HTML & CSS
22. Cara Membuat Favicon Dengan HTML
26. Input HTML Yang Perlu Diketahui
27. Memahami Pentingnya Semantic HTML dalam Struktur Website
28. Membuat Form HTML dengan Input Sugestion
29. Penggunaan Atribut Elemen Anchor dalam HTML
31. Tag HTML yang Jarang Diketahui
