Membuat Tabel Pada HTML
tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table> utuk membuat table, <tr> untuk membuat baris dan <td> untuk membuat kolom.untuk lebih memahami pembuata table pada HTML berikut saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML.
- <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik.
- <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML
- <td> atau dikenal dengan table data merpakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam table
- <th> untuk membuat table head atau bagian kepala pada 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
|
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<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>
|
dari contoh diatas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita bahas diatas. namun pada tag table saya memberikan atribut border=’1′. atribut border ini digunakan untuk memberika garis tepi pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita buat tadi.
dan berikut ini adalah contoh membuat tabel HTML dengan menggunakan tag head atau bagian kepala tabel.contoh
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
|
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Badrul</td>
<td>Sumedang</td>
</tr>
<tr>
<td>2</td>
<td>Andi</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Budi</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
|
Posting Komentar