Tutorial HTML Dasar Part 11: Cara Membuat Tabel di HTML (tag table)

Cara Membuat Tabel di HTML – Untuk menampilkan data, entah itu berasal dari database atau dari sumber lain, akan lebih terlihat rapih jika kita menggunakan tabel. Sekarang, kita akan membahas bagaimana cara membuat tabel di HTML. Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan tag <table> yang digunakan untuk menampilkan data dalam bentuk tabel.
Cara Membuat Tabel HTML dengan tag <table>, <tr>, dan <td>
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>, dan tag <td>:
- Tag <table> digunakan untuk membuat tabel.
- Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
- Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke dalam tabel.
Supaya lebih jelas, kita akan langsung menggunakan contoh HTML nya:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Table</title>
</head>
<body>
<h1>Belajar Tag Table</h1>
<table border="3">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
<tr>
<td>Baris 4, Kolom 1</td>
<td>Baris 4, Kolom 2</td>
<td>Baris 4, Kolom 3</td>
</tr>
<tr>
<td>Baris 5, Kolom 1</td>
<td>Baris 5, Kolom 2</td>
<td>Baris 5, Kolom 3</td>
</tr>
</table>
</body>
</html>
Perhatikan bahwa tag <table> kita memberikan atribut border. Atribut border digunakan untuk memberikan garis tepi dari tabel. Nilai ini dalam ukuran pixel. Border = 3, berarti kita menyuruh kepada web browser untuk memberikan nilai kepada tabel berupa garis tepi sebebas 3 pixel. Jika tidak ditambahkan, secara default tabel tidak memliki garis tepi.
Sampai disini kita sudah mempelajari beberapa tag HTML yang sering digunakan dalam pembuatan sebuah website. Untuk membuat halaman website yang panjang, terkadang perlu diberi komentar untuk memberikan seperti sebuah catatan atau mengenai fungsi dan tujuan kita membuatnya. Selanjutnya kita akan membahas cara membuat komentar di HTML.
Dibawah ini merupakan semua list dari proses part Belajar HTML Dasar- Tutorial HTML Dasar Part 1: Pengenalan HTML
- Tutorial HTML Dasar Part 2: Apa Fungsi Web Browser?
- Tutorial HTML Dasar Part 3: Memilih Text Editor Untuk HTML
- Tutorial HTML Dasar Part 4: Menjalankan File HTML
- Tutorial HTML Dasar Part 5: Struktur Dasar HTML
- Tutorial HTML Dasar Part 6: Cara Membuat Paragraf di HTML
- Tutorial HTML Dasar Part 7: Cara Membuat Judul di HTML (tag h1)
- Tutorial HTML Dasar Part 8: Cara Membuat Daftar/List di HTML (tag li)
- Tutorial HTML Dasar Part 9: Cara Membuat link di HTML (tag a)
- Tutorial HTML Dasar Part 10: Cara Menambahkan Gambar di HTML (tag img)
- Tutorial HTML Dasar Part 11: Cara Membuat Tabel di HTML (tag table)
- Tutorial HTML Dasar Part 12: Cara Memberikan Komentar di HTML
- Tutorial HTML Dasar Part 13: Cara Membuat Form di HTML (tag form)
- Tutorial HTML Dasar Part 14: Gabungan File HTML (Finish)