Materi Mulok Web Design Penggunaan Table pada HTML

Posted by Ciciku on 4:05 PM in Materi TKJ,

Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris.

Terdapat 3 tag elemen utama yang digunakan dalam pembuatan table, yaitu : <table>, <tr>, dan <td>.

yang perlu diingat adalah bahwa tag <tr> dan <td> harus terletak diantara tag <table> dan </table>.

1.     <table>

Digunakan untuk mendefinisikan pembuatan table. Memiliki 12 attribut :

a.      Align : perataan rata kiri,tengah atau kanan.

b.     Valign : mengatur bentuk perataan vertical

c.      Bgcolor : mengatur warna background dari table

d.     Background : menentukan gambar yang digunakan sebagai backgrounds table

e.      Color : mengatur warna suatu sel dalam table

f.       Border : menentukan ukuran border table (dalam pixel)

g.     Rowspan : menggabungkan beberapa baris

h.     Colspan : menggabungkan beberapa kolom

i.       Cellpadding : jarak antara isi cell dengan batas cell (dalam pixel)

j.       Cellspacing : mengatur spasi/jarak antar cell (dalam pixel)

k.     Width : menentukan lebar table dalam pixel / percent

l.       Height : menentukan tinggi table

2.     <tr>

Digunakan untuk membuat baris baru pada table. Terdiri dari 3 aribut yaitu

a.      Align : perataan rata kiri,tengah atau kanan.

b.     Bgcolor : warna latar belakang dari baris

c.      Valign : perataan vertical : top, middle atau bottom

3.     <td>

Tag ini digunakan untuk membuat kolom baru pada table.

Atributnya ada 9 yaitu :

a.      Align : untuk perataan kolom

b.     Background : untuk menentukan gambar yang digunakan sebagai latar belakang dari kolom

c.      Bgcolor : untuk menentukan warna latarbelakang

d.     Colspan

e.      Rowspan

f.       Height : untuk mengatur ukuran tinggi cell dalam pixel

g.     Nowrap : untuk membuat supaya isi dari kolom tetap berada pada satu baris

h.     Valign : untuk mengatur perataan vertical

i.       Width : untuk menetukan lebar kolom dalam pixel atau percen


     Judul dalam table dibedakan menjadi 3 macam yaitu

1.       Judul table

Judul table biasa disebut CAPTION terletak dibagian luar table yang bias berada dibawah atau diatas table.Secara default diletakkan dibagian atas suatu table, tetapi juga dapat diletakkan dibawah suatu table dengan menambahkan atribut ALIGN=BOTTOM pada elemen caption tersebut.

2.       Judul kolom table

       terletak pada sel disebelah kiri atau kolom pertama suatu tabel.

3.       Judul baris table

       terletak pada baris pertama suatu tabel

Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE HEADER <TH>. 


Mengatur lebar dan tinggi suatu tabel

1.     Lebar tabel diatur dengan menggunakan atribut width dan height untuk tinggi.
2.     Jika atribut width dan height digunakan dalam elemen table nilainya menunjukkan lebar dan tinggi tabel terhadap BROWSER sedangkan jika digunakan pada elemen TH DAN td, nilainya merupakan lebar dan tinggi dari suatu tabel.  Nilai atributnya menggunakan ukuran % (max 100%) dan ukuran pixel

Perataan dalam tabel

Dibedakan menjadi 2 macam yaitu perataan secara horizontal dengan atribut align dan perataan vertikal dengan atribut valign, serta untuk membuat suatu tabel posisinya menjadi di tengah-tengah layar browser

Membuat warna pada tabel 

Untuk menentukan warna latar belakang pada suatu tabel, gunakan atribut BGCOLOR sedangkan untuk warna border dapat menggunakan beberapa atribut :

1.     BORDERCOLOR berfungsi mengubah warna keseluruhan border
2.     BORDERCOLORLIGHT berfungsi mengubah warna border bagian atas dan kiri
3.     BORDERCOLORDARK berfungsi mengubah warna border bagian bawah dan kanan

Penggabungan baris/kolom

1.     Colspan digunakan untuk menggabungkan beberapa kolom menjadi 1
2.     Rowspan digunakan untuk menggabungkan beberapa baris menjadi 1

Note : 

Cellpadding digunakan untuk mengatur spasi antara border dengan tulisan 

Cellspacing digunakan untuk mengatur spasi antar 2 buah sel