Membuat Tabel Pada Dokumen HTML

13Mar08

Untuk membuat tabel harus diawali dengan tag <table> dan diakhiri dengan tag </table>. baris-baris dalam tabel dibuat dengan diawali tag <tr> dan diakhiri tag </tr>. Dari dalam baris kemudian dibuat kolom-kolom dengan tag <td> dan diakhiri tag </td>. Untuk header (baris paling atas dari tabel) kolom-kolomnya dibuat denga tag <th> dan </th>. Judul tabel bisa dibuat dengan tag <caption> dan </caption>. Agar tabel terlihat ada garis-garisnya, perlu ditambahkan atribut <border>, misalnya <table border=1>.
Suatu sel bisa diberi background dengan cara <td background=gambar.jpg>. diberi warna : <td bgcolor=”#203e8d>, diberikan link <td><a href=link.html><img src=gambar.gif border=0></td>. Sebuah gambar yang utuh dapat disusun atas sel-sel dalam tabel, sehingga bila masing-masing sel diberi link akan diperoleh efek imageMap. Atribut Tabel yang lain
Pelurusan horizontal suatu sel : align (left, center, right, justify), ex : <tr align=left>, <td align=left>.
Pelurusan vertical suatu sel : valign(top, middle, bottom), ex : <tr valign=top>, <td valign=bottom>.
Jumlah (n) kolom yang ditempati sebuah sel : rowspan=n, ex : <td rowspan=2>
Mematikan kemampuan melipat kata dalam sel : nowrap, ex : <td nowrap>
Menentukan panjang/lebar suatu sel/kolom : (weight, height), ex : <td height=10, weight=5>

Contoh :

<table border=2>
<caption>Judul Tabel</caption>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>

Filed under: Tutorial, Tips Trik   |  8 Comments
Tags: HTML, internetm artikel komputer, pemrograman, web