Elemen pada tabel yang digunakan sebagai tempat untuk menuliskan informasi
yang nantinya akan ditampilkan di web browser adalah table data. Untuk
selanjutnya kita akan menyebut bagian ini sebagai kolom. Kolom dalam dokumen
HTML diwakili oleh tag <TD>.
Jenis – Jenis
Atribut pada Tag <TD>
Atrribut
|
Kegunaan
|
Align
|
Mengatur rataan
(horizontal)
Terdapat 3
(tiga) pilihan : left, center, atau right
|
Background
|
Menambahkan
image sebagai background kolom
|
Bgcolor
|
Mengatur warna
yang dijadikan background
|
Bordercolor
|
Mengatur warna
border
|
Colspan
|
Menggabungkan
kolom
|
Height
|
Mengatur tinggi
kolom
|
Rowspan
|
Menggabungkan
baris
|
Valign
|
Mengatur rataan
(vertikal)
Terdapat 3
(tiga) pilihan : top, middle, bottom
|
Width
|
Mengatur lebar
kolom
|
Contoh penerapan memformat baris dan
kolom :
<HTML>
<HEAD> <TITLE> Memformat Baris dan Kolom
</TITLE> </HEAD>
<BODY>
<TABLE BORDER=3>
<CAPTION>Daftar Order Barang</CAPTION>
<TH>No</TH>
<TH>Barang</TH>
<TH>Jenis</TH>
<TH>Harga</TH>
<TH>Jumlah</TH>
<TH>Total
Harga</TH>
<TR>
<TD
ALIGN=CENTER>1</TD>
<TD>Pocari
Sweat</TD>
<TD
ROWSPAN=2>Minuman</TD>
<TD>Rp.
4500</TD>
<TD
ALIGN=RIGHT>5</TD>
<TD>Rp.
22500</TD>
</TR>
<TR>
<TD
ALIGN=CENTER>2</TD>
<TD>Nutrisari
Jus Jeruk</TD>
<TD>Rp.
2450</TD>
<TD
ALIGN=RIGHT>3</TD>
<TD>Rp.
7350</TD>
</TR>
<TR>
<TD
ALIGN=CENTER>3</TD>
<TD>Kacang
Kulit Garuda</TD>
<TD
ROWSPAN=3>Makanan</TD>
<TD>Rp.
9800</TD>
<TD
ALIGN=RIGHT>2</TD>
<TD>Rp.
19600</TD>
</TR>
<TR>
<TD
ALIGN=CENTER>4</TD>
<TD>Tango
Coklat</TD>
<TD>Rp.
2750</TD>
<TD
ALIGN=RIGHT>1</TD>
<TD>Rp.
2750</TD>
</TR>
<TR>
<TD
ALIGN=CENTER>5</TD>
<TD>Snack
Ringan</TD>
<TD>Rp.
6450</TD>
<TD
ALIGN=RIGHT>2</TD>
<TD>Rp.
12900</TD>
</TR>
<TR HEIGHT=30
BORDERCOLOR="RED">
<TD COLSPAN=5
BGCOLOR="GRAY"><B>TOTAL</B></TD>
<TD
BGCOLOR="GRAY"><B>Rp. 65100</B></TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
Mengatur CELLSPACING dan CELLPADDING
Atribut
CELLSPACING adalah jumlah spasi yang dimasukkan diantara sel-sel dalam tabel.
Secara default cell spacing ini bernilai 2.
Atribut
CELLPADDING adalah jumlah spasi di antara border sel dan isi dari sel. Secara
default cell padding ini bernilai 1.
Contoh penggunaannya
adalah seperti ini :
<HTML>
<HEAD> <TITLE> Membuat CELLSPACING &
CELLPADDING </TITLE> </HEAD>
<BODY>
<TABLE BORDER=3 CELLSPACING=5
CELLPADDING=10>
<CAPTION>Peringkat
Kejuaraan Catur</CAPTION>
<TH>Peringkat</TH>
<TH>Medali</TH>
<TH>Pemenang</TH>
<TR>
<TD>1</TD>
<TD>Emas</TD>
<TD>Aditia
Warman</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Perak</TD>
<TD>Firmansyah</TD>
</TR>
<TR>
<TD>3</TD>
<TD>Perunggu</TD>
<TD>Indra
Bekti</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
Lebih Lanjut dengan Tabel
Tabel
dalam halaman web dapat berisi hyperlink, gambar, gambar yang menunjuk pada
hyperlink dan teks dengan huruf yang berwarna. Sebagai contoh, berikut ini akan
ditunjukkan penggunaan tabel dengan berbagai macam konten :
<HTML>
<HEAD> <TITLE>
Menyisipkan Gambar pada Tabel </TITLE> </HEAD>
<BODY>
<TABLE
BORDER=2>
<CAPTION>
Dokumentasi Fotograpi </CAPTION>
<TR>
<TD>1.</TD>
<TD>Pemandangan
Awan</TD>
<TD
ALIGN=CENTER>
<IMG
SRC="dock.jpg" width="100"
height="100"></TD>
</TR>
<TR>
<TD>2.</TD>
<TD>Hutan
Lindung</TD>
<TD
ALIGN=CENTER>
<IMG
SRC="forest.jpg" width="100"
height="100"></TD>
</TR>
<TR>
<TD>3.</TD>
<TD>Pinguin</TD>
<TD
ALIGN=CENTER>
<A
HREF="Student.html">
<IMG
SRC="image.jpg" ALT="Pinguin"></A></TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
0 comments:
Post a Comment