Dalam tutorial sebelumnya penulis telah membahas bagaimana cara membuat tabel dengan html. Tabel yang telah dibuat sebelumnya adalah seperti berikut:
Isi kolom 1 baris 1 | Isi kolom 2 baris 1 | Isi kolom 3 baris 1 | Isi kolom 4 baris 1 |
Isi kolom 1 baris 2 | Isi kolom 2 baris 2 | Isi kolom 3 baris 2 | Isi kolom 4 baris 2 |
Isi kolom 1 baris 3 | Isi kolom 2 baris 3 | Isi kolom 3 baris 3 | Isi kolom 4 baris 3 |
Tabel di atas, garis tepinya belum teratur, begitu pula dengan warnanya. Selain itu, kalau kita mengisikan teks/objek di dalamnya, maka tabel akan bergeser. Perhatikan tabel berikut, kita akan mencoba menambahkan beberapa kata di dalam tabel.
Isi kolom 1 baris 1. Isi kolom 1 baris 1 ini ditambah...... | Isi kolom 2 baris 1 | Isi kolom 3 baris 1 | Isi kolom 4 baris 1 |
Isi kolom 1 baris 2 | Isi kolom 2 baris 2 | Isi kolom 3 baris 2 | Isi kolom 4 baris 2 |
Isi kolom 1 baris 3 | Isi kolom 2 baris 3 | Isi kolom 3 baris 3 | Isi kolom 4 baris 3 |
Sel-sel tabel berpindah kan! Untuk mengatur agar tabel tidak berpindah, kita harus menambahkan beberapa properti pada tabel yang kita buat, kita harus mengatur lebar tabel (kita juga harus mengatur lebar ataupun tinggi sel tabel, dan akan dibahas pada kesempatan lain). Beberapa properti tabel yang dapat kita tambahkan antara lain sebagai berikut:
- tabel garis tabel (border) yang diukur dengan angka. Sintaksnya:border="angka" contoh: border="1"
- warna garis tabel (bordercolor). Sintaksnya: bordercolor="warna/kode warna"contoh: bordercolor="blue" atau bordercolor="#0000ff"
- Tata letak tabel (align), yaitu dalam posisi bagaimana tabel tersebut (kiri, kanan, atau tengah). Contoh: align="center"
- Jarak tepi tabel dengan isi sel tabel (cellpadding), diukur dengan angka dalam satuan pixel. Sintaksnya: cellpadding="angka" contoh: cellpadding="2". Angka 1 berarti 1 pixel. Semakin besar angkanya, maka isi sel akan semakin jauh dari tepi tabel.
- Tebal frame tabel atau spasi antara sel, yang juga diukur dengan angka dalam satuan pixel. Sintaksnya: cellspacing="angka" contoh: cellspacing="0". Perlu diperhatikan, antara border dan cellspacing berbeda
Perhatikan contoh berikut:
<table align="center" border="1" bordercolor="blue" cellpadding="5" cellspacing="0">
<tr>
<td>Isi kolom 1 baris 1</td>
<td>Isi kolom 2 baris 1</td>
<td>Isi kolom 3 baris 1</td>
<td>Isi kolom 4 baris 1</td>
</tr>
<tr>
<td>Isi kolom 1 baris 3</td>
<td>Isi kolom 2 baris 2</td>
<td>Isi kolom 3 baris 2</td>
<td>Isi kolom 4 baris 2</td>
</tr>
<tr>
<td>Isi kolom 1 baris 3</td>
<td>Isi kolom 2 baris 3</td>
<td>Isi kolom 3 baris 3</td>
<td>Isi kolom 4 baris 3</td>
</tr>
</table>
Hasilnya sebagai berikut:
Isi kolom 1 baris 1 | Isi kolom 2 baris 1 | Isi kolom 3 baris 1 | Isi kolom 4 baris 1 |
Isi kolom 1 baris 3 | Isi kolom 2 baris 2 | Isi kolom 3 baris 2 | Isi kolom 4 baris 2 |
Isi kolom 1 baris 3 | Isi kolom 2 baris 3 | Isi kolom 3 baris 3 | Isi kolom 4 baris 3 |
Kita coba ganti cellspacing dengan angka 3, seperti contoh berikut:
<table align="center" border="1" bordercolor="blue" cellpadding="5" cellspacing="3">
<tr>
<td>Isi kolom 1 baris 1</td>
<td>Isi kolom 2 baris 1</td>
<td>Isi kolom 3 baris 1</td>
<td>Isi kolom 4 baris 1</td>
</tr>
<tr>
<td>Isi kolom 1 baris 3</td>
<td>Isi kolom 2 baris 2</td>
<td>Isi kolom 3 baris 2</td>
<td>Isi kolom 4 baris 2</td>
</tr>
<tr>
<td>Isi kolom 1 baris 3</td>
<td>Isi kolom 2 baris 3</td>
<td>Isi kolom 3 baris 3</td>
<td>Isi kolom 4 baris 3</td>
</tr>
</table>
Hasilnya sebagai berikut:
Isi kolom 1 baris 1 | Isi kolom 2 baris 1 | Isi kolom 3 baris 1 | Isi kolom 4 baris 1 |
Isi kolom 1 baris 3 | Isi kolom 2 baris 2 | Isi kolom 3 baris 2 | Isi kolom 4 baris 2 |
Isi kolom 1 baris 3 | Isi kolom 2 baris 3 | Isi kolom 3 baris 3 | Isi kolom 4 baris 3 |
Tutorial ini cukup di sini dahulu nanti disambung di lain waktu.