HTML Dasar - 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 panduan mudah dan praktis belajar HTML dasar 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>:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!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
webmenggunakan 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.
HTML menyediakan
banyak tag lain untuk merancang tabel yang lebih rumit. Untuk pembahasan
mengenai ini, Panduan Mudah dan Praktis HTML Dasar telah membuat beberapa panduan
mudah dan praktis lanjutan tentang Tabel HTML yang bisa dipelajari pada: Panduan
mudah dan praktis Belajar Tabel HTML Lanjutan.
loading...
No comments:
Post a Comment