Ø TABEL
1. Membangun
Table
Terdapat
3 tag tama yang digunakan dalam pembuatan tabel,yaitu:
<table>,<tr>,<td>. Yang perlu diingat adalah bahwa tab
<tr> dan <td> harus terletak diantara tag <table> dan
</table>
2. Heading
Table
Heading table adalah istilah yang
digunakan karena isi sel dalam tabel dijadikan judul atau dengan sebutan lain
judul kolom. Untuk membuat heading table digunakan elemen <th>
yang merupakan singkatan dari table
heading. Elemen ini kita gunakan untuk menggantikan elemen <td>.
Ø Contoh :
<body>
<table border="2">
<caption align="bottom">Judul Table</caption>
<thead align="right"><tr><td>Header
Tabel</td></tr></thead>
<tfoot align="center"><tr><td>Footer
Table</td></tr></tfoot>
<tbody>
<tr>
<th>Header Satu</th>
<th>Header Dua</th>
</tr>
<tr>
<td>Isi Body Cell Satu</td>
<td>Isi Body Cell Dua</td>
</tr>
</body>
</table>
</html>
3. Judul table
dan grup kolom
Untuk
membuat judul tabel,kita gunakan elemen <caption>.
Elemen ini ditulis setelah tag pembuka <table>
sebelum tag <row>.
4. Tag
<table>
Terdiri
dari atribut :
a. Align-perataan
: rata kiri(left),tengah(center),kanan (right)
b. bgcolor
:warna latar belakang (background) dari table.
c. Border :
ukuran lebar border tabel (dalam pixel)
d. Cellpadding
: jarak antar isi cell dengan batas cell (dalam pixel)
e. Cellspacing
: jarak antar cell (dalam pixel)
f.
Width : ukuran tabel dalam pixel atau percent.
5. Tag
<tr>
Tag
ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari :
1. Align-pertaan
2. Bgcolor-warna
latar belakang garis
3. Valign-perataan
vertikal :top,middle atau bottom.
Ø Contoh :
<html>
<head>
<title>Contoh
Tabel 2 Dimensi</title>
</head>
<body>
<table
border="1"cellpadding="2"width="250">
<caption><b>Tabel
Telepon</caption></b>
<tr>
<th
width="100"bgcolor="lavender">Telepon</th>
<th
width="150"bgcolor="lavender">Nama</th>
</tr>
<tr>
<td
width="100">08123456789</td>
<td
width="150">Sorta</td>
</tr>
<tr>
<td
width="100">08523456789</td>
<td
width="150">Maria</td>
</tr>
</table>
</body>
<html>
6. Tag
<td>
Tag
digunakan untuk membuat kolom baru pada table
Atribut
rowspan digunakan untuk menggabungkan beberapa buah baris menjadi satu.
Sedangkan colspan digunakan untuk menggabungkan beberapa kolom menjadi satu.
Ø Contoh :
<html>
<head>
<title>Contoh Tabel Dengan
Colspan dan Rowspan</title>
</head>
<body>
<table
border="1"width="363"bgcolor="#99FF33">
<tr>
<td
colspan="2"rowspan="2"
width="141"> </td>
<td colspan="2"
width="215"
align="center"><b>COLSPAN</b></td>
</tr>
<tr>
<td
width="110"align="center"><b>Kolom
1</b></td>
<td
width="104"align="center"><b>Kolom
2</b></td>
</tr>
<tr>
<td
rowspan="2"width="79"><b>ROWSPAN</b></td>
<td
width="60"align="center"><b>Baris
1</b></td>
<td
width="110"><b>Baris 1,Kolom 1</td>
<td
width="104"><b>Baris 1,Kolom 2</td>
</tr>
<tr>
<td width="60"align="center"><b>Baris
2</b></td>
<td
width="110"><b>Baris 2,Kolom 1</td>
<td
width="104"><b>Baris 2,Kolom 3</td>
</tr>
</table>
</body>
</html>
output nya :
output nya :
Tidak ada komentar:
Posting Komentar