Belajar HTML Part 14: Cara Membuat tabel di HTML (tag table)
Halo Kawan-kawan
Salah satu cara untuk menampilkan data secara terstruktur adalah dengan menggunakan <table>. HTML sendiri telah menyediakan tag <table> untuk menampilkan data dalam bentuk table. Dalam tutorial belajar HTML cara membuat tabel HTML ini kita akan membahas cara penggunaannya.
Membuat Tabel Pada HTML
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>, dan tag <td>:
• Tag <table> digunakan untuk memulai tabel
• Tag <tr> digunakan untuk membuat baris dari tabel.
• Tag <td> digunakan untuk membuat kolom dari tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML berikut:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table>
<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>
</body>
</html>
Hasil Code:
Atribut border dalam tabel HTML
Pada hasil code diatas, kita tidak menemukan batas antara 1 tabel dangan tabel lainnya, disinilah pentingnya atribut border. Jadi fungsi atribut border adalah untuk mengatur ketebalan dari garis tepi tabel.
Berikut adalah contoh penggunaan atribut border dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<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>
<br />
<table border="7">
<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>
</body>
</html>
Hasil Code:
Lihatlah hasil dari pengunaan 2 nilai border yang berbeda diatas. Jadi, semakin tinggi nilai suatu border, maka garis tabel akan semakin tebal.
Atribut cellpadding dalam tabel HTML
Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri.
Berikut adalah contoh penggunaan atribut cellpadding dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1" cellpadding="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>
<br />
<table border="1" cellpadding="7">
<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>
</body>
</html>
Hasil Code:
Lihatlah hasil dari pengunaan 2 nilai cellpadding yang berbeda diatas. Jadi, semakin tinggi nilai suatu cellpadding, maka jarak dari border sisi dalam dengan teks tabel semakin lebar.
Atribut cellspacing dalam tabel HTML
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.
Berikut adalah contoh penggunaan atribut cellpadding dalam tag table HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1" cellpadding="1" cellspacing="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>
<br />
<table border="1" cellpadding="1" cellspacing="7">
<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>
</body>
</html>
Hasil Code:
Lihatlah hasil dari pengunaan 2 nilai cellspacing yang berbeda diatas. Jadi, semakin tinggi nilai suatu cellspacing, maka jarak dari border bagian dalam dan luar tabel semakin lebar.
Menggabungkan ketiga atribut border, cellpadding dan cellspacing tersebut dalam sebuah tabel, maka kita dapat menyesuaikan tampilan tabel sesuai dengan keinginan kita.
Dalam tutorial belajar HTML dasar selanjutnya, kita akan mempelajari sekelompok tag yang kelihatannya cukup rumit tetapi sangat penting bagi sebuah website. Untuk totorial berikutnya, kita akan membahas tentang Cara Membuat Form di HTML menggunakan tag form.
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2