BAB 4
Ø
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>
LATIHAN 1
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">Riris</td>
</tr>
<tr>
<td width="100">0856789123</td>
<td width="150">Olvhy</td>
</tr>
</table>
</body>
<html>
OUTPUTNYA:
LATIHAN 2
<html>
<head>
<title>Contoh Table Dengan Cospolan</title>
</head>
<body>
<table border="0" cellpadding="2"with="300">
<tr>
<td colspan="2"with="296="center"
bgcolor="#9999FF"><b>Jadwal Kuliah</b></td>
</tr>
<td with="141"align="center"
bgcolor="#99CCFF">senin</td>
<td width="153"align="center"
bgcolor="#99CCFF">Selasa</td>
</tr>
<tr>
<td width="141"align="center"
bgcolor="#99CCFF">Nyangkul</td>
<td width="153"align="center"
bgcolor="#99CCFF">Ngarambet</td>
</tr>
</table>
</body>
</html>
OUTPUTNYA:
LATIHAN 3
<html>
<head>
<title>Contoh Tabel Dengan Colspan
Bertingkat</title>
</head>
<body>
<table bgcolor=#FFFFCC width="301"border="1"
cellpadding="2">
<tr>
<td colspan="3"align="center"width="136"
bgcolor="#FFCC66"><b>Quarter 1</b></td>
<td colspan="3"align="center"width="153"
bgcolor="#FFCC66"><b>Quarter 2</b></td>
</tr>
<tr align="center">
<td width="38"><b>Jan</b></td>
<td width="48"><b>Feb</b></td>
<td width="42"><b>Mar</b></td>
<td width="46"><b>Apr</b></td>
<td width="54"><b>May</b></td>
<td width="45"><b>Jun</b></td>
</tr>
<tr>
<td width="38"><b>100</b></td>
<td width="48"><b>5000</b></td>
<td width="42"><b>200</b></td>
<td width="46"><b>1500</b></td>
<td width="54"><b>2500</b></td>
<td width="45"><b>1750</b></td>
</tr>
<tr>
<td width="38"><b>290</b></td>
<td width="48"><b>5050</b></td>
<td width="42"><b>2300</b></td>
<td width="46"><b>100</b></td>
<td width="54"><b>270</b></td>
<td width="45"><b>300</b></td>
</tr>
</table>
</body>
</html>
OUTPUTNYA :
LATIHAN 4
html>
<head>
<title> Contoh Tabel Dengan Coslpan</title>
</head>
<body>
<table border="4"cellpadding="8"width="300">
<tr>
<td rowspan="2"bgcolor="#00CC00"><p
align="center">Satu</td>
<td bgcolor="#99FF33">Dua</td>
<td bgcolor="#99FF33">Tiga</td>
<td bgcolor="#99FF33">Empat</td>
</tr>
<tr>
<td bgcolor="#CCFF99">Dua</td>
<td bgcolor="#CCFF99">Tiga</td>
<td bgcolor="#CCFF99">Empat</td>
</tr>
</table>
</body>
</html>
OUTPUTNYA:
LATIHAN 5
<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>
OUTPUTNYA:
SEKIAN BAB 4 DARI SAYA. SMOGA BERMANFAAT YA..
THANK'S :)
Tidak ada komentar:
Posting Komentar