Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web “terbagi” pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>
<TABLE>
Terdiri dari atribut :
- align – perataan : rata kiri (left), tengah (center) atau kanan (right).
- bgcolor – warna latar belakang (background) dari tabel.
- border – ukuran lebar border tabel (dalam pixel).
- cellpadding – jarak antara isi cell dengan batas cell (dalam pixel).
- cellspacing – jarak antar cell (dalam pixel).
- width – ukuran tabel dalam pixel atau percent.
Contoh :
<TABLE align=”center” bgcolor=”#0000FF” border=”2″ cellpadding=”5″ cellspacing=”2″ width=”90%”>
<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
- align – perataan : rata kiri (left), tengah (center) atau kanan (right).
- bgcolor – warna latar belakang dari baris.
- valign – perataan vertikal : top, middle atau bottom.
Contoh :
<TR align=”right” bgcolor=”#0000FF” valign=top>
<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.
- align – perataan
- background – image yang digunakan sebagai latar belakang dari kolom.
- bgcolor – warna latar belakang
- colspan – lihat gambar contoh
- height – ukuran tinggi cell dalam pixels.
- nowrap – membuat supaya isi dari kolom tetap berada pada satu baris.
- rowspan – lihat gambar contoh
- valign – perataan vertikal :top, middle atau bottom.
- width – ukuran kolom dalam pixel atau percen.
Contoh :
<TD align=”right” background=”back.gif” bgcolor=”#0000FF” colspan=”3″ height=”200″ nowrap rowspan=”2″ valign=”bottom” width=”300″>
|
|
<table width=”100″ border=”1″ cellspacing=”2″ cellpadding=”2″> <tr> <td bgcolor=”#0000FF”> </td> <td bgcolor=”#FFFF66″> </td> <td rowspan=”2″ bgcolor=”#FF3366″> </td> </tr> <tr> <td colspan=”2″ bgcolor=”#33CC66″> </td> </tr> <tr> <td colspan=”3″ bgcolor=”#FFCC99″> </td> </tr> </table> |
||||||||
|
|
<table width=”100″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td bgcolor=”#0000FF”> </td> <td bgcolor=”#FFFF66″> </td> <td rowspan=”2″ bgcolor=”#FF3366″> </td> </tr> <tr> <td colspan=”2″ bgcolor=”#33CC66″> </td> </tr> <tr> <td colspan=”3″ bgcolor=”#FFCC99″> </td> </tr> </table> |
||||||||
Artikel Lainnya
- Tutorial HTML: Mengenal Lists ShareTerdapat tiga tipe list yang dapat digunakan, yaitu : Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>. Contoh : <UL> <LI> Item...
- Tutorial HTML: Images Share Images : Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height Contoh : <IMG SRC=”logo.gif”...
- Struktur dasar HTML ShareHTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan...
- Tutorial HTML: Pengaturan Teks ShareUntuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks...
- Tutorial HTML: Pendahuluan ShareSebelum kita melangkah lebih jauh ada baiknya Anda tahu apa itu HTML. HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke...
wah makasih bangat gan infonya…
ana newbie nih di dunia maya….
makasih gan infonya
sangat membantu
ok thanks ya infonya,, kunjungan balik www dot dutajutawan dot com
ni yang aq cari,,,,
thx ya infonya ….
–>>>> poetra25.blogspot.com
Waow!! ndak mudeng aku mas. But, nice share ya mas.
thx gan infonya ….. mantab…
Wah gan~
ada contoh semuanya plus fotonya gak?
Ane butuh banget ni gan~
Plisss~