Make your own free website on Tripod.com
Home
Biodata
HTML
Elemen dan Tag HTML
Memformat HTML (Bag.01)
Memformat HTML (Bag.02)
Table
Menyisipkan Gambar dan Link
E-Mail
Web Browser
Guest Book

T A B L E

  • Pemanfaatan TABLE (Tabel)

    Tabel biasanya digunakan untuk menempatkan data secara spreadset, tapi untuk desain suatu web. Selain untuk menempatkan data, tabel juga digunakan untuk merapikan teks ataupun gambar.

  • Tag Pembuatan Tabel

    Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah :
    Elemen
    Kegunaan
    TABLE
    Tag utama. Digunakan untuk memberitahu browser "ini adalah tabel", bersama dengan beberapa atribut seperti ukuran, lebar dan beberapa hal lagi. <TABLE>........</TABLE>
    TR
    Baris Tabel, yaitu baris-baris pada suatu tabel, yang dinyatakan dalam pasangan tag <TR>........</TR>
    TD
    Dta Tabel, yaitu tempat dimana informasi/data dimasukkan ke dalam tabel. Tabel data adalah kolom dari suatu baris tabel. Tabel data dinyatakan dengan tag <TD>........</TD>
    TH
    Judul Tabel, biasanya terletak di bagian paling atas atau paling kiri dari suatu tabel. Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedangkan tabel header yang terletak di bagian kiri adalah judul baris tabel. Tag yang digunakan adalah <TH>
    CAPTION
    Judul Tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel. Tag<CAPTION>........</CAPTION>
    Selain elemen-elemen di atas, tabel juga mempunyai bermacam-macam atribut yang dapat mempercantik bentu tabel tersebut, seperti atribut-atribut :
    Atribut
    Nilai
    Keterangan
    Border
    Angka 0, 1 dst
    Digunakan untuk menentukan tebal garis batas tepi tabel
    Cellspacing
    Angka 1, 2, 3 dst
    Digunakan untuk menentukan jumlah spasi/celah diantara tiap-tiap sel.
    Cellpadding
    Angka 1, 2, 3 dst
    Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel
    Width
    Pixel/Persentase
    Digunakan untuk mengatur lebar tabel, dapat menggunakan ukuran piksel atau piksel
    Align
    Left, Center, Right
    Digunakan untuk perataan tabel secara horizontal
    Valign
    Middle, Bottom, Baseline
    Digunakan untuk perataan tabel secara vertikal
    Bgcolor
    Warna/bilangan Hexadesimal
    Warna latar dari tabel atau pada sel
    Rowspan
    Angka 1, 2, 3 dst
    Menggunakan beberapa baris tabel
    Colspan
    Angka 1, 2, 3 dst
    Menggunakan beberapa kolom
Contoh Pembuatan Tabel :
<table border=5>
	<caption><b>Judul Tabel dengan Caption</b></caption>
		<tr>
			<td>Baris 1 Kolom 1</td>
			<td>Baris 1 Kolom 2</td>
			<td>Baris 1 Kolom 3</td>
		</tr>
		<tr>
			<td>Baris 2 Kolom 1</td>
			<td>Baris 2 Kolom 2</td>
			<td>Baris 2 Kolom 3</td>
		</tr>
</table>
<br>
<table border=5>
	<caption><b>Judul Tabel dengan Header</b></caption>
		<tr>
			<th>Baris 1 Kolom 1</th>
			<th>Baris 1 Kolom 2</th>
			<th>Baris 1 Kolom 3</th>
		</tr>
		<tr>
			<th>Baris 2 Kolom 1</th>
			<th>Baris 2 Kolom 2</th>
			<th>Baris 2 Kolom 3</th>
		</tr>
</table>
Maka hasil yang dapat diperoleh dari contoh pembuatan tabel di atas adalah :
Judul Tabel dengan Caption
Baris 1 Kolom 1
Baris 1 Kolom 2
Baris 1 Kolom 3
Baris 2 Kolom 1
Baris 1 Kolom 2
Baris 2 Kolom3
Judul Tabel dengan Header
Baris 1 Kolom 1
Baris 1 Kolom 2
Baris 1 Kolom 3
Baris 2 Kolom 1
Baris 1 Kolom 2
Baris 2 Kolom3

>> Pewarnaan Pada Tabel
Contohnya :
<center>
<table border=1 width="40%" bordercolorlight="red" bordercolordark="yellow"> <caption><h5>Warna pada tabel</h5> </caption> <tr bgcolor="yellow"> <td align="center">Warna Kuning</td> <td align="center">Warna Kuning</td> </tr> <tr > <td align="center" bgcolor="red">Warna Merah</td> <td align="center" bgcolor="green">Warna Hijau</td> </tr> </table> </center>
Hasil dari contoh di atas adalah sebagai berikut :

Warna Kuning
Warna Kuning
Warna Merah
Warna Hijau


Copyright © Atik Indah Widyaningsih
Bandung, Januari 2007
U N I K O M