Membuat Tabel Pada Dokumen HTML

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>
tabel.jpg
Share it to your friends..!

Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

2 komentar:

  1. study said...:

    saya ada pertanya.an
    bagaimana cara nya jika membuat tabel nya ada 4?

  1. seharusnya pembahasan tentang table banyak, ni kok sedikit. memang udah ada penulisan script sama contohnya, tapi pembahasannya tetap masih sedikit... silahkan ditambah lagi dengan pembahasan yang lebih lengkap...

    NB: jangan lupa daftarkan blog kamu di follower blog K"...

Post a Comment

 
Ridho Technology © 2012 | Template by Ridho Technology