Memasukkan tabel ke dalam halaman Web

Sebuah tabel termasuk salah satu komponen penting di dalam halaman web.

Komponen-komponen tabel dapat meliputi:
Row: baris dari tabel
Column: kolom dari tabel
Border: adalah garis batas dari tabel yang kita buat
Cellspacing: lebar spasi dari masing-masing sel
Cellpadding: jarak antara teks ke tabel dari masin-masing sel

Struktur tag dari sebuah tabel adalah sebagai berikut:

<table>
<tr>
<td> </td>
</tr>
</table>

<TR> adalah tag untuk pembuat baris, tag ini HARUS ada di dalam tag <table> dan tidak dapat digunakan secara terpisah. Sedangkan tag <TD> adalah tag untuk pembuat kolom. Contoh deklarasi tabel diatas adalah tabel 1x1, artinya mempunyai 1 baris dan 1 kolom. Berikut adalah contoh tabel 3x2 (3 baris, 2 kolom)

<table>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
<tr>
<td>5 </td>
<td>6 </td>
</tr>
</table>

Berikut adalah tampilan outputnya:

Mewarnai tabel

Sebagaimana halaman web secara global, kita dapat memberikan warna pada tabel yang kita buat. Untuk memberi warna tabel, kita gunakan properti yang bernama bgcolor, yang dapat kita berikan di dalam tag <table> ataupun <td>, berikut adalah contohnya:

<table width="100%" border="0" cellpadding="2" cellspacing="4" bgcolor="#0000FF">
<tr>
<td bgcolor="#FF0000">&nbsp;</td>
<td bgcolor="#FF0000">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#CCFF66">&nbsp;</td>
<td bgcolor="#CCFF66">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#CCFF66">&nbsp;</td>
<td bgcolor="#CCFF66">&nbsp;</td>
</tr>
</table>

LATIHAN / TUGAS:
* Buatlah sebuah tabel kelas yang berisi data-data seluruh siswa, yang meliputi:
Nama Siswa, Alamat, Tempat dan Tanggal Lahir, Agama dan Nomor HP/Telp
* Hiaslah tabel tersebut dengan variasi warna yang match / sepadan
* Gunakan huruf dengan style yang didefinisikan sendiri
* Simpan file tersebut ke folder document dan lihatlah di browser mozilla

Menggabung Sel

Sama seperti program spreadsheet lainnya, sel-sel dalam tabel di HTML dapat dicombine satu sama lain. Untuk mengcombine sel, dapat dicombine ke samping (kolom) ataupun mengcombine ke bawah (baris). Pada contoh tabel diatas, baris yang pertama akan kita buat menjadi satu sel.

<table width="100%" border="0" cellpadding="2" cellspacing="4" bgcolor="#0000FF">
<tr>
<td colspan="2" bgcolor="#FF0000">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#CCFF66">&nbsp;</td>
<td bgcolor="#CCFF66">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#CCFF66">&nbsp;</td>
<td bgcolor="#CCFF66">&nbsp;</td>
</tr>
</table>

Perhatikan tag yang dicetak tebal, kita akan menemukan properti colspan yang digunakan untuk menggabung kolom. Nilai colspan adalah jumlah kolom yang akan digabung. Setelah colspan digunakan, kita tidak perlu menambahkan tag <TD> lagi.
Berikutnya adalah contoh menggabung baris.

<table width="100%" border="0" cellpadding="2" cellspacing="4" bgcolor="#0000FF">
<tr>
<td bgcolor="#FF0000">&nbsp;</td>
<td bgcolor="#FF0000">&nbsp;</td>
</tr>
<tr>
<td rowspan="2" bgcolor="#CCFF66">&nbsp;</td>
<td bgcolor="#CCFF66">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#CCFF66">&nbsp;</td>
</tr>
</table>

Sama seperti colspan, properti rowspan digunakan untuk menggabung baris, nilainya adalah sejumlah baris yang akan digabung.

Memasukkan image ke dalam tabel

Tabel dapat diberi background gambar, sama seperti halaman web, yaitu dengn cara menambahkan properti background di dalam tag <table>

<table background="images/gambar.jpg">
Hasilnya adalah sebagai berikut:

Style di dalam tabel

Sebagaimana mengganti format teks dengan style, kita juga dapat menggunakan CSS untuk mengganti tampilan tabel menjadi lebih interaktif dan memikat.

Contoh:

<td width="50%"
style="BORDER-RIGHT: #cccccc 2px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: #cccccc 2px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 0px;
BORDER-LEFT: #cccccc 2px solid;
PADDING-TOP: 0px;
BORDER-BOTTOM: #cccccc 2px solid;
BACKGROUND-COLOR: #ffffcc">Style yang pertama </td>

<td width="50%"
style="FONT-WEIGHT: bold;
FONT-SIZE: 12px;
PADDING-BOTTOM: 2px;
COLOR: #fff000;
TEXT-INDENT: 4px;
PADDING-TOP: 2px;
FONT-FAMILY: helvetica, arial, sans;
BACKGROUND-COLOR: #003366">Style yang kedua </td>