Greenpeace SEA-Indonesia
12.34

Membuat Tabel pada HTML

Biasanya dalam sesuatu kita membuat website secara manual tanpa menggunakan Open source / CMS kita dianjurkan untuk membuatnya atau mendesaingnya dengan menggunakan tabel, karena peran tabel disini sangat lah dinamis dalam mengatur tataletak suatu obyek pada website. Setiap tag tabel tersebut memiliki banyak atribut. Oke langsung saja coba kode berikut ini:

Contoh:

<table border="1" width="60%">
<tr>
<td>Contoh Table</td>
</tr>
</table>

Hasilnya:





Contoh Table
Tabel diawali dengan tag <table> dan biasanya memiliki atribut border. Jika border="0" maka garis pada tabel tidak ditampilkan. Biasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut juga tidak memiliki garis. <table> memiliki atribut cellpadding untuk memberi jarak didalam kolom dan cellspacing untuk memberi jarak antara kolom.
Coba kode berikut ini:

berikut ini:

<table border="1" width="200" cellpadding="4" cellspacing="5">
<tr>
<td width="100">Cell 1</td>
<td width="100">Cell 2</td>
</tr>
</table>

Hasilnya :






Cell 1Cell 2
Dalam membuat tabel ada beberapa variasi, berikut ini adalah contoh desain tabel :
<table border="0" width="1000" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr>
<td width="300" td height ="50" valign="top" colspan="3" bgcolor="#FFFFFF" align="center">
Header</td>
</tr>
<tr>
<td width="300" td height ="500" align="center" bgcolor="#C0C0C0"><b>Isi</b></td>
<td width="500" td height ="500" align="center" bgcolor="#C0C0C0"><b>Isi</b></td>
<td width="300" td height ="500" align="center" bgcolor="#C0C0C0"><b>Isi</b></td>
</tr>
<tr>
<td width="500" td height ="50" valign="top" colspan="3" bgcolor="#FFFFFF" align="center">
Footer</td>
</tr>
</table>

Hasilnya :














Header
IsiIsiIsi

Footer

0 komentar:

Posting Komentar