Belajar komputer, tutorial, trik registry, tips dan lain-lain

membuat table di dokument HTML

February 18, 2009 · Leave a Comment

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>

Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah :

Elemen Kegunaan
TABLE Tag utama. Digunakan untuk memberitahu browser “ini adalah tabel”, bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi. Tag <TABLE>..<TABLE>
TR Baris Tabel, yaitu baris-baris pada suatu tabel, yang dinyatakan dalam pasangan tag <TR>..</TR>
TD Data tabel, yaitu tempat dimana informasi/data dimasukkan dalam tabel. tabel data adalah colom dari suatu baris tabel. tabel data dinyatakan dengan tag <TD>..<TD>
TH Judul tabel, biasnya terletak di bagian paling atas atau paling kiri dari suatu tabel. Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedang tabel header yan terletak di bagian kiri adalah judul baris tabel. Tag yang digunakan adalah <TH>…</TH>
CAPTION Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel. tag <CAPTION>..</CAPTION>

Selain elemen-elemen diatas, tabel juga mempunyai bermacam-macam atribut yang dapat mempercantik bentuk tabel tersebut, seperti atribut-atribut :

Atribut Nilai Keterangan
Border Angka 0, 1 dst Digunakan untuk menentukan tebal garis batas tepi tabel
Cellspacing Angka 1,2,3 dst Digunakan untuk menentukan jumlah spasi/celah diantara tiap-tiap sel
Cellpadding Angka 1,2,3 dst Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel
width Pixel / persentase Digunakan untuk mengatur lebar tabel, dapat menggunakan ukuran piksel atau persentasi %
Align Left, center.right Digunakan untuk perataan tabel secara horizontal
Valign Middle, bottom, baseline Digunakan untuk perataan tabel secara vertikal
bgcolor Warna/bil.hexadesimal Warna latar dari tabel atau pada sel
Rowspan Angka 1,2,3 dst Menggabungkan beberapa baris tabel
Colspan Angka 1,2,3 dst Menggabungkan beberapa kolom tabel

Categories: html

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

Leave a Comment