BAB 3 : Struktur Tabel HTML

A. Elemen Dasar Tabel

         Tabel adalah salah satu metode untuk menyajikan informasi dalam halaman web. Tabel  terdiri atas baris dan kolom. Baris merupakan bagian mendatar, sedangkan kolom adalah bagian vertical pada table. Pertemuan antara baris dan kolom disebut cell.

Script program tabel :

Elemen-elemen yang ada pada table adalah sebagai berikut :

Sementara itu, untuk mengatur posisi objek dalam cell sebuah table, dapat digunakan beberapa atribut dalam tag <tr>…</tr> sebagai berikut :

·         Align, digunakan untuk mengatur posisi horizontal sebuah objek dalam cell table. Ada tiga jenis align yang dikenal, yaitu : left, center, dan right.

·         Valign, digunakan untuk mengatur posisi peletakan sebuah objek pada cell secara vertikal. Ada tiga pilihan dalam menentukan atribut valign, yaitu top ,middle ,dan bottom.

Membuat tabel dalam halaman web.

B. Atribut Border

            Untuk mengatur tebal dan lebar garis pada table. Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai border=”2″, maka web browser akan menampilkan garis tepi sebesar 2 pixel pada sisi atas, bawah, kiri dan kanan tabel.

Atribut cellpadding dalam tabel HTML

Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text tabel itu sendiri.

Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellpadding=”2″, maka web browser akan membuat jarak sebesar 2 pixel dari border sisi dalam tabel dengan isi text tabel.

C. Elemen Header

        Header dalam table berguna untuk memberikan informasi data dalam kolom sebuah table. Biasanya, header diletakkan pada baris pertama sebuah table. Kelebihan penggunaan header pada table adalah teks yang diletakkan pada header secara otomatis berada pada posisi tengah (center) tanpa harus menambahkan atribut align=”center”.

             Pada elemen header table, dapat menerapkan atribut scope dan headers untuk menghubungkan kolom atau baris dalam cell. Atribut scope digunakan untuk menghubungkan data kolom dan baris. Atribut scope dapat diisi dengan nilai col, colgroup, row, dan rowgroup.

 Membuat header pada tabel :

 

D. Elemen Caption

            Untuk memberikan sebuah judul pada table, dapat menggunakan elemen caption dengan tag <caption>…..</caption>.

Contoh Script :

E.Atribut Cellpandding dan Cellspacing

         Atribut cellpandding pada tabel berfungsi untuk mengatur jarak dari border sisi dalam tabel dengan isi teks tabel dalam cell.Nilai dari atribut ini berupa angka dalam satuan pixel.Jika nilai cellpanding=”3”  web browser akan menampilkan tabel dengan jarak sebesar 3 pixel dari border sisi dalam tabel dengan teks isi tabel.

         Adapun atribut cellspasing berfungsi untuk mengatur jarak antara border bagian dalam dan luar.contoh,jika anda memberikan nilai cellspasing=”2”,web browser akan menampilkan jarak sebesar 2 pixel di antara garis border tabel

Contoh Script :

 

F.Menggabungkan Cell

         Ada dua atribut yang dapat digunakan untuk menggabungkan dua buah cell menjadi satu cell,yaitu sbg berikut:

1.Cosplan

         Digunakan untuk menyatukan salah atau lebih cell berdasarkan kolom.contoh: Colspan=”2” berarti menggabungkan dua cell menjadi Satu cell

2.Rownspan

   Digunakan untuk menyatukan salah atau lebih cell berdasarkan baris.contoh: Rownspan=”2” berarti menggabungkan dua cell menjadi Satu cell

G.Mengatur Background

         Background secara harfiah berarti latar belakang.Ada 2 jenis background yang dapat diterapkan pada tabel,yaitu berupa gambar dan warna.langkah langkah menerapkan background gambar pada tabel adalah sbg berikut:

1.Buatlah folder BG pada direktori C (C;\BG).

2.Persiapkan gambar yang akan dijadikan background sabuah tabel,baik dari jpg ,jpeg,atau bmp.letak kan file gambar tersebut ke dalam folder BG dalam satu folder dengan file html yang akan dibuat.

3.Selanjutnya,buat file “gambat.html” dan tulis kode berikut        

 

Adapun untuk membuat latar belakang tabel dengan warna tertentu,perlu ditambahkan atribut bgcolor=”#FFFF33”. Dengan bgcolor sebagai atribut untuk mengatur warna tabel.

         Untuk mengatur background berupa gambar atau memberi latar belakang dengan warna tertentu pada cell.prosedurya sama seperti tabel

H.Atribut Align

        Anda dapat menentukan posisi isi dalam cell menggunakan atribut align.Ada 3 cara yang dapat diterapkan pda atribut ini yaitu

1.left digunakan untuk meletak kan isi pada sisi sebelah kiri cell

2.center digunakan untuk digunakan meletak kan isi cell pada posisi tengah

3.Right digunakan untuk meletak kan isi cell pada posisi sebelah kanan

 I.Meletak kan Tabel di dalam Tabel

         Format tabel menjadi sangat penting sekali dijadikan layout sebuah tampilan halaman web. Dengan menggunakan tabel anda dapat menentukan struktur utama sebuah web.Teknik sederhana yang dapat digunakan untuk melakukan hal tsb adalah meletak kan tabel didalam tabel utama.

J.Atribut Frame

         Atribut Frame pada tabel digunakan untuk mengatur jenis border luar pada tabel.Ada beberapa nilaimyang digunakan pada atribut frame,antara lain:

1.      Above

2.      Bellow

3.      Border

4.      Box

5.      Hsides

6.      His

7.      Rhs

8.      Void

9.      Vsides