cara membuat tabel

Cara Membuat Tabel

Pelajaran berikut ini sangat penting, terutama jika kamu ingin membuat suatu website yang menarik dengan berbagai fasilitas. Kebanyakan website dibuat dengan berbentuk tabel-tabel. Bahkan menggabungkan antara satu tabel dengan tabel yang lain. Tabel memungkinkan kita membuat kolom2. Misalnya kita akan membuat suatu website dengan tampilan seperti ini :HEADER

DAFTAR MENU

Nah, untuk membuat tampilan website seperti diatas, kita gunakan tag beserta tag2 lain untuk membentuk baris dan kolom. Berikut tag2 yang dipergunakan untuk membentuk suatu tabel : - adalah tag awal, penanda awal dan akhir suatu tabel. - adalah tag yang menandakan suatu baris dalam tabel - adalah tag yang akan membagi baris menjadi beberapa kolom.Masing-masing tag memiliki atribut sebagai berikut :bgcolor - atribut untuk menentukan warna latar belakangbackground - atribut untuk menentukan gambar yang akan menjadi latar belakang tabel / kolomwidth - atribut untuk menentukan lebarheight - atribut untuk menentukan tinggialign - mengatur perataan horizontalvalign - mengatur perataan vertikalborder - atribut untuk menentukan lebar bingkai tabelcellspacing - atribut untuk menentukan jarak antar kolomcellpadding - atribut untuk menentukan jarak antara isi dengan tepi kolomcolspan - menentukan berapa kolom yang akan digabungrowspan - menentukan berapa baris yang akan digabungDan sekarang, mari kita coba mempraktekkannya satu persatu :

Ini kolom pertama Ini kolom kedua

Ini kolom pertama baris kedua Ini kolom kedua baris

kedua

Sekarang kita lihat bagaimana hasilnya jika kita jalankan di browser :Ini kolom pertamaIni kolom kedua

Ini kolom pertama baris keduaIni kolom kedua baris kedua

Seperti kita lihat, dengan fungsi width, maka kita telah membuat suatu tabel dengan lebar hanya 80% lebar layar. Dengan source yang sama kita akan mencoba mewarnai kolom pertama dengan warna hijau dan kolom kedua kita beri background gambar. Sehingga hasilnya seperti berikut :

Ini kolom pertama

Ini kolom kedua

Ini kolom pertama baris kedua Ini kolom kedua baris kedua

Maka hasilnya adalah seperti ini :Ini kolom pertamaIni kolom kedua


Sekarang kita akan mencoba 4 atribut sekaligus yaitu width, height, align dan valign. Kolom pertama kita buat lebarnya 70%, sedangkan kolom kedua cukup 30% saja. Selanjutnya tinggi baris kedua kita buat 200. Untuk perataan, kita akan buat kolom pertama baris kedua rata atas dan kolom kedua baris kedua rata kanan. Sehingga sourcenya seperti ini :

Ini kolom pertama Ini kolom kedua

Ini kolom pertama baris kedua Ini kolom kedua baris kedua

Perhatikan huruf-huruf yang dicetak tebal dan merah, itu adalah atribut2 baru yang saya tambahkan. Dengan penambahan tersebut, maka di browser akan terlihat sebagai berikut:Ini kolom pertamaIni kolom kedua


Berikutnya, kita akan mencoba atribut Cellpadding dan cellspacing. Agar kamu tahu bedanya, maka kita akan membuat tabel yang memakai cellpadding dulu. Perhatikan tabel diatas barusan, dan kita akan menambahnya lagi dengan atribut cellpadding

Ini kolom pertama

Ini kolom kedua

Ini kolom pertama baris

kedua

Ini kolom kedua baris kedua

Berikut ini hasilnya :Ini kolom pertamaIni kolom kedua


Tahu kan bedanya? Ya, textnya menjauh dari tepi kolom. Itulah manfaat dari cellpadding, memberi jarak antara text dengan tepi kolom. Lalu apa gunanya cellspacing? Mari kita lihat contoh berikut :

Ini kolom pertama

Ini kolom kedua

Ini kolom pertama baris

kedua


Saya gunakan source yang sama dengan sebelumnya, hanya saja sekarang menggunakan cellspacing. Maka hasilnya adalah sebagai berikut :Ini kolom pertamaIni kolom kedua


Yup, kolom-kolom saling menjauh. Dan sekarang tinggal 2 atribut lagi, yaitu colspan dan rowspan. Sekarang kita akan mencoba menggabungkan kolom pertama dan kedua yang ada di baris 1. Berikut sourcenya :

Ini kolom

gabungan

Ini kolom pertama baris kedua Ini kolom kedua

baris kedua

Perhatikan, saya menempatkan atribut colspan di kolom pertama dan menghapus kolom kedua, karena kita akan menggabungkannya. Saya juga mengganti textnya dengan "Ini kolom gabungan". Dan inilah hasilnya :Ini kolom gabungan


Lihat !! Kolom pertama dan kedua telah bergabung dan membentuk kolom gabungan. Berikutnya kita akan coba menggabungkan kolom pertama dengan kolom pertama baris kedua. Berikut sorcenya :

Ini kolom pertama gabungan

Ini kolom kedua


Perhatikan, saya menempatkan rowspan di tag TD kolom pertama, dengan adanya perintah ini, maka 2 baris kolom pertama akan digabung. Dan inilah hasilnya :Ini kolom pertama gabunganIni kolom kedua


Nah, sekarang tugas anda adalah membuat tabel seperti contoh pertama kali yaitu seperti ini :HEADER

DAFTAR MENU

Selamat Mencoba !!

cara membuat tabel

Documents