Tabel HTML

Bambang Irawan
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.
Elemen-elemen tabel
Elemen
Penjelasan
<table> … </table>
Mendefinisikan tabel HTML
<th> … </th>
Mendefinisikan sel header
<caption> … </caption>
Menuliskan judul tabel
<tr> … </tr>
Mendefinisikan baris tabel
<td> … </td>
Mendefinisikan sel data
Atribut tabel
Elemen
Penjelasan
align = [left|center|right]
Menentukan posisi horizontal
valign =
[top|middle|bottom]
Menentukan posisi vertikal
colspan = n
Menyatukan sel n kolom
rowspan = n
Menyatukan sel n baris
nowrap
Mematikan wrapping
Catatan:
 Tiap
tabel dimulai dengan tag <table>
dan ditutup tag </table>
 Jumlah baris tabel ditentukan oleh
pasangan tag <tr> … </tr> di dalam
pasangan tag <table> … </table>
 Jumlah kolom tabel ditentukan oleh
pasangan tag <td> … </td> di dalam
pasangan
Tabel 1tag <tr> … </tr>Tabel 2
Colspan dan Rowspan

Colspan akan
menghasilkan
penyatuan terhadap
lebih dari satu kolom

Rowspan akan
menghasilkan
penyatuan terhadap
lebih dari satu baris
Dua kolom jadi satu
Dua baris
jadi satu
Tabel 3
Empty Cell
 Sebuah
tabel yang tak berisi secara
otomatis akan menghasilkan tampilan
tabel yang isinya sama dengan border
 Untuk mengatasi hal tersebut maka
sebagai pengganti isi tabel dapat kita
berikan mnemonic “ ” (tanpa
tanda petik) yang merepresentasikan
‘spasi’, atau dengan karakter
lain4
Tabel
seperti “…”
Cellpadding dan Cellspacing
 Cellpadding
berfungsi untuk membuat
spasi lebih antara sel dengan border.
 Cellspacing berfungsi untuk menambah
jarak antar sel.
Tabel 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. 5
gambar
Tabel
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
Tabel(top,
6
middle, bottom)
Tabel di dalam tabel
 Teknis
pembuatan tabel di dalam HTML
memungkinkan kita memberikan
perintah tabel berjenjang hingga dapat
dihasilkan tabel di dalam tabel
<table><tr><td>
<table><tr><td>
</td></tr></table>
</td></tr></table>
Tabel 7
Atribut frame
 Atribut
frame digunakan untuk
mengatur border pada sebuah tabel
 Beberapa di antara atribut tersebut,
antara lain: border, box, above, below,
hsides, vsides, lhsrhs dan void.
Tabel 7
Tabel untuk Layout
 Tabel
dapat dimanfaatkan untuk
mengatur Layout sebuah halaman web
 Biasanya sebuah website didisain
dengan 3 menyediakan standar layout,
yaitu untuk halaman pertama yang
biasanya simpel dan tidak di-scroll,
serta 2 halaman untuk konten, yang
half-content dan full-content.
Layout

Layout half-content

Layout Full-content
Header
Header
Konten
Menu
Konten
Test layout
First Page Layout
Half Content Layout
Full Content Layout
Next…
 Teknik
Layout dengan CSS
Referensi
 Modifikasi
blog contoh