-->

MEMBUAT TABEL

YESUS KRISTUS penebus dosa dan juruselamat dunia ......... CLOSE

Berikut ini contoh bentuk-bentuk tabel.

Bentuk dasar 1

kotak 1kotak 2

Tabel di atas kode HTML-nya adalah:
<table border="1" cellpadding="5" cellspacing="5"><tbody>
<tr> <td width="40%">kotak 1</td><td>kotak 2</td> </tr>
</tbody></table>

Bentuk dasar 2
kotak 1kotak 2

Tabel di atas kode HTML-nya adalah:
<table border="1" cellpadding="5" cellspacing="5"><tbody>
<tr> <td width="30%">kotak 1</td><td>kotak 2</td> </tr>
</tbody></table>

Keterangan:
border="1" artinya ketebalan garis, bila angka 1 diganti 2 garisnya jadi makin tebal.
cellpadding="5" artinya jarak huruf dengan dinding kotak. Angka makin kecil, huruf makin mepet dinding.
cellspacing="5" artinya jarak antar kotak (jarak antar sel)
<tr > menyatakan row, kotak mendatar
<td> menyatakan column, kotak menurun


Menggunakan Column Header
Column Header 1 Column Header 2
kotak 1kotak 2

Tabel di atas kodenya:
<table border="1" cellpadding="5" cellspacing=\"5\"><tbody>
<tr> <th>Colunm Header 1</th> <th>Colunm Header 2</th> </tr>
<tr> <td width=\"30%\">kotak 1</td><td>kotak 2</td> </tr>
</tbody></table>



Menggunakan Table Header (mendatar)
Table header
kotak 1kotak 2


Tabel di atas kodenya:
<table border="1" cellpadding="5" cellspacing="5"><tbody>
<tr> <th colspan="2">Table header</th> </tr>
<tr> <td width="20%">kotak 1</td><td>kotak 2</td> </tr>
</tbody></table>
<b></b>

Keterangan:
border="1" artinya ketebalan garis, bila angka 1 diganti 2 garisnya jadi makin tebal.
cellpadding="5" artinya jarak huruf dengan dinding kotak. Angka makin kecil, huruf makin mepet dinding.
cellspacing="5" artinya jarak antar kotak (jarak antar sel)
<tr > menyatakan row, kotak mendatar
<td> menyatakan column, kotak menurun
colspan="2" artinya merge sel sebanyak 2 kolom



Menggunakan Table Header (vertikal)
Table headerkotak 1
kotak 2


Tabel di atas kodenya:
<table border="1" cellpadding="5" cellspacing="5"><tbody>
<tr> <th rowspan="2">Table header</th><td>kotak 1</td></tr>
<tr> <td>kotak 2</td> </tr>
</tbody></table>

Keterangan:
border="1" artinya ketebalan garis, bila angka 1 diganti 2 garisnya jadi makin tebal.
cellpadding="5" artinya jarak huruf dengan dinding kotak. Angka makin kecil, huruf makin mepet dinding.
cellspacing="5" artinya jarak antar kotak (jarak antar sel)
<tr > menyatakan row, kotak mendatar
<td> menyatakan column, kotak menurun
rowspan="2" artinya merge sel sebanyak 2 row



Tabel dengan background dan huruf berwarna
Table headerkotak 1
kotak 2

Tabel di atas kodenya:
<table border="1" cellpadding="5" cellspacing="5"><tbody>
<tr> <th rowspan="2" style="background-color: yellow; color: blue;">Table header</th><td>kotak 1</td></tr>
<tr> <td>kotak 2</td> </tr>
</tbody></table>

Keterangan:
border="1" artinya ketebalan garis, bila angka 1 diganti 2 garisnya jadi makin tebal.
cellpadding="5" artinya jarak huruf dengan dinding kotak. Angka makin kecil, huruf makin mepet dinding.
cellspacing="5" artinya jarak antar kotak (jarak antar sel)
<tr > menyatakan row, kotak mendatar
<td> menyatakan column, kotak menurun
rowspan="2" artinya merge sel sebanyak 2 row
background-color: yellow artinya warna background
color: blue artinya warna huruf



YESUS adalah Allah yang menjelma manusia. Dia menebus dosa anda. Anda menolak untuk ditebus ??



Bentuk kompleks
Travel Expense Report
MealsHotelsTransportsubtotals
San Jose
25-Aug-9737.74112.0045.00
26-Aug-9727.28112.0045.00
subtotals 65.02224.0090.00379.02
Seattle
27-Aug-9796.25109.0036.00
28-Aug-9735.00109.0036.00
subtotals131.25218.0072.00421.25
Totals196.27442.00162.00800.27

Table di atas kodenya:
<TABLE border="1">
<CAPTION>Travel Expense Report</CAPTION>
<TR>
<TH></TH>
<TH id="header2" axis="expenses">Meals
<TH id="header3" axis="expenses">Hotels
<TH id="header4" axis="expenses">Transport
<TD>subtotals</TD>
<TR>
<TH id="header6" axis="location">San Jose
<TH> <TH> <TH> <TD>
<TR>
<TD id="header7" axis="date">25-Aug-97
<TD headers="header6 header7 header2">37.74
<TD headers="header6 header7 header3">112.00
<TD headers="header6 header7 header4">45.00
<TD>
<TR>
<TD id="header8" axis="date">26-Aug-97
<TD headers="header6 header8 header2">27.28
<TD headers="header6 header8 header3">112.00
<TD headers="header6 header8 header4">45.00
<TD>
<TR>
<TD>subtotals
<TD>65.02
<TD>224.00
<TD>90.00
<TD>379.02
<TR>
<TH id="header10" axis="location\">Seattle
<TH> <TH> <TH> <TD>
<TR>
<TD id="header11" axis="date">27-Aug-97
<TD headers="header10 header11 header2">96.25
<TD headers="header10 header11 header3">109.00
<TD headers="header10 header11 header4">36.00
<TD>
<TR>
<TD id="header12" axis="date">28-Aug-97
<TD headers="header10 header12 header2">35.00
<TD headers="header10 header12 header3">109.00
<TD headers="header10 header12 header4">36.00
<TD>
<TR>
<TD>subtotals
<TD>131.25
<TD>218.00
<TD>72.00
<TD>421.25
<TR>
<TH>Totals
<TD>196.27
<TD>442.00
<TD>162.00
<TD>800.27
</TABLE>

Sumber:
http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20001106/#text-markup









KEMBALI KE MENU

Tidak ada komentar:

...