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 ini:

Perilaku Seindah Az-Zahrah - coretan harian seorang muslimah -
Link 1 Link 2

Dengan coding :

<table width="400px" border="1" cellpadding="3" cellspacing="0" bordercolor="#E2BBD7">
<tr bgcolor="#E2BBD7">
<td height="70px" colspan="3"><div align="center"><font
color="#813D6E"><strong>Perilaku Seindah Az-Zahrah<br>-
coretan harian seorang muslimah -</strong></font></div></td>
</tr>
<tr>
<td width="25%" valign="top" bgcolor="#EFCAE4">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a> <br>
</td>
<td width="50%" valign="top" bgcolor="#FDF3FA">
<p> </p></td>
<td width="25%" valign="top" bgcolor="#EFCAE4"> </td>
</tr>
</table>

selamat mencoba....

Lihat tutorial lainnya di Azzahrah Design