Bentuk umum

Elemen elemen tabel

<table>…</table> untuk mendefinisi tabel dalam HTML.

<caption>…</caption>  untuk judul tabel.

<tr>…</tr>  menspesifikasikan baris tabel, atributnya : align( left, center,right)  dan valign (top, middle, bottom)

<th>…</th>  mendefinisikan sel header, akan ditebalkan ditengah.

<td>…</td>  mendefinisikan sel pada tabel,default teks rata kiri dan di tengah secara vertikal.

Border Tabel

 <table border=”0”>

…                                         tabel tanpa border

</table>

<table border=”1”>

…                                         tabel border 1

</table>

<table border=”7”>

…                                         tabel border tebal

</table>

Tabel dengan Caption

<table>

<caption> Judul </caption>

<tr>

<td>…</td>

…

<td>…</td>

</tr>

</table>

Colspan dan Rowspan

<table border=”1”>

<tr>

<th>…</th>

<th colspan=”2”>…</th>

</tr>
<tr>

<td>…</td>

<td>…</td>

<td>…</td>

</tr>

</table>

<table border=”1”>

<tr>

<th>…</th>

<th>…</th>

</tr>
<tr>

<td rowspan=”2”>…</td>

<td>…</td>

</tr>

<tr>

<td>…</td>

</tr>

</table>

Empty Cell

Di beberapa browser yang lama, bila ada sel yang belum ada isi nya bordernya tidak tampak.

Solusinya bisa menggunakan mnemonic “&nbsp”

Tag di dalam Suatu Tabel

Kita bisa juga menambahkan elemen atau tag html seperti <p> <ul><ol> di dalam tabel.

Tepatnya diantara tag <td>…</td>

Cellpadding

Cellpadding digunakan untuk membuat spasi lebih dari antara sel dan bordernya.

<table border=”1” cellpadding=”10”>

…

</table>

 Cellspacing

Cellspacing digunakan menambah jarak antar sel.

<table border=”1” cellspacing=”10”>

…

</table>

Atribut:
cellpadding=”10px” ==> jarak konten dengan garis
cellspacing=”20px” ==> jarak antar sel

Backgroud Tabel

background-color: green;
background-image: url(rasid.jpg);

<table border=”1″ background=”…”>

…

</table>

Background Sel Tabel

<table “border=”1”>

<tr>

<td  bgcolor=”green”>……</td>

<td  >…</td>

</tr>

<tr>

<td >…</td>

<td background=”…”>…</td>

</tr>

</table>

Mengatur (Align) Isi Sel

horisontal ==> align=”left/right/justify”
vertikal ==> valign=”top/middle/bottom”

text-align: center;
vertical-align: middle;

<table “border=”1”>

<tr>

<td  align=”left“>…</td>

<td  align=”right“>…</td>

</tr>

…

</table>

Tabel dalam Tabel

<table “border=”1”>

<tr>

<td>…</td>

<td>

<table “border=”1”>

…
</table>

</td>

</tr>
<tr>

<td>…</td>

<td>…</td>

</tr>

</table>

Atribut Frame

Atribut frame bisa kita gunakan untuk mengatur border tabel.

<table frame=”border”>

…

</table>

Pengaturan garis border sisi luar dan dalam:
Atribut frame dalam tabel: Above, below, border, box, hsides, vsides, lhs, rhs dan void
Atribut rules: all, cols, rows, none, groups

Menentukan garis border:
border-width:untuk ketebalan garis,
border-color: warna,
border-style: dotted, dashed, double, groove, ridge, inset, outset dan none