|
Menggunakan
Table
TAG Table ini sangat berguna untuk mengadakan pengaturan komposisi halaman dan paling membantu dalam menyusun sebuah dokumen dalam HTML. Untuk mengkonstruksi sebuah interface (antarmuka) secara grafik dan berbagai interaktifitas pengguna.
Tag Table ini bersifat Blok dan akan terlihat sebagai berikut:
<TABLE>
</TABLE>
Di dalam blok tersbut kita menytakan jumlah baris dan dalam baris tersebut kita menyatakan jumlah kolom yang akan kita gunakan.
Untuk menciptakan baris gunakan tag berikut dalam blok Tag TABLE:
<TR>
</TR>
Di dalam tag baris di atas kita spesifikasikan kolom seperti ini :
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
TD berarti Table Data. Segala informasi yang ingin kita tampilan dalam table di letakkan di antara Tag TD ini. Menambahkan beberapa TD lagi akan menambahkan jumlah kolem dalam Table anda.
<TABLE BORDER=1>
<TR>
<TD>Pekerjaan:</TD>
<TD>Petani</TD>
</TR>
</TABLE>
Kode di atas akan tampil dalam halaman browser kita sebagai berikut:
Ini adalah contoh lain :
|
Name: |
Paijo |
|
Pekerjaan: |
Petani |
Ada tambahan baris, dan kode-nya akan terlihat sebagai berikut :
<TABLE>
<TR>
<TD>Name:</TD>
<TD>Paijo</TD>
</TR>
<TR>
<TD>Pekerjaan:</TD>
<TD>Petani</TD>
</TR>
</TABLE>
Untuk membuat sebuah kolom melebar melewati kolom–kolom lainnya, kode yang digunakan adalah colspan (column expand) diikuti dengan value dri berapa jumlah kolom yang akan dilewati.
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2><CENTER><B>Database</B></CENTER></TD>
</TR>
<TR>
<TD>Name:</TD>
<TD>Paijo</TD>
</TR>
<TR>
<TD>Pekerjaan:</TD>
<TD>Petani</TD>
</TR>
<TR>
<TD>Pendidikan</TD>
<TD>SMA</TD>
</TR>
</TABLE>
Table akan terlihat sebagai berikut :
|
Database |
|
Name: |
Paijo |
|
Pekerjaan: |
Petani |
|
Pendidikan |
SMA |
REVIEW
Secara garis besar cara kerja Tag TABLE adalah sebagai berikut:
Segala data disimpan di antara blok table.
Baris Tabel <TR>: perintah ini memunculkan sebuah baris dalam
tabel
Kolom Tabel <TD>: bagian ini menciptakan sebuah klom yang akan
diisi data apapun yang berada di antaranya.
Beberapa atribut yang dapat digunakan dalam Tag TABLE adalah sebagai berikut :
<TABLE>
|
CELLPADDING |
Menggatur jarak antara
isi yang tersimpan dalam
sebuah sel dengan border sel |
Jumlah Pixel |
|
CELLSPACING |
Spasi yang akan memberi jarak
antar sel satu sama lain |
Jumlah Pixel |
|
BORDER |
Besaran border, tepian dari table
dan antar sel |
Jumlah Pixel |
|
BGCOLOR |
Warna latar dari table |
Warna, atau nilai hexa
desimal warna |
|
BACKGROUND |
The URL dari gambar yang ingin
dipakai dalam background tabel. |
JPG or GIF source |
|
ALIGN |
Pengaturan pe-rata-an data |
LEFT, RIGHT, CENTER |
|
WIDTH |
Lebar table |
Nilai dalam jumlah pixel
atau persen |
|
HEIGHT |
Tinggi table |
Nilai dalam jumlah pixel
atau persen |
<TR>
|
VALIGN |
Pengaturan alinea dalam
baris sel secara vertikal |
TOP, MIDDLE, BOTTOM,
BASELINE |
|
ALIGN |
Pengaturan alinea dalam
baris sel secara horizontal |
RIGHT, LEFT, CENTER,
JUSTIFY |
|
BORDERCOLOR |
Warna tepian (border) |
Warna, atau nilai hexa
desimal warna |
|
BORDERCOLORLIGHT |
Warna bagian atas dari
border |
Warna, atau nilai hexa
desimal warna |
|
BORDERCOLORDARK |
Warna bagian bawah border |
Warna, atau nilai hexa
desimal warna |
|
BGCOLOR |
Warna latar dari sel |
Warna, atau nilai hexa
desimal warna |
<TD>
|
VALIGN |
Pengaturan alinea dalam
baris sel
secara vertikal |
TOP, MIDDLE, BOTTOM,
BASELINE |
|
ALIGN |
Pengaturan alinea dalam
baris sel
secara horizontal |
RIGHT, LEFT, CENTER,
JUSTIFY |
|
ROWSPAN |
Number of rows the cell
spans across |
Jumlah Baris |
|
COLSPAN |
Number of columns the cell
spans across |
Jumlah Kolom |
|
BGCOLOR |
Warna latar |
Warna, atau nilai hexa
desimal warna |
|
BACKGROUND |
URL dari data yang akan
digunakan sebagai latar belakang dapat berupa gambar. |
Source file |
Contoh Penggunaan Table dalam Table
<TABLE BORDER="1" WIDTH="100%" CELLPADDING="10">
<TR><TD BACKGROUND="background.jpg">
<TABLE BORDER="2" CELLPADDING="10" CELLSPACING="1">
<TR BGCOLOR="blue"><TD ALIGN="center">
<FONT COLOR="white" SIZE="4"><B>WEB HOSTING </B></FONT></TD>
</TR>
<TR><TD BGCOLOR="aqua" NOWRAP>
<LI><A HREF=http://www.tripod.com>Tripod</A> (6 MB)
<LI><A HREF=http://www.geocities.com>Geocities</A> (5 MB)
<LI><A HREF=http://www.hypermart.net>Hypermart</A> (2 MB)
<LI><A HREF=http://www.freeservers.com>Freeservers</A> (5 MB)
<LI><A HREF=http://www.angelfire.com>Angelfire</A> (4 MB)
<LI><A HREF=http://www.rileks.com/>Rileks</A> (± 5 MB)</TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>
Contoh Penggunaan Table Untuk
Menampilkan Gambar
Contoh
<table border="0" width="100%">
<tr>
<td>Border = 1
<table BORDER="1">
<tr><td><img SRC="images.jpg"></td></tr>
</table>
</td>
<td>Border = 5
<table BORDER="5">
<tr><td><img SRC="images.jpg"></td></tr>
</table>
</td>
<td>Border = 12
<table BORDER="12">
<tr><td><img SRC="images.jpg"></td></tr>
</table>
</td>
</tr>
</table>
| Border = 1
|
Border = 5
|
Border = 12
|
Contoh Lain Penggunaan Table
Pada contoh ini anda bisa melihat kodenya dan hasilnya yang ada di bagian bawahnya
<TABLE BORDER="1" WIDTH="500"><TR><TD WIDTH="25%">Cell One</TD><TD WIDTH="15%">Cell Two</TD><TD WIDTH="60%">Cell Three</TD></TR></TABLE>
| Cell One | Cell Two | Cell Three |
<TABLE BORDER="2"WIDTH="75%"><TR><TD>Cell One</TD></TR>
<TR><TD ALIGN="CENTER">Cell Two</TD></TR><TR><TD ALIGN=
"RIGHT">Cell Three</TD></TR></TABLE>
| Cell One | | Cell Two | | cell three |
<TABLE BORDER="3" ALIGN="CENTER" WIDTH="500"><TR ALIGN="CENTER"><TD>Cell One</TD><TD>Cell Two</TD></TR><TR><TD ALIGN="RIGHT">Cell Three</TD><TD>Cell Four</TD></TR></TABLE>
| Cell One | Cell Two | | Cell Three | Cell Four |
<TABLE BORDER="4" ALIGN="CENTER" WIDTH="500" CELLPADDING="10"><TR ALIGN="CENTER"><TD COLSPAN="2">Cell One</TD></TR><TR><TD>Cell Two</TD><TD ALIGN="RIGHT">Cell Three</TD></TR></TABLE>
| Cell One | | Cell Two | Cell Three |
<TABLE BORDER="10" ALIGN="CENTER" WIDTH="500" CELLSPACING="5"><TR><TD ROWSPAN="3" ALIGN="CENTER">Cell One</TD><TD>Cell Two</TD></TR><TR><TD ALIGN="CENTER">Cell Three</TD></TR><TR><TD ALIGN="RIGHT">Cell Four</TD></TR></TABLE>
| Cell One | Cell two | | Cell Three | | Cell Four |
<TABLE BORDER="2" BORDERCOLOR="#FF0000" WIDTH="500" CELLSPACING="10"><TR><TD COLSPAN="2" ALIGN="CENTER">Cell One</TD></TR><TR><TD ROWSPAN="3" ALIGN="CENTER">Cell Two</TD><TD>Cell Three</TD></TR><TR><TD ALIGN="CENTER">Cell Four</TD></TR><TR><TD ALIGN="RIGHT">Cell Five</TD></TR></TABLE>
| Cell One | | Cell Two | Cell Three | | Cell Four | | Cell Five |
<TABLE BORDER="3" BORDERCOLOR="#0000FF" WIDTH="500" CELLSPACING="5"><TR><TD ROWSPAN="2" ALIGN="CENTER">Cell One</TD><TD ALIGN="CENTER">Cell Two</TD><TD ROWSPAN="2" ALIGN="CENTER">Cell Three</TD><TR><TD ALIGN="CENTER">Cell Four</TD></TR><TR><TD COLSPAN="3" ALIGN="CENTER">Cell Five</TD></TR></TABLE>
| Cell One | Cell Two | Cell Three | | Cell Four | | Cell Five |
|
