Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris.
Umumnya setiap kolom menunjukan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukan kelompok data dalam satu kesatuan.
Sebuah tabel mempunyai judul, kolom dan baris, baris untuk informasi, dan sel untuk setiap ite, berikut dijelaskan tag untuk
elemen-elemen tabel:Atribut yang didefinisikan dalam <th>,,</th> atau <td>,,</td> akan menggantikan alignment default yang didefinisikan dalam <tr>,,</tr>. Listing 5.1 mendemontrasikan bagaimana membuat tabel dalam sebuah dokumen HTML dan hasil 5.1. menunjukan hasil dari program.
Listing 5.1
<!-coba_tabel.html->
<html>
<body>
<p>
setiap tabel dimulai dengan sebuah tag table.
setiap baris dimulai dengan sebuah tag tr.
setiap data dimulai dengan sebuah tag dt.
</p>
<h4>satu kolom</h4>
<table border="1">
<tr>
<td>
100
</td>
</tr>
</table>
<h4>satu baris dengan tiga kolom:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>dua baris dan 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>
</p>
</body>
</html>
Jumlah baris tabel ditentukan dengan banyaknya <tr>,,,</tr> yang dituliskan dalam elemen tabel, dari <table>,,</table>. Jumlah kolom dalam tabel ditentukan dengan banyaknya <td>,,</td> didalam setiap baris, dari <tr>,,</tr>. Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.
Border Tabel
Border tabel dapat dibuat berbeda, listing 5.2 mendemontrasikan border tabel yang berbeda.
Listing 5.2
<!tabel_border.html
<html>
<body>
<p>
<h4>Dengan border normal</h4>
<table border="1">
<tr>
<td>Kesatu</td>
<td>Barisnya</td>
</tr>
<tr>
<td>Kesatu</td>
<td>Barisnya</td>
</tr>
</table>
<h4>dengan border tabel:</h4>
<table border="8">
<tr>
<td>Kesatu</td>
<td>Barisnya</td>
</tr>
<tr>
<td>Kesatu</td>
<td>Barisnya</td>
<h4>dengan baris yang sangat tebal:</h4>
<table border="15">
<tr>
<td>Kesatu</td>
<td>Barisnya</td>
</tr>
<tr>
<td>Kesatu</td>
<td>Barisnya</td>
<tr>
</table>
</body>
</html>
Tabel tanpa border
Listing 5.3 mendemontrasikan contoh program membuat tabel tanpa border.
Listing 5.3
<!-tabel_tanpa_border.html
<html>
<body>
<p>
<h4>this table has no border:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</p>
</body>
</html>
Tabel dengan caption
Listing 5.4 mendemontrasikan contoh program membuat tabel dengan caption.
Listing 5.4
<!-tabel_caption.html
<html>
<body>
<h4>this table has a caption, and a thick border:</h4>
<table border="6">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Header
Listing 5.5 mendemontrasikan membuat header dalam tabel
Listing 5.5
<!-tabel_header.html
<html>
<body>
<h4>table header:</h4>
<table border="1">
<tr>
<td>Name</td>
<td>telephone</td>
<td>HP</td>
</tr<
<tr>
<td>Bill gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>vertikal header:</h4>
<table border="1">
<tr>
<td>first name</td>
<td>bill gatess</td>
</tr>
<tr>
<td>telephone</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Colspan dan Rowspan
Listing 5.6 mendemontrasikan bagaimana untuk mendefinikan cell tabel yang dilebarkan lebih adari satu baris atau satu kolom.
Listing 5.6
<!-tabel_span.html
<html>
<body>
<h4>cell that span two columns</h4>
<table border="1">
<tr>
<th>Name</th>
<th>colspan="2">telephone</th>
</tr>
<tr>
<td>Bill gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>cell that span two rows:</h4>
<tr>
<th rowspan="2">telephone</th>
<td>555 777 854</td>
</tr>
</table>
</body>
</html>
Cellpadding
Listing 5.6 mendemontrasikan bagaimana menggunakan cellpadding untuk membuat spasi lebih dari antara sel dan bordernya.
Listing 5.6
<!-tabel_cellpadding.html
<html>
<body>
<h4>without cellpadding</h4>
<table border="1">
<tr>
<td>First</td>
<td>row</td>
</tr>
<tr>
<td>second</td>
<td>row</td>
</tr>
</table>
<h4>with cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>second</td>
<td>row</td>
</tr>
</table>
</body>
</html>
EmoticonEmoticon