TUTORIAL HTML 5
Sitenblog 10:05 PM
Kita langsung masuk ke pembahasan tabel berikutnya, OK ?
Kini kita akan membahas tentang WIDTH sekali lagi, hanya kali ini kita gunakan untuk tag <TD>. Tanpa menggunakan atribut ini, lebar kolom biasanya akan menyesuaikan diri sesuai dengan isi kolom. Sebagai contoh perhatikan kode HTML berikut:
<TABLE border="5">
<TR>
<TD>Pensil</TD>
<TD>Komputer IBM Thinkpad</TD>
<TD>Penghapus</TD>
</TR>
<TR>
<TD>Buku</TD>
<TD>Penggaris</TD>
<TD>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>
Kita lihat kode HTML di atas secara otomatis akan menghasilkan kolom yang lebar untuk sel yang isinya panjang, seperti terlihat pada tabel di bawah.
| Pensil | Komputer IBM Thinkpad | Penghapus |
| Buku | Penggaris | Buku Panduan Macromedia Flash MX |
Namun kita dapat mengatur lebar kolom sesuai keinginan dengan menggunakan atribut WIDTH di dalam tag <TD>. Contohnya adalah sebagai berikut:
<TABLE border="5">
<TR>
<TD WIDTH="200">Pensil</TD>
<TD WIDTH="100">Komputer IBM Thinkpad</TD>
<TD WIDTH="150">Penghapus</TD>
</TR>
<TR>
<TD>Buku</TD>
<TD>Penggaris</TD>
<TD>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>
Hasilnya akan terlihat sebagai berikut:
| Pensil | Komputer IBM Thinkpad | Penghapus |
| Buku | Penggaris | Buku Panduan Macromedia Flash MX |
Kita juga dapat memberikan nilai WIDTH berupa persentase, seperti contoh berikut:
<TABLE border="5" WIDTH="600">
<TR>
<TD WIDTH="40%">Pensil</TD>
<TD WIDTH="35%">Komputer IBM Thinkpad</TD>
<TD WIDTH="25%">Penghapus</TD>
</TR>
<TR>
<TD>Buku</TD>
<TD>Penggaris</TD>
<TD>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>
Hasilnya akan terlihat sebagai berikut:
| Pensil | Komputer IBM Thinkpad | Penghapus |
| Buku | Penggaris | Buku Panduan Macromedia Flash MX |
Sebagai catatan, jika menginginkan lebar tabel tetap walaupun window diperkecil hingga lebih kecil daripada lebar tabel, maka perlu menggunakan atribut WIDTH="angka (bukan persen)" di dalam tag <TABLE> bukan di dalam tag <TD>.
Sekarang kita akan bermain warna. Untuk memberi warna pada latar kita menggunakan atribut BGCOLOR yang dapat diletakkan pada tag <TABLE>, tag <TR> maupun tag <TD>. Kode warna yang digunakan sama dengan yang telah kita pelajari pada Tutorial HTML 1. Sebagai contoh, saya akan membuat sebuah tabel dengan latar belakang berwarna kuning. Maka kode yang saya gunakan adalah. O ya untuk mengubah warna tulisan tentu saja seperti biasa anda dapat mempergunakan tag <FONT> di dalam <TD>. Sebagai contoh tulisan komputer akan saya buat berwarna merah.
<TABLE border="5" BGCOLOR=#FFCC00>
<TR>
<TD>Pensil</TD>
<TD><font color="red"> Komputer IBM Thinkpad</font></TD>
<TD>Penghapus</TD>
</TR>
<TR>
<TD>Buku</TD>
<TD>Penggaris</TD>
<TD>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>
Lihat saya telah membuat latar berwarna kuning.
| Pensil | Komputer IBM Thinkpad | Penghapus |
| Buku | Penggaris | Buku Panduan Macromedia Flash MX |
Kode berikut ini akan membuat warna latar tiap sel berbeda:
<TABLE border="5">
<TR>
<TD BGCOLOR=#FFCC00>Pensil</TD>
<TD BGCOLOR=#00CCFF>Komputer IBM Thinkpad</TD>
<TD BGCOLOR=#FF00CC>Penghapus</TD>
</TR>
<TR>
<TD BGCOLOR=#00FFCC>Buku</TD>
<TD BGCOLOR=#CC00FF>Penggaris</TD>
<TD BGCOLOR=#CCFF00>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>
Hasilnya adalah sebagai berikut:
| Pensil | Komputer IBM Thinkpad | Penghapus |
| Buku | Penggaris | Buku Panduan Macromedia Flash MX |
Kini kita akan membicarakan tentang isi tabel. Tabel dapat kita isi apapun, sama seperti apapun. Kita dapat mengisinya dengan link, dengan gambar, bahkan kita dapat mengisinya dengan tabel lagi. Tabel juga dapat dipergunakan untuk membuat sebuah gambar berframe. Dua aplikasi tersebut akan saya contohkan dalam tutorial ini.
Yang pertama adalah membuat gambar berframe. Ini merupakan aplikasi yang mudah, karena hanya perlu membuat tabel satu sel dan mengisinya dengan gambar dan menggunakan atribut border sebagai frame. Berikut adalah kode HTML yang digunakan:
<TABLE border="10" BGCOLOR="yellow">
<TR>
<TD><IMG SRC="tintin.gif"></TD>
</TR>
</TABLE>
Hasilnya adalah sebagai berikut:
 |
Selanjutnya kita akan mencoba membuat layout disain sebuah hompej dengan memanfaatkan kemampuan yang telah kita miliki tentang tabel, termasuk memasukkan tabel dan link ke dalam tabel. Layout global yang kita gunakan kira-kira adalah sebagai berikut:
Banner Atas
Menu Samping Isi Menu Utama berupa tabel
Dan tabel untuk pengisi menu utama memiliki layout sebagai berikut:
Gambar Judul
Cerita
Keseluruhan isi hompej tersebut adalah sebagai berikut:
Kisah Petualangan Tintin
Cerutu Sang Faraoh
Rahasia Pulau Hitam
Tongkat Raja Ottokar
Kepiting Capit Belah
Bintang Jatuh
Tintin di Amerika
Tongkat Raja Ottokar
Cerita Tongkat Raja Ottokar mengisahkan petualangan tintin untuk menyelamatkan tongkat kerajaan yang hendak dicuri oleh lawan politik sang raja.
.
.
.
bla bla bla
.
.
.
bla bla bla
Anda tentu dapat membuat kode HTML untuk bentuk layout seperti di atas. Kode yang kami buat untuk persis menampilkan bentuk di atas dapat dilihat di sini.
Oleh Abdur Rahim
Posted by ibnuradinas.blogspot.com
Posted by Abol Ezz
on 10:05 PM.
Filed under
