TABEL
Didalam membuat suatu tabel dalam pembuatan web diperbolehkan, antara lain:
- Digunakan untuk menyajikan data dalam bentuk kolom dan baris
- Tabel juga dapat dipergunakan sebagai LayOut dari document HTML
- Diperbolehkan membuat table dalam table
Tag-tag yang ada dan dipergunakan dalam tabel, seperti:
- <table> .. </table>
Fungsinya adalah mendefinisikan sebuah table dan jika atribut border didefinisikan maka tabel akan diberi border/bingkai
- <tr>.. </tr>
Mendefinisikan sebuah baris dalam table
- <td>..</td>
Mendefinisikan sebuah sel, bagian ini yang dapat diisi informasi
- <caption>..</caption>
Mendefinisikan Caption
- <th>..</th>
Mendefinisikan heading
Contoh:
<html>
<head>
<title>Pembuatan Tabel</title>
</head>
<body>
Satu kolom
<table border="1">
<tr>
<td>10</td>
</tr>
</table>
<br>
Satu baris dan tiga kolom
<table border="1">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
</table>
<br>
Dua baris dan tiga kolom
<table border="1">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
</table>
</body>
</html>
Contoh:
<body>
<h2>Table headers</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Alamat</th>
<th>Nomor Telp.</th>
</tr>
<tr>
<td>Putri</td>
<td>Kediri</td>
<td>333 77 999</td>
</tr>
</table>
<h2>Vertical headers</h2>
<table border="1">
<tr>
<th>First Name:</th>
<td>Putri</td>
</tr>
<tr>
<th>Alamat:</th>
<td>Kediri</td>
</tr>
<tr>
<th>Nomor Telp:</th>
<td>333 77 999</td>
</tr>
</table>
</body>
Contoh:
<body>
<h2>Table Caption</h2>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
</table>
</body>
Sedangkan atribut-atribut yang dipergunakan dalam tabel, seperti:
- Width untuk mengatur lebar dari tabel berupa pixel atau persen
- Border untuk mengatur ukuran bingkai tabel
- Cellspacing untuk mengatur jarak antar cel
- Cellspadding untuk mengatur jarak bingkai dengan isi
- Align untuk mengatur perataan tengah, kanan atau kiri
- Bgcolor untuk mengatur warna dasar belakang tabel
Contoh:
<body>
<h4>Pembuatan Cellspacing</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
Contoh:
<body>
<h4>Pembuatan Cellspadding</h4>
<table border="1“ cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
Contoh:
<body>
<h4>Pembuatan Align</h4>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
- Atribut TD
- Rowspan untuk menggabungkan beberapa baris menjadi satu
- Colspan untuk menggabungkan beberapa kolom menjadi satu
Contoh:
<body>
<h4>Pembuatan Colspan</h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Alamat</th>
</tr>
<tr>
<td>Maya</td>
<td>Kediri</td>
<td>Malang</td>
</tr>
</table>
</body>
Contoh:
<body>
<h4>Pembuatan Rowspan</h4>
<table border="1">
<tr>
<th>First Name</th>
<td>Putri</td>
</tr>
<tr>
<th rowspan="2">Alamat</th>
<td>Kediri</td>
</tr>
<tr>
<td>Malang</td>
</tr>
</table>
</body>
No comments:
Post a Comment