Belajar HTML Dasar Part 12: Cara Membuat tabel di HTML (tag table)
Belajar HTML Dasar Part 12: Cara Membuat tabel di HTML
(tag table)
Dalam
menampilkan data yang terstruktur atau tampilan dari database, kita
biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel
tag digunakan untuk menampilkan data dalam bentuk tabel. Dalam tutorial belajar HTML cara membuat tabel HTML ini
kita akan membahas cara penggunaannya.
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 memulai 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 tabel.
Agar lebih
jelas, kita akan langsung menggunakan contoh kode HTML:
Contoh penggunaan tag <table>:
<!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>
<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>
</table>
</body>
</html>
Perhatikan
bahwa pada tag <table> kita memberikan atribut border.
Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai
ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan
kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1
pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.
Sebelum
standar CSS diimplementasikan ke dalam semua browser, pada sekitar tahun
2000-an kebanyakan programmer dan desainer web menggunakan tabel
untuk mengatur tampilan web. Membuat menu ada di atas dan sisi kanan web bisa
diakali dengan menjadikan halaman web sebagai sebuah tabel yang besar. Hal ini
sebenarnya tidak salah, namun akan membuat pengkodean HTML menjadi
rumit. Saat ini anda masih bisa menggunakan ide tersebut, namun sangat
disarankan menggunakan CSS untuk mengatur tampilan halaman web.
0 komentar:
Posting Komentar