Cara
Membuat Tabel HTML dengan tag <table>, <tr> dan <td>
Untuk membuat
tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <tabel>, tag
<tr>, dan tag <td>:
- Tag <tabel> 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 <tabel>:
|
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 <tabel> 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.
Referensi: http://www.duniailkom.com/belajar-html-cara-membuat-tabel-di-html-tag-table/
Tidak ada komentar:
Posting Komentar