TABEL HTML Bambang Irawan Pemanfaatan tabel u Menyajikan

TABEL HTML Bambang Irawan

Pemanfaatan tabel u Menyajikan data dalam kolom dan baris – Memiliki judul – Baris informasi – Sel untuk setiap item u 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: u Tiap tabel dimulai dengan tag <table> dan ditutup tag </table> u Jumlah baris tabel ditentukan oleh pasangan tag <tr> … </tr> di dalam pasangan tag <table> … </table> u Jumlah kolom tabel ditentukan oleh pasangan tag <td> … 2</td> Tabel 1 Tabel di dalam pasangan tag <tr> …

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 u Sebuah tabel yang tak berisi secara otomatis akan menghasilkan tampilan tabel yang isinya sama dengan border u Untuk mengatasi hal tersebut maka sebagai pengganti isi tabel dapat kita berikan mnemonic “  ” (tanpa tanda petik)4 Tabel yang merepresentasikan ‘spasi’,

Cellpadding dan Cellspacing u Cellpadding berfungsi untuk membuat spasi lebih antara sel dengan border. u Cellspacing berfungsi untuk menambah jarak antar sel. Tabel 4

Background u Untuk menambahkan background pada tabel dapat melalui atribut di dalam tag <table>: <table border=“ 0” background=“anu. jpg”> u Untuk menambahkan background pada satu atau lebih sel dapat melalui atribut di dalam Tabel 5 tag <td>:

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

Tabel di dalam tabel u 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 u Atribut frame digunakan untuk mengatur border pada sebuah tabel u Beberapa di antara atribut tersebut, antara lain: border, box, above, below, hsides, vsides, lhsrhs dan void. Tabel 7

Tabel untuk Layout u Tabel dapat dimanfaatkan untuk mengatur Layout sebuah halaman web u 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

Layout u Layout half-content u Layout Full-content Test layout

First Page Layout

Half Content Layout

Full Content Layout

Next… u Teknik Layout dengan CSS

Referensi u Modifikasi blog contoh