STRUKTUR TABEL HTML

                     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 bagian vertikal pada tabel. Pertemuan antara baris dan kolom disebut sebagai cell. 

Cara mendeskripsikan sebuah tabel dalam pemrograman web berbasis HTML menggunakan syntax adalah sebagai berikut.

<table>

<!-- isi baris dan kolom -->

</table>

Selanjutnya,Anda dapat menambahkan baris baru diantara tag <table>......</table> dengan script berikut ini.

<table>

<tr>

   <!-- isi baris ke 1 -->

</tr>

<tr>

   <!-- isi baris ke 2 -->

</tr>

</table>

Script program yang lengkap adalah sebagai berikut.

<table>

    <tr>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

</tr>

<tr>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

</tr>

</table>

Elemen – elemen yang ada pada tabel adalah sebagai berikut.

NAMA	FUNGSI
<table>...</table>	Untuk mendiskripsikan tabel dalam halaman web.
<tr>....</tr>	Untuk mendiskripsikan baris dalam tabel.
<td>....</td>	Untuk mendiskripsikan kolom dalam tabel.

     

Beberapa atribut dalam tag <tr>.........</tr> sebagai berikut.

§  Align, diguanakan untuk mengatur posisi horizontal suatu objek dalam cell tabel. Ada 3 jenis align yaitu : left, center dan right.

§  Valign, digunakann untuk mengatur posisi peletakan suatu objek pada cell secara vertikal. Ada 3 pilihan untuk menentukan atribut valign ,yaitu top, middle, dan bottom

  B.ATRIBUT BORDER

Untuk mengatur tebal dan lebar garis pad tabel. Anda harus mengatur nilai atribut border tabel ketika mendeklarasikan tabel. Semakin besar nilai border,maka semakin besar garis yang ditampilkan pada halaman web. Nilai 0 pada border menyebabkan tabel tampil seperti tidak memiliki garis. Jika nilai atribut border semakin besar,lebar garis tabel juga semakin besar. Namun hanya pada sisi luarnya saja sedangkan pada bagian dalam tabel tetap sama . besaran nilai atribut tabel dihitung dalam ukuran pixel.

  C.ELEMEN HEADER

Header dalam tabel berguna untuk memberikan informasi data dalam kolom sebuah tabel. Biasanya ,header diletakkan pada baris pertama sebuah tabel. Untuk mendeklerasikan header pada tabel Anda perlu menambahkan tag <th> pada awal script dan </th> pada akhir script. Kelebihan penggunaan header pada tabel adalah teks yang diletakkan pada header secara otomatis berada pada posisi tengah (center) tanpa harus menambahkan atribut align=”center”. Pada elemen header Anda 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,rowgroup.

 D. ELEMEN CAPTION

Untuk memberikan sebuah judul pada tabel, Anda dapat menggunakan elemen caption dengan tag <caption>............</caption>. Posisi default caption, yaitu berada diatas tabel.

  E.ATRIBUT CELLPADDING DAN CELLSPACING

Atribut cellpadding pada tabel berfungsi untuk mengatur jarak antara border sisi dalam tabel dengan isi teks tabel dalam cell.

Adapun cellspacing berfungsi untuk mengatur jarak antara border bagian dalam dan luar.

  F.MENGGABUNGKAN CELL

·        Colspan

Digunakan untuk menyatukan satu atau lebih cell berdasarkan kolom. Contoh , colspan=”2” berarti menggabungkan dua cell menjadi satu cell.

·        Rowspan

Digunakan untuk menyatukan satu atau lebih cell berdasarkan baris. Contoh , rowspan=”2” berarti menggabungkan dua cell menjadi satu cell.

  G.MENGATUR BACKGROUND

Langkah – langkah menerapkan background gambar tabel adalah sebagai berikut.

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

2.     Persiapkan gambar yang akan dijadikan background sebuah tabel,baik dalam format .jpg. .jpeg. atau .bmp. . letakkan file gambar tersebut dalam folder BG dalam satu folder dengan file html yang akan dibuat.

3.     Buat file “gambar.html”.

Adapun background , background=”foto.jpg”

Adapun untuk membuat latar belakang dengan warna tertentu , bgcolor=”#FFFF33”.

  H. ATRIBUT ALIGN

Atribut ini ada 3 : left, right, center. Left : meletakkan isi pada sisi sebelah kiri cell, center : meletakkan isi cell pada posisi tengah,

right : meletakkan isi cell pada sisi sebelah kanan.

  I.MELETAKKAN TABEL DI DALAM TABEL

Format tabel menjadi sangat penting untuk dijadiakan layout sebuat tampilan halaman web. Dengan menggunakan tabel anda dapat menentukan struktur utama sebuah web, mulai dari heading halaman web , body halaman web, dan footing sebuah halaman web.

  J. ATRIBUT FRAME

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

1.     above

2.     below

3.     border

4.     box

5.     hsides

6.     lhs

7.     rhs

8.     void

9.     vsides