Untung Suryadi, S.Kom., M.Pd.

,
Gr.

Next Page
 Tabel merupakan elemen yang terdiri dari sel dan
tersusun atas baris dan kolom. Tabel digunakan untuk
membuat bentuk tabel yang berisi kolom dan baris. Tabel
juga dapat dapat diisi dengan daftar item, paragraf, form,
gambar, teks dan bahkan tabel.
Sintaksnya adalah :
<table> atribut table </table>
Atribut tabel adalah :
<tr> …</tr> : Membentuk baris tabel
<td>…</td> : Membentuk kolom tabel

2
 Untuk membuat sebuah tabel dengan jumlah
baris 2 dan jumlah kolom 2.
<table border=“1”>
<tr>
<td> baris 1 kolom 1 </td>
<td> baris 1 kolom 2 </td>
</tr>
<tr>
<td> baris 2 kolom 1 </td>
<td> baris 2 kolom 2 </td>
</tr>
</table>

3
Bordercolor=“warna” ; Mengatur warna border
Bgcolor=“warna” ; Mengatur warna latar tabel
Background=“file_gambar” ; Menggunakan gambar
sebagai latar tabel
Align=“left”,”center”,”right”. ; Mengatur posisi tabel di layar
Cellpadding=“angka” ; Mengatur jarak antara border
dengan isi sel dalam 1 pixel
Cellspacing=“angka” ; Mengatur tebal frame dalam 1 pixel
Width=“angka” ; mengatur lebar tabel dalam satuan pixel
atau persen.

4
Bgcolor=“warna” ; Mengatur warna latar sel
Background=“file_gambar” ; Menggunakan gambar sebagai
latar
Align=“left”,”center”,”right”. ; Mengatur perataan isi sel secara
horisontal
valign=“top”,”middle”,”bottom”. ; Mengatur perataan isi sel
secara vertikal
Colspan=“angka” ; Menggabungkan beberapa kolom
Rowspan=“angka” ; Menggabungkan beberapa baris
Width=“angka” ; mengatur lebar sel dalam satuan pixel atau
persen.
Nowrap = Mencegah pelipatan kata walaupun isi sel lebih
panjang dari jendela browser.

5
<table border=“6” cellspacing=“6” cellpadding=“6”>
<tr>
<td bgcolor=“red”> sel 1 1 </td>
<td bgcolor=“blue”> sel 1 2 </td>
<td bgcolor=“yellow”> sel 1 3 </td>
</tr>
<tr>
<td bgcolor=“#aa00b4”> sel 2 1 </td>
<td bgcolor=“#1100ff”> sel 2 2 </td>
<td bgcolor=“#00bbcc”> sel 2 3 </td>
</tr>
<tr>
<td> sel 3 1 </td>
<td> sel 3 2 </td>
<td> sel 3 3 </td>
</tr>

</table>

6
 Untuk hal memanipulasi tabel, beberapa atribut dapat
digunakan, diantaranya adalah :

<td colspan=“jumlah_kolom”>
<td rowspan=“jumlah_baris”>

ket : jumlah kolom dan jumlah baris adalah banyaknya

baris atau kolom yang akan digabungkan

7
Contoh 1 :
<table width = “600”>
<tr>
<td rowspan=“2”> sel 1 1 dan sel 2 1 </td>
<td> sel 1 2 </td>
</tr>
<tr>
<td> sel 2 2 </td>
</tr>
</table>

8
<table>
<tr>
<td colspan=“2”> sel 1 1 dan sel 1 2 </td>
</tr>
<tr>
<td> sel 2 1 </td>
<td> sel 2 2 </td>
</tr>
</table>

9
 Perataan dalam tabel ada dua perlakuan, yaitu
perataan pada layar dan perataan teks dalam sel.
Untuk kedua maksud ini dapat digunakan atribut align
pada tag <table> yang akan mengatur perataan tabel dalam
layar, sedangkan penggunaan atribut align pada tag <td>
yang akan mengatur perataan teks pada sel secara
horisontal dan valign pada tag <td> yang akan mengatur
perataan teks pada sel secara vertikal.

10
<table align=“center” border=“1”>
<tr>
<td rowspan=“4”> sel 1 1 sel 2 1 sel 3 1 sel 4 1 </td>
<td> sel 1 2 </td>
<td> sel 1 3 </td>
</tr>
<tr>
<td align=“left” valign=“top”> sel 2 2 </td>
<td> sel 2 3 </td>
</tr>
<tr>
<td align=“center” valign=“middle”> sel 3 2 </td>
<td> sel 3 3 </td>
</tr>
<tr>
<td align=“right” valign=“bottom”> sel 4 2 </td>
<td> sel 4 3 </td>
</tr>
</table>

11
Back to Front page