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 “&nbsp;” (tanpa
tanda petik) yang merepresentasikan
‘spasi’, atau dengan karakter lain seperti
“…”
Tabel 4 Tabel 4

4
Background

Untuk menambahkan background pada
tabel dapat melalui atribut di dalam tag
<table>:
<table border=“0” background=“anu.jpg”>

Untuk menambahkan background pada
satu atau lebih sel dapat melalui atribut
di dalam tag <td>:
<td bgcolor=“#ff0033”> // b.g. warna
<td background=“anu.jpg”> // b.g. gambar
Tabel 5
Align dan valign

Align berfungsi untuk mengatur
perataan posisi karakter di dalam sel
tabel secara horizontal, terdapat 3 nilai,
yaitu: kiri, tengah dan kanan (left,
center, right)

Valign berfungsi untuk mengatur
perataan posisi karakter di dalam sel
tabel secara horizontal, terdapat 3 nilai,
yaitu: atas, tengah dan bawah (top,
middle, bottom)
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