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
Suka Jalan jalan, Bermain Koding Program, Belajar Jaringan dan Berbagi Cerita. Jangan lupa tulis komentar di bawah ini ya teman teman ... ! [telp/wa 0831 8393 2425]

Leave a Reply

Your email address will not be published.