Image atau Gambar HTML
15 October 2012
Font HTML
23 October 2012

Tabel HTML

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

 

Muhammat Rasid Ridho
Muhammat Rasid Ridho
[telp/wa 0831 8393 2425] Suka Jalan jalan, Bermain Koding Program, Belajar Jaringan dan Berbagi Cerita. Jangan lupa tulis komentar di bawah ini ya teman teman ... !

Leave a Reply

Your email address will not be published.