Pemanfaatan tabel
Menyajikan data dalam kolom dan baris
Memiliki judul
Baris informasi
Sel untuk setiap item
Dalam pengembangannya, teknik tabel
dimanfaatkan untuk mengatur tampilan
pada sebuah halaman web.
Disain & Pemrograman Web
1
Elemen-elemen tabel Atribut tabel
Elemen Penjelasan Elemen Penjelasan
<table> … </table> Mendefinisikan tabel HTML align = [left|center|right] Menentukan posisi horizontal
<th> … </th> Mendefinisikan sel header valign = [top|middle|bottom] Menentukan posisi vertikal
<caption> … </caption> Menuliskan judul tabel colspan = n Menyatukan sel n kolom
<tr> … </tr> Mendefinisikan baris tabel rowspan = n Menyatukan sel n baris
<td> … </td> Mendefinisikan sel data nowrap Mematikan wrapping
2
Catatan: Colspan dan Rowspan
Tiap tabel dimulai dengan tag <table> Colspan akan Dua kolom jadi satu
menghasilkan
dan ditutup tag </table>
penyatuan terhadap
Jumlah baris tabel ditentukan oleh lebih dari satu kolom
pasangan tag <tr> … </tr> di dalam
pasangan tag <table> … </table> Rowspan akan
menghasilkan
Jumlah kolom tabel ditentukan oleh
penyatuan terhadap Dua baris
pasangan tag <td> … </td> di dalam lebih dari satu baris jadi satu
pasangan tag <tr> … </tr>
Tabel 1 Tabel 2 Tabel 3
3
Empty Cell Cellpadding dan Cellspacing
Sebuah tabel yang tak berisi secara Cellpadding berfungsi untuk membuat
otomatis akan menghasilkan tampilan spasi lebih antara sel dengan border.
tabel yang isinya sama dengan border Cellspacing berfungsi untuk menambah
Untuk mengatasi hal tersebut maka jarak antar sel.
sebagai pengganti isi tabel dapat kita
berikan mnemonic “ ” (tanpa
tanda petik) yang merepresentasikan
‘spasi’, atau dengan karakter lain seperti
“…”
Tabel 4 Tabel 4
4
Background Align dan valign
Untuk menambahkan background pada Align berfungsi untuk mengatur
tabel dapat melalui atribut di dalam tag perataan posisi karakter di dalam sel
<table>: tabel secara horizontal, terdapat 3 nilai,
<table border=“0” background=“anu.jpg”> yaitu: kiri, tengah dan kanan (left,
Untuk menambahkan background pada center, right)
satu atau lebih sel dapat melalui atribut Valign berfungsi untuk mengatur
di dalam tag <td>: perataan posisi karakter di dalam sel
<td bgcolor=“#ff0033”> // b.g. warna tabel secara horizontal, terdapat 3 nilai,
<td background=“anu.jpg”> // b.g. gambar yaitu: atas, tengah dan bawah (top,
middle, bottom)
Tabel 5 Tabel 6
5
Tabel di dalam tabel Atribut frame
Teknis pembuatan tabel di dalam HTML Atribut frame digunakan untuk mengatur
memungkinkan kita memberikan border pada sebuah tabel
perintah tabel berjenjang hingga dapat Beberapa di antara atribut tersebut,
dihasilkan tabel di dalam tabel antara lain: border, box, above, below,
<table><tr><td> hsides, vsides, lhsrhs dan void.
<table><tr><td>
</td></tr></table>
</td></tr></table>
Tabel 7 Tabel 7
6
Tabel untuk Layout Layout
Tabel dapat dimanfaatkan untuk Layout half-content Layout Full-content
mengatur Layout sebuah halaman web
Header Header
Biasanya sebuah website didisain
dengan 3 menyediakan standar layout,
Menu Konten Konten
yaitu untuk halaman pertama yang
biasanya simpel dan tidak di-scroll, serta
2 halaman untuk konten, yang half-
content dan full-content.
Tabel 8
7
First Page Layout Half Content Layout
8
Full Content Layout
