Tutorial 3 Kolom

Salah satu cara membuat 3
kolom adalah menggunakan
tabel dengan 3 kolom. Adapun
coding dasarnya adalah:
<table width="100%" border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td>Kolom kiri atas</td>
<td>Kolom tengah atas</td>
<td>Kolom kanan atas</td>
</tr>
<tr>
<td>Kolom kiri bawah</td>
<td>Kolom tengah bawah</td>
<td>Kolom kanan bawah</td>
</tr>
</table>

Mari kita telaah baris perbaris.
<table width="100%"
border="0" cellspacing="0"
cellpadding="0">
width="100%"
Gunakan ukuran 100% bila ingin
membuat tabel memenuhi 1
layar. Atau masukkan angka
770px untuk ukuran kecil.
border="0"
Ukuran border. Jika tidak ingin
border terlihat, maka tulislah
angka 0. Jika ingin menggunakan
border, isilah dengan angka.
Lalu, tetapkan warna boder,
misalnya
bordercolor="#000000" (hitam).
cellspacing="0" cellpadding="0"

Jarak antara kolom, baris, dan
tulisan. Jika tidak ingin ada jarak,
tetaplah gunakan angka 0 dan isi
dengan angka lain bila
menginginkan jarak. Idealnya
adalah gunakan angka 2 untuk
cellpadding.
<td>Kolom kiri atas</td>
Merupakan kolom di bagian kiri
barisan atas. Tetapkan
ukurannya dengan memasukkan
tag width. Boleh menggunakan
satuan % (25%) atau
menggunakan satuan px (150px).

Jika ingin menggunakan
background, tambahkan tag
background untuk file gambar
dan bgcolor untuk warna saja.
<td>Kolom tengah atas</td>
Merupakan kolom bagian
tengah barisan atas. Tetapkan
ukurannya dengan memasukkan
tag width. Boleh menggunakan
satuan % (50%) atau
menggunakan satuan px (470px).
Sama seperti kolom kiri, dapat
menggunakan variasi
background.
<td>Kolom kanan atas</td>
Merupakan kolom di bagian
kanan barisan atas. Tetapkan
ukurannya dengan memasukkan
tag width. Boleh menggunakan
satuan % (25%) atau
menggunakan satuan px (150px).
Sama seperti kolom kiri, dapat
menggunakan variasi
background.
Perhatikan bahwa komulatif
semua width (kiri, tengah, dan
atas) harus sama dengan ukuran
table.

Selanjutnya adalah baris
berikutnya dengan coding:
<tr>
<td>Kolom kiri bawah</td>
<td>Kolom tengah bawah</
td>
<td>Kolom kanan bawah</td>
</tr>
Bila ingin menambahkan baris,
gunakanlah coding seperti di
atas.

Hasil coding tabel 3 kolom (dan
2 baris) kita menjadi:
<table width="100%" border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td width="25%">Kolom kiri
atas</td>
<td width="50%">Kolom tengah
atas</td>
<td width="25%">Kolom kanan
atas</td>
</tr>
<tr>
<td>Kolom kiri bawah</td>
<td>Kolom tengah bawah</td>
<td>Kolom kanan bawah</td>
</tr>
</table>
Atau lihat contoh disini

Dengan coding :
<table width="400px"
border="1" cellpadding="3"
cellspacing="0"
bordercolor="#000033">
<tr bgcolor="#FFFFFF">
<td height="70px"
colspan="3">
<div
align="center"><font
color="#000033"><strong>
DIFAN96.BLOGSPOT.COM
<br>-Tutorial 3 Kolom-
</strong></font>
</div>
</td>
</tr>
<tr>
<td width="25%" valign="top"
bgcolor="#FF0000">
<a href="#1">Link 1</a><br>
<a href="#2">Link 2</a> <br>
</td>
<td width="50%" valign="top"
bgcolor="#FFFFFF"><p> </p>
</td>
<td width="25%" valign="top"
bgcolor="#FF0000"><a href="/3">Link 3</a><br/>
<a href="/4">Link 4</a><br/>
</td>
</tr>
</table>

Selamat mencoba....

Diposting oleh Difan96
POSTING BERKAITAN

TEMPLATE DESIGN BY
m-template | by: bagas96