Tabel HTML
Tabel digunakan untuk menyajikan data dalam bentuk
kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap
baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan.
Elemen-elemen tabel
|
Elemen
|
Penjelasan
|
|
<table>...</table>
|
Mendefinisikan sebuah tabel
dalam HTML.
|
|
<th>...</th>
|
Mendefinisikan sebuah sel
header tabel.
|
|
<caption>...</caption>
|
Mendefinisikan tulisan
untuk judul tabel.
|
|
<tr>...</tr>
|
Mendefinisikan sebuah baris
tabel dalam tabel.
|
|
<td>...</td>
|
Mendefinisikan sebuah sel
data dalam tabel.
|
Listing 8.1
Coba_tabel
<!--coba_tabel.html-->
<html>
<body>
<p>setiap tabel dimulai
dengan sebuah tag table.<br>
setiap baris dimulai dengan
sebuah tag tr.<br>
setiap kolom dimulai dengan
sebuah tag td.<br>
<h4>Satu
kolom:</h4>
<table
border="1">
<tr><td>100</td></tr>
</table>
<h4>Satu baris tiga
kolom:</h4>
<table
border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Dua baris tiga
kolom:</h4>
<table
border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Tabel dengan Caption
Listing 8.2
Coba_tabelcaption
<!--coba_tabelcaption.html-->
<html>
<body>
<h4>This table has a
caption, and a thick border</h4>
<table
border="6">
<caption>My
Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Header
Listing 8.3
Coba_tabelheader
<!--coba_tabelheader.html-->
<html>
<body>
<h4>Table Headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th> Telephone</th>
</tr>
<tr>
<td>Joe</td>
<td>224445</td>
<td>0811211211</td>
</tr>
</table>
<h4>Vertical
Headers::</h4>
<table
border="1">
<tr>
<th>Name</th>
<td>Joe</td>
</tr>
<tr>
<th>Telephone</th>
<td>224445</td>
</tr>
<tr>
<th>Telephone</th>
<td>0811211211</td>
</tr>
</table>
</body>
</html>
Colspan dan Rowspan
Listing 8.4
Coba_tabelspan
<!--coba_tabelspan.html-->
<html>
<body>
<h4>Cell that spans two
colums</h4>
<table
border="1">
<tr>
<th>Name</th>
<th colspan=”2”>Telephone</th>
</tr>
<tr>
<td>Joe</td>
<td>224445</td>
<td>0811211211</td>
</tr>
</table>
<h4> Cell that spans
two rows:</h4>
<table
border="1">
<tr>
<th>Name</th>
<td>Joe</td>
</tr>
<tr>
<th colspan=”2”>Telephone</th>
<td>224445</td>
</tr>
<tr>
<td>0811211211</td>
</tr>
</table>
</body>
</html>
0 komentar:
Posting Komentar