Senin, 12 Desember 2011

Membuat Tabel (Table) pada HTML

Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> .

<TABLE>
Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut :
• align - perataan : rata kiri (left), tengah (center) atau kanan (right).
• valign – mengatur bentuk perataan secara vertikal
• bgcolor – mengatur warna latar belakang (background) dari tabel.

• background – menentukan gambar yang digunakan sebagai background table
• color – Untuk mengatur warna suatu sel dalam table
• border – menentukan ukuran border tabel (dalam pixel).
• rowspan – menggabungkan beberapa baris
• colspan – menggabungkan beberapa kolom
• cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
• cellspacing – mengatur spasi/jarak antar cell (dalam pixel).
• width – menentukan lebar tabel dalam pixel atau percent.
• height – Menentukan tinggi tabel




<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
• align - perataan : rata kiri (left), tengah (center) atau kanan (right).
• bgcolor - warna latar belakang dari baris.
• valign - perataan vertikal : top, middle atau bottom.





<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah:
• align – untuk menentukan perataan kolom
• background – untuk menentukan image yang digunakan sebagai latar belakang dari kolom.
• bgcolor – untuk menentukan warna latar belakang
• colspan - lihat gambar contoh
• height – untuk mengatur ukuran tinggi cell dalam pixels.
• nowrap – untuk membuat supaya isi dari kolom tetap berada pada satu baris.
• rowspan - lihat gambar contoh
• valign – untuk mengatur perataan vertikal: top, middle atau bottom.
• width – untuk menentukan lebar kolom dalam pixel atau percen.


CONTOH:

<html>
<head>
<title>::: Pembuatan Table :::</title>
</head>
<body background=backgrnd.gif>
<font face=arial size=2 color=maroon>
<table width="100" border="1" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#0000FF"> &nbsp;</td>
<td bgcolor="#FFFF66">&nbsp;</td>
<td rowspan="2" bgcolor="#FF3366">&nbsp;</td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66">&nbsp;</td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99">&nbsp;</td>
</tr></table>
</body>
</html>


maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...



Contoh yang lain:

<html>
<head>
<title>::: Pembuatan Table :::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table>
<tr>
<td>Ini contoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>Ini contoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Jam 'Iyatul Khoir</td>
<td>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td>2.</td>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>


maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...