Rabu, 15 April 2015


Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas
baris dan kolom. Didalam membuat tampilan website yang menarik, para programmer
sering menggunakan tabel untuk mempermudah penempatan objek pada dokumen
HTML.
Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag :
<table>..... </table>.

Elemen tabel berisi properti <tr>.....</tr> untuk menentukan baris (table row) yang di dalamnya
terdapat properti <td>.....</td> untuk menampilkan data pada setiap sel tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut:
<table>
<tr>
<td> data baris 1 kolom 1 </td>
<td> data baris 1 kolom 2 </td>
</tr>
<tr>
<td> data baris 2 kolom 1 </td>
<td> data baris 2 kolom 2 </td>
</tr>
</table>


Skrip Membuat Tabel sederhana
<html>
<head>
<title bgcolor="#FFFFCC">Latihan-7: Membuat table sederhana</title>
</head>
<body>
Berikut contoh tabel dengan rowspan dan colspan:
<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>

</tr>
</table>
</body>
</html>

Atribut elemen table

Width             = lebar tabel, pixel atau persen
Height            = tinggi tabel, pixel atau persen
Border           = tebal garis tepi, pixel
Cellspacing   = spasi antar sel, pixel
Cellpadding  = spasi di dalam sel, pixel
Align               = [ left | center | right ] (perataan tabel)
Bgcolor          = warna latar belakang table

Atribut table row <tr>

Align               = [ left | center | right ] (perataan sebaris sel secara horisontal)
Valign                        = [ top | middle | bottom ] (perataan sebaris sel secara vertikal)
Bgcolor          = warna latar belakang baris

Atribut table data <td>

Rowspan       = jumlah baris yang dispan oleh sel (penggabungan baris)
Colspan         = jumlah kolom yang dispan oleh sel (penggabungan kolom)
Align               = [ left | center | right ] (perataan horisontal)
Valign                        = [ top | middle | bottom ] (perataan vertikal)
Width             = lebar sel, pixel atau persen
Height            = tinggi sel, pixel atau persen
Bgcolor          = warna latar belakang table


Berikut Ini Contoh Sederhana Dalam Membuat Tabel.


 Script untuk membuat seperti contoh di atas:

<html>
</head>
<body>
<table width="672" border="1" align="center">
<tr>
<td height="154" colspan="2"><marquee behavior="scroll" direction="right" width="200">
<img src="koala.jpg" width="150" height="150"></marquee></td>
<td width="186" rowspan="2" align="center"><marquee behavior="scroll" direction="down" width="200"> <img src="pinguin.jpg" width="150" height="150"></marquee></td>
</tr>
<tr>
<td width="180" rowspan="2" align="center">
<marquee behavior="scroll" direction="up" width="200">
<img src="jellyfish.jpg" width="150" height="150"></marquee></td>
<td width="284" height="100" align="center">
<img src="Lighthouse.jpg" width="150" height="150"></div></td>
</tr>
<tr>
<td height="163" colspan="2" align="right">
 <marquee behavior="scroll" direction="left" width="200">
<img src="Tulips.jpg" width="150" height="150"> </marquee></td>
</tr>
</table>
</body>
</html>

1 komentar:

  1. Casino - Bracket betting guide for your chance to win
    The Casino is a unique casino that has been around for over a decade. It bsjeon.net has managed to offer great games such as 1등 사이트 Blackjack, septcasino Roulette and Video หาเงินออนไลน์ Poker,

    BalasHapus