Senin, 02 Maret 2009

Tips HTML Tabel

Sebelumnya telah saya tulis mengenai cara membuat tabel. Tips HTML kali ini adalah tentang bagaimana menggabungkan kolom-kolom dan baris-baris dalam tabel.

Berikut saya akan berikan contoh tabel dengan 3 kolom dan 3 baris.

<TABEL width="100%" border="1">
<TR>
<TD width="33%"> Kolom 1, Baris 1 </TD>
<TD width="33%"> Kolom 2, Baris 1 </TD>
<TD width="33%"> Kolom 3, Baris 1 </TD>
</TR>
<TR>
<TD width="33%"> Kolom 1, Baris 2 </TD>
<TD width="33%"> Kolom 2, Baris 2 </TD>
<TD width="33%"> Kolom 3, Baris 2 </TD>
</TR>
<TR>
<TD width="33%"> Kolom 1, Baris 3 </TD>
<TD width="33%"> Kolom 2, Baris 3 </TD>
<TD width="33%"> Kolom 3, Baris 3 </TD>
</TR>
</TABEL>

Tag tabel di atas akan menghasilkan tabel dengan 3 kolom dan 3 baris seperti
yang ditampilkan di bawah ini:

Kolom 1, Baris 1 Kolom 2, Baris 1 Kolom 3, Baris 1
Kolom 1, Baris 2 Kolom 2, Baris 2 Kolom 3, Baris 2
Kolom 1, Baris 3 Kolom 2, Baris 3 Kolom 3, Baris 3


Kemudian, kita akan menggabungkan sel (merge cell) yaitu kolom 1 sampai 3, pada baris pertama / baris satu. Maka kita akan membuang 2 tag TD dan menambahkan perintah colspan pada baris tag pertama. Lihat contoh berikut:

<TABEL width="100%" border="1">
<TR>
<TD width="100%" colspan="3" > Cell yang digabungkan </TD>
</TR>
<TR>
<TD width="33%"> Kolom 1, Baris 2 </TD>
<TD width="33%"> Kolom 2, Baris 2 </TD>
<TD width="33%"> Kolom 3, Baris 2 </TD>
</TR>
<TR>
<TD width="33%"> Kolom 1, Baris 3 </TD>
<TD width="33%"> Kolom 2, Baris 3 </TD>
<TD width="33%"> Kolom 3, Baris 3 </TD>
</TR>
</TABEL>


Hasil penggabungan cell (3 kolom) terlihat seperti ini:
Cell yang digabungkan
Kolom 1, Baris 2Kolom 2, Baris 2Kolom 3, Baris 2
Kolom 1, Baris 3Kolom 2, Baris 3Kolom 3, Baris 3


Latihan Untuk Anda:
Lakukan juga pada baris ke-tiga, kemudian ubah kolom pertama pada baris ke-dua menjadi 20%, kolom ke-tiga pada baris ke-2 menjadi 20%, yang terahir kolom ke-dua pada baris ke-2 menjadi 60%.

Maka seharusnya tabel di atas akan menjadi seperti di bawah ini:

 
lebar 20%Lebar 60%Lebar 20%
 


Tabel dengan 3 kolom dan 3 baris di atas bisa diimplementasikan untuk membuat template halaman web, di mana pada kolom pertama bisa Anda buat sebagai sidebar kiri, kolom tengah adalah bagian utama, kolom paling kanan menjadi sidebar kanan.

Semakin sering Anda membuat posting dengan menuliskan secara langsung tag-tag HTML, Anda akan trbiasa dan mahir dengan sendirinya.










Tidak ada komentar:

Posting Komentar