Senin, 22 Februari 2010

Pemrograman Web

Menggabungkan Kolom pada Tabel HTML

By Didietz Ultima • Senin, 22 Februari 2010 • 0 Comments

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table dalam HTML, digunakan tag-tag <TABLE>, <TR>, dan <TD>.

<TABLE>....<TABLE>
Atribut :
  • align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).
  • bgcolor – Mendefinisikan warna latar belakang.
  • border – Mendefinisikan ukuran garis tepi (border) dalam satuan pixels.
  • cellpadding – Mendefinisikan spasi
  • cellspacing – Mendefinisikan spasi antara dua cells dalam satuan pixels.
  • width – Mendefinisikan ukuran tabel dalam pixels atau persentase.
Contoh :
<TABLE align=”center” bgcolor=”blue” border=”2? cellpadding=”5? cellspacing=”2? width=”90%”>

<TR>....<TR>, untuk menentukan baris (tabel row).
Atribut :
  • align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).
  • bgcolor – Mendefinisikan warna latar belakang pada baris (rows).
  • valign – Mendifinisikan perataan vertikal pada isi dari rows, yaitu perataan top, middle atau bottom.
Contoh :
<TR align=”right” bgcolor=”red” valign=”top>

<TD>....<TD>, untuk menampilkan data pada setiap sel tabel (table data).
Atribut :
  • align – Mendefinisikan perataan (align) tabel yaitu yaitu perataan kiri (left), tengah (center) atau kanan (right).
  • background – Meletakkan image pada latar belakang tabel.
  • bgcolor – Mendefinisikan warna latar belakang.
  • colspan – Menggabungkan kolom.
  • height – Mendefinisikan tinggi cells dalam pixels.
  • rowspan – Menggabugkan baris.
  • valign – Perataan vertikal yaitu perataan pada top, middle atau bottom.
  • width – Mendefinisikan ukuran tabel dalam pixels atau persentase.
Contoh :
<TD align=”right” background=”back.gif” bgcolor=”green” colspan=”3?
height=”200? nowrap rowspan=”2? valign=”bottom” width=”300?>

Struktur tag ini adalah sebagai berikut :
<TABLE>
<TR>
<TD> data baris 1 kolom 1 </TD>
<TD> data baris 1 kolom 2 </TD>
</TR>
<TR>
<TD> data baris 2 kolom 1 </TD>
<TD> data baris 2 kolom 2 </TD>
</TR>
</TABLE>

Berikut ini adalah contoh penggunaan tabel dengan beberapa kolom yang sudah dijasikan satu pada sebuah halaman website :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title>Template Desain Web</title>
</head>

<body>
<table border="1" align="center" width="584" height="359" >
 <tr>
 <!-- Gabung kolom paling atas -->
 <th width="800" height="50" colspan=3>Header</th>
 </tr>
<tr>
 <!-- Mengatur kolom kedua yang berisi tiga baris -->
 <td width="200" height="300" valign="top">Left Menu</td>
 <td width="400" height="300" valign="top">Content</td>
 <td width="200" height="300" valign="top">Right Menu</td>
 </tr>
<tr>
 <!-- Gabung kolom paling bawah -->
 <th width="800" height="30" colspan=3>Footer</th>
 </tr>
</table>
</body>
</html>

Hasilnya dapat di lihat pada tampilan gambar di bawah ini :


Pada contoh pembuatan website di atas dapat dilihat bahwa tiga kolom paling atas digabung menjadi satu dengan menggunakan sintak colspan=3, sintak ini juga digunakan untuk menggabung tiga kolom paling bawah pada tabel. Sedangkan pada kolom kedua, sintak valign="top" digunakan untuk membuat kata/kalimat ditampilkan pada cell menjadi terletak di atas bukan di tengah cell.

Frame bertumpuk secara sederhana dapat diartikan : terdapat satu atau lebih frame di dalam sebuah halaman web. Banyaknya jumlah frame, tergantung dari kebutuhan. Disebut frame bertumpuk karena list program untuk frame sebelah kanan berada di dalam list frame kiri, frame kiri berada di dalam list frame bawah, dan frame bawah sendiri berada di bawah list frame atas.

0 komentar:

Posting Komentar