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:

Pekerjaan:

Petani

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 :

Attributes
Description
Values
<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> (&plusmn; 5 MB)</TD>
</TR>
</TABLE>

</TD></TR>
</TABLE>

WEB HOSTING
  • Tripod (6 MB)
  • Geocities (5 MB)
  • Hypermart (2 MB)
  • Freeservers (5 MB)
  • Angelfire (4 MB)
  • Rileks (± 5 MB)


  •  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 OneCell TwoCell 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 OneCell Two
    Cell ThreeCell 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 TwoCell 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 OneCell 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 TwoCell 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 OneCell TwoCell Three
    Cell Four
    Cell Five



    KEMBALI KE DAFTAR ISI



    By Joko Setiawan, Klaten, 10 Juni 2003.