Salah satu cara yang paling kompak dan paling mudah dibaca
dalam menampilkan item informasi adalah dengan tabel.
Manfaat Tabel:
1. Tabel dapat digunakan untuk menampilkan teks,
link, grafik atau item lainnya yang dapat dikirimkan ke tempat lain manapun
melalui halaman web.
2.Tabel dapat digunakan untuk menyajikan
informasi, atau bahkan dapat diperkuat dengan batas, warna, dan grafik
sedemikian rupa, sehingga tabel itu sendiri menjadi item – item dekorasi.
Rumus Table
<table>
<tr>
<td>Columns
Item</td>
<td>Columns
Item</td>
</tr>
<tr>
<td>Columns
Item</td>
<td>Columns
Item</td>
</tr>
</table>
Catatan : Tabel
dibentuk dari kiri atas, dan melintasi kolom - kolomnya. Setiap item diapit dengan tag <td></td>, dan setiap baris diapit dengan tag
<tr></tr>.
Contoh Table
1
<html>
<head>
<title>Latihan
17</title>
</head>
<body>
<table>
<tr>
<td>Earth</td>
<td>Air</td>
</tr>
<tr>
<td>Fire</td>
<td>Water</td>
</tr>
</table>
</body>
</html>
Table :
Table Properties:
o BORDER
= akan memberikan garis pembatas pada tabel.
o CELLSPACING
= akan menset jarak dalam piksel antara batas dalam dan batas luar.
o CELLPADDING=
akan menset jarak dalam piksel antara batas dalam dan teksnya.
o ALIGN
= penjajaran rata kanan, kiri atau tengah.
o BGCOLOR
= akan memberikan efek warna pada tabel.
o ROWSPAN
= untuk menset jumlah baris ke bawah.
o COLSPAN
= untuk menset jumlah kolom ke kanan.
o WIDTH
= untuk menset batas lebar / panjang tabel.
o HEIGHT
= untuk menset batas tinggi tabel.
Contoh Table 2
<html>
<head>
<title>Latihan
18</title>
</head>
<body>
<h3>Daftar
Nama Siswa</h3>
<table
border=1 cellpadding=3 cellspacing=3>
<tr>
<td align=center>NIM</td>
<td align=center>NAMA
LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
Contoh
Table 3
(kolom bewarna)
<html>
<head>
<title>Latihan
19</title>
</head>
<body>
<h3>Daftar
Nama Siswa</h3>
<table
border=1 cellpadding=3 cellspacing=3>
<tr
bgcolor=silver>
<td align=center>NIM</td>
<td align=center>NAMA
LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
Contoh Table
4
<html>
<head>
<title>Latihan
20</title>
</head>
<body>
<h3
align=center>Daftar Nama Siswa</h3>
<table
border=1 cellpadding=3 cellspacing=3
align=center>
<tr
bgcolor=silver>
<td align=center>NIM</td>
<td align=center>NAMA
LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
Contoh
Table 5
<html>
<head>
<title>Latihan
21</title>
</head>
<body>
<h3
align=center>Daftar Nama Siswa</h3>
<table
border=1 cellpadding=3 cellspacing=3
align=center>
<tr
bgcolor=silver>
<td align=center colspan=2>
NIM & NAMA LENGKAP
</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table></body></html>
Images & Table
<html>
<head>
<title>Latihan
27</title>
</head>
<body>
<table
border=10 cellspacing=10 cellpadding=10>
<tr>
<td><img
src=photo1.jpg width=200 height=200></td>
<td><img
src=photo2.jpg width=200 height=200></td>
<td><img
src=photo3.jpg width=200 height=200></td>
</tr>
<tr>
<td>Wallpaper1.JPG
800 X 600</td>
<td>Wallpaper2.JPG
800 X 600</td>
<td>Wallpaper3.JPG
800 X 600</td>
</tr>
</table>
</body>
</html>
Semoga Bermafaat.........................................................
No comments:
Post a Comment