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 tag <tr> … </tr> Tabel 1 Tabel 2

Colspan dan Rowspan Tabel 3 Dua kolom jadi satu 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 lain seperti “…” Tabel 4

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. 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

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> </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 Test layout

First Page Layout

Half Content Layout

Full Content Layout

Next… Teknik Layout dengan CSS

Referensi Modifikasi blog contoh