Menyajikan Pembuatan Tabel Di Web

Tabel adalah data yang berisi iktisar sejumlah data informasi, biasanya berupa kata-kata dan bilangan yang tersusun secara bersistem, urut ke bawah dalam lajur dan deret tertentu dengan garis pembatas sehingga mudah untuk disimak.

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag<Table>. Elemen table berisi property <tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table (table data). Struktur elemen table adalah sebagai berikut:

<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
</table>

Untuk mendifinisikan table heading atau judul tiap kolom menggunakan
tag <th> ….. </th>

Atribut Elemen Tabel

1. Width =panjang(lebar table, pixel atau persen)
2. Height =panjang (tinggi table, pixel atau persen)
3. Border =pixel(tebal garis tepi)
4. Cellspacing =pixel(spasi antar sel)
5. Cellpadding =pixel(spasi di dalam sel)
6. Align = left, center, right (perataan table)
7. Bgcolor =warna(warna latar belakang table)
8. Colspan = penggabungan kolom
9. Rowspan = penggabungan baris

Atribut Table Row

1. Align =[left|center|right] (perataan sebaris sel secara horizontal)
2. Valign =[top|middle|bottom] (perataaan sebaris sel secara vertical)
3. Bgcolor =warna(warna latar belakang baris)

Atribut Tabel Data

1. Align =[left|center|right](perataan horizontal)
2. Width =[top|middle|bottom](perataan vertical)
3. Height =pixel(tinggi sel, pixel atau persen)
4. Bgcolor =warna(warna latar belakang sel)

Berikut contoh tabel dengan rowspan dan colspan :

<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table>

Maka Hasilnya sebagai berikut :

baris 1 kolom 1	baris 1 kolom 2
baris 2 kolom 1
baris 3 kolom 1	baris 3 kolom 2

Contoh lainnya adalah :

<table border="1"><caption>Daftar Wiraniaga</caption> <tbody>
<tr><th colspan="2" rowspan="2">WIRANIAGA</th><th colspan="3">KOTA</th></tr>
<tr><th>Semarang</th><th>Kudus</th><th>Solo</th></tr>
<tr> </tr>
<tr><th rowspan="2">Jenis Kelamin</th><th>Pria</th><td align="right">30</td><td align="right">20</td><td align="right">30</td></tr>
<tr><th>Wanita</th><td align="right">20</td><td align="right">8</td><td align="right">18</td></tr>
</tbody></table>

Maka hasilnya adalah sebagai berikut.

Daftar Wiranaga

WIRANIAGA		KOTA
		Semarang	Kudus	Solo
Jenis Kelamin	Pria	30	20	30
	Wanita	20	8	18

Buatlah dokumen HTML sehingga menghasilkan tampilan tabel seperti berikut ini (aturlah sedemikian rupa pada atribut-atribut tabel untuk mendapatkan dua buah tampilan yang berbeda, sebagaimana dibawah ini ).

Tabel 1

<table border="1"><tbody>
<tr style="text-align: left;" valign="top"><th width="132">Nama</th><th width="132">Usia</th></tr>
<tr valign="top"><td>Ali</td><td >25</td></tr>
<tr valign="top"><td >Fahmianto</td><td>27</td></tr>
</tbody></table>

Hasilnya adalah sebagai berikut.

Nama	Usia
Ali	25
Fahmianto	27

Tabel 2:

<table border="1"><tbody>
<tr style="line-height: 40px; text-align: center;" valign="bottom"><th width="132">Nama</th><th width="132">Usia</th></tr>
<tr style="line-height: 40px; text-align: left;" valign="top"><td width="215">Ali</td><td width="132">25</td></tr>
<tr style="line-height: 40px; text-align: left;" valign="top"><td width="215">Fahmianto</td><td width="132">27</td></tr>
</tbody></table>

Hasilnya adalah sebagai berikut :

Nama	Usia
Ali	25
Fahmianto	27

Menyajikan Tabel dengan Spaning
Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut ini contoh tabel yang menggabungkan baris :

<table border="1"><tbody>
<tr valign="top"><td width="215">Benua</td><td width="215">Negara</td></tr>
<tr valign="top"><td rowspan="4">ASIA</td><td>Arab Saudi</td></tr>
<tr valign="top"><td>India</td></tr>
<tr><td>Indonesia</td></tr>
<tr><td>Singapura</td></tr>
</tbody></table>

Hasilnya adalah sebagai berikut :

Benua	Negara
ASIA	Arab Saudi
	India
	Indonesia
	Singapura

Tabel menggunakan penggabungan kolom

<table border=1>
<tr valign=top><td width=123>Benua</td><td width=223 colspan=4>Eropa</td></tr>
<tr valign=top><td>Negara</td><td>Belanda</td><td>Italia</td><td>Inggris</td><td>Jerman</td></tr>
</table>

Benua	Eropa
Negara	Belanda	Italia	Inggris	Jerman