Membuat Tabel Dalam Html

       BAB IV  

       PEMBUATAN TABEL

 

4.1 Definisi Tabel

Table (tabel) merupakan komponen penting untuk memanipulasi tampilan grafik suatu homepage. Selain fungsi standarnya untuk menampilkan data, dengan tabel juga kita dapat mempermanis tampilan homepage. Anda dapat perhatikan website-website di internet, kebanyakan memakai tabel. Homepage yang memanfaatkan tabel ini relatif lebih cepat diakses dibandingkan dengan homepage yang melulu mengandalkan gambar.

Tabel adalah susunan baris dan kolom, setiap perpotongan baris dan kolom ini disebut dengan sel. Perhatikan gambar berikut ini:

4.1.1 Elemen Tabel

Untuk membangun tabel dengan HTML, diperlukan elemen-elemen berikut:

•      <table> </table>, digunakan untuk mendefinisikan tabel yang akan dibentuk.

•      <tr> </tr>, digunakan untuk membuat komponen baris tabel.

•      <td> </td>, digunakan untuk komponen kolom-kolom pada baris tabel.

Contoh Program : 

Hasilnya :

Anda mungkin bertanya-tanya kenapa tampilan tabel tidak sebagaimana tabel yang umum. Ini dapat kita atur dari atribut-atribut tabel, baris, maupun sel. Mari kita lihat bagaimana atribut-atribut ini berperilaku.

4.1.2 Atribut Tag Tabel

Untuk menampilkan garis batas tabel tambahkan atribut border pada tag <tabel>. Nilai atribut ini berupa bilangan bulat dalam satuan piksel dan diapit dengan tanda petik. Tanda petik di sini tidak wajib ada, tapi akan lebih baik jika Anda terbiasa memakainya.

Contoh Program:

 

Hasilnya : 

Tabel ini mempunyai dua baris dan masing-masing baris mempunyai dua sel. Jadi Anda bisa menambahkan baris-baris baru dengan menambahkan pasangan-pasangan  tag <tr> dan </tr>. Dan sel-sel baru ditambahkan dengan memakai pasangan tag <td> dan </td>.

Coba tambahkan atribut cellpadding pada tag <table> untuk memberi jarak antara border dengan isi cell-nya, misal  <table cellpadding="5"> dan reload dengan browser Anda dan lihat perbedaannya

Kemudian tambahkan atribut cellspacing="5". Akan tampak seperti ini:

Atribut cellpadding berfungsi untuk mengatur jarak antara sisi sel dengan isinya dan atribut cellspacing berfungsi untuk mengatur jarak antar sel.

Terdapat beberapa atribut lain yang bisa kita gunakan dalam tag <table>. Lihat dan coba atribut-atribut yang sering digunakan untuk pengaturan tabel maupun komponen tabel lainnya berikut ini. 

 

Atribut	Keterangan
Align	Mengatur bagaimana tabel ditempatkan
Background	Mengatur gambar latar tabel
Bgcolor	Mengatur warna latar tabel atau komponen tabel
Border	Mengatur ketebalan border
Bordercolor	Mengatur warna border yang digunakan
Cellpadding	Mengatur jarak teks terhadap cell
Cellspacing	Mengatur jarak spasi antar cell
Height	Mengatur tinggi tabel
Width	Mengatur lebar tabel
Nowrap	Mengatur word wrap teks dalam cell

align, untuk mengatur horisontal alignment tabel. Nilai yang boleh left, center, dan

right. Contoh: align="center".

width, untuk untuk mengatur lebar tabel, nilai adalah bilangan dalam piksel atau dalam

persen relatif terhadap lebar layar. Contoh: width="100", width="90%".

bgcolor, untuk menentukan warna latar belakang, nilai yang boleh adalah nama-nama

warna atau kode bilangan warna dalam format RGB. Contoh bgcolor="blue" atau bgcolor="#78F088".

Sedangkan untuk tag <tr> terdapat atribut-atribut sebagai berikut:

1.      align, atribut ini fungsinya sama dengan align pada tabel.

2.      bgcolor, sama dengan bgcolor pada tabel.

Atribut-atribut untuk tag <td> adalah sebgaai berikut:

1.      align, atribut ini fungsinya sama dengan align pada tabel.

2.      valign, untuk mengatur alignment vertical (top, middle, bottom)

3.      width, sama dengan width pada tabel.

4.      height, sama dengan height pada tabel

5.      bgcolor, sama dengan bgcolor pada tabel.

6.      colspan, menggabungkan beberap kolom, misal: colspan=2.

7.      rowspan, menggabungkan beberpa baris, misal: rowspan=2.

4.1.3 Menggabungkan Kolom dan Baris

Buatlah juga dokumen memakai atribut colspan yang fungsinya adalah untuk menggabungkan kolom-kolom menjadi satu kolom.

Contoh Program:

Hasilnya : 

Untuk menggabungkan baris, gantilah colspan dengan rowspan dengan memberikan nilai sesuai dengan jumlah baris yang ingin digabungkan.

Hasilnya:

 

4.1.4 Menambahkan Title Tabel

Untuk menambahkan sebuah title (judul) tabel, elemen yang digunakan adalah <caption></caption>. Contoh dari penambahan title untuk tabel berikut ini: 

Hasilnya : 

4.1.5 Menambahkan Heading Kolom

Elemen yang digunakan untuk keperluan ini adalah <th></th>. Penulisan tag ini sama seperti penulisan tag <td> yaitu di dalam blok tag <tr>. Text yang ada di dalam tag <th> akan mempunyai format huruf tebal dan perataan tengah (allignment center).

contoh program : 

Hasilnya : 

4.2 Tabel untuk Laporan

Pada table terdapat tag <THEAD> atau table header yang biasa digunakan untuk judul suatu kolom berbentuk tabular, sedangkan isi datanya dalam tag <TBODY>. Dengan menggunakan tag <THEAD> dan <TBODY>, jika halaman dokumen laporan cukup panjang dan jika dicetak akan menghasilkan lebih dari satu halaman, maka pada halaman berikutnya header laporan akan tetap ada.

Berikut contoh penggunaannya:

 Hasilnya :

Sumber : Modul Dasar Pemograman Web 2019/2020 Pesantren PeTIK Rangkapan Jaya, Depok, Jawa Barat