Menampilkan data dalam bentuk tabel. Tabel didefinisikan dengan cara menyatakan baris dank olomnya.
Tag untuk penanda baris adalah <tr></tr> dan penanda kolom adalah<td></td>.
Tag <th></th> dapat digunakan untuk mendefinisikan sel header tabel.
Elemen-elemen pada tabel:
Elemen-elemen pada tabel:
Elemen | Penjelasan |
<table> … </table> | Mendefinisikan tabel HTML |
<th> … </th> | Mendefinisikan sel header |
<caption> … </caption> | Menuliskan judul tabel |
<tr> … </tr> | Mendefinisikan baris tabel |
<td> … </td> | Mendefinisikan sel data |
Atribut tabel
Elemen | Penjelasan |
align = [left|center|right] | Menentukan posisi horizontal |
valign = [top|middle|bottom] | Menentukan posisi vertikal |
colspan = n | Menyatukan sel n kolom |
rowspan = n | Menyatukan sel n baris |
misal :
<html>
<head>
<title>Table 1</title>
</head>
<body>
<table>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
</table>
</body>
</html>
<head>
<title>Table 1</title>
</head>
<body>
<table>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
</table>
</body>
</html>
maka tampilan dari tag diatas :
misal :
<html>
<head>
<title>Tabel 2</title>
</head>
<body>
<table border="3" width="500">
<tr>
<td>Header Kiri</td>
<td align="center" width="50%">Header Tengah</td>
<td align="right">Header Kanan</td>
</tr>
<tr>
<td valign="top"rowspan="2">Menu Kiri</td>
<td align="center" colspan="2" height="200">Bagian Isi</td>
</tr>
<tr>
<td align="center">Footer Tengah</td>
<td align="right">Footer Kanan</td>
</tr>
</table>
</body>
</html>
<head>
<title>Tabel 2</title>
</head>
<body>
<table border="3" width="500">
<tr>
<td>Header Kiri</td>
<td align="center" width="50%">Header Tengah</td>
<td align="right">Header Kanan</td>
</tr>
<tr>
<td valign="top"rowspan="2">Menu Kiri</td>
<td align="center" colspan="2" height="200">Bagian Isi</td>
</tr>
<tr>
<td align="center">Footer Tengah</td>
<td align="right">Footer Kanan</td>
</tr>
</table>
</body>
</html>
Tampilan dari tag diatas :
Tidak ada komentar:
Posting Komentar