Tabel

Tabel merupakan hal yang paling penting dalam membuat interfase website anda. Dengan tabel anda dapat memecahkan layout website menjadi berapa kolom atau baris dengan tabel halaman website anda akan lebih rapi. Tabel merupakan tag html terumit, karena di dalam tag tabel terdapat tag-tag lainnya. Dan tabel saat penting. Karena itu sebelum menerukan, tarik nafas dalam-dalam dan konsentrasi. Untuk membuat tabel maka diperlukan tag_tag dasar seperti !table"!#table" tag ini merupakan containers untuk membuat tabel. !tr"!#tr" di dalam tabel tag ini berfungsi untuk membuat garis !td"!#td" tag ini untuk membuat kolom. Di dalam tag !tr"harus terdapat tag !td", anda bisa menambahkan bayak tag !td" di dalam !tr" untuk membuat kolom. !th"!#th" hanya saja berfungsi sebagai heade, biasanya digunakan pada garis pertama di dalam tabel. Tag atribut !Table"!tabel" border cellpadding cellspacing width height name id title bgcolor background align $align !tr" !#tr" height bgcolor background align $align title !td"!#Td" &eight 'idth (gcolor (ackground )lign *align Title +olspan rowspan Deskripsi %engatur semua elemen tabel

%embuat baris

%embuat kolom

!th"!th"

!tbody" !#tbody"

height width bgcolor background align $align title colspan rowspan height width align $align bgcolor background height width align $align bgcolor background colspan

&eader ,kepala tabel-. .tomatis ke tengah dan tebal,

/ormat yang berlaku bagi )ll yang di apit tag.

!colgroup" !#colsgroup"

/ormat yang berlaku bagi kolom

Contoh tabel : Tabel diawali dengan tag !table" dan biasanya memiliki atribut polder. 0ikabolder 1232 maka garis pada tabel tidak ditampilkan. (iasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut juga tidak memiliki garis. !tabel" memiliki atribut cellpadding untuk memberi jarak di dalam kolom dan cellspacing untuk memberi jarak antar kolom. +oba kode berikut ini !table border1454 width146334 cellpadding1474 cellspacing1484" !tr" !td width145334"cell 5!#td" !td width145334"cell 6!#td" !#tr" !#table" &asil

+oba anda ubah nilai dari atribut cellpadding dan cellspacing untuk melihat perbedaanya. +obalah untuk mengutak-atik kode di atas dengan mengubah nilai-nilai atributnya. 9etiap tabel memmiliki baris dengan menggunakan tag !tr". Di dalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag !td". Utuk lebih jelasnya cobalah ode berikut ini !table border1454 width146334 cellpadding1464" !tr" !td width145334 align14center4 bgcolor14yellow4"!b" &eader!#b"!#td" !td width145334 align14center4 bgcolor14yellow4"!b" &eader!#b"!#td" !#tr" !tr" !td width145334"cell 5!#td" !td width145334"cell 6!#td" !tr" !td width145334"cell :!#td" !td width145334"cell 7!#td" !#tr" !#table" Hasilnya :

;ada kode diatas terdapat atribut bgcolor yang berguna untuk memberi warna pada background. Di dalam kolom !td" anda dapat menuliskan kode &T%< apa saja, bahkan anda dapat memasang tag !Table" didalamnya, yang berarti anda memasang tabel di dalam tabel. +ontoh lainnya !table border1454 width146334 cellpadding1464" !tr" !td width145334 align14center4 bgcolor14yellow4"!b" &eader!#b"!#td" !td width145334 align14center4 bgcolor14yellow4"!b" &eader!#b"!#td" !#tr" !tr" !td width145334 rowspan1464 $align14top4"cell 5!#td" !td width145334"cell 6!#td" !#tr" !tr" !td width145334"cell 6!#td" !#tr" !#table" Hasilnya :

)nda lihat ada atribut rowspan1262 ini berguna untuk menggabungkan 6 barismenjadi satu, jika anda ingin menggabungkan lebih dari 6 baris, ubah saja nilainya. 0ika sudah paham, silahkan mencoba kode berikut ini

!table border1434 width146334 cellpadding1464 cellspacing1454 bgcolor14=3333334" !tr" !td width145334 align14center4 bgcolor14=>>//??4"!b" &eader!#b"!#td" !td width145334 align14center4 bgcolor14=>>//??4"!b" &eader!#b"!#td" !#tr" !tr" !td width145334 $align14top4 bgcolor14=cccccc4 align14left4"left!#td" !td width145334 bgcolor14=cccccc4 align14right4"@ight!#td" !#tr" !tr" !td width146334 $align14top4 colspan1464 bgcolor14=ffffff4 align14center4" Tabel is not cool!#td" !#tr" !tr" !td width146334 $align14top4 colspan1464 bgcolor14=ffffff4 align14center4" (ut itAs not easy!#td" !#tr" !#table"

&asilnya