MEMBUAT TABEL

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

Berikut ini contoh bentuk-bentuk tabel.

Bentuk dasar 1

kotak 1

kotak 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 1

kotak 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 1	kotak 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 1	kotak 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 header	kotak 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 header	kotak 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

	Meals	Hotels	Transport	subtotals
San Jose
25-Aug-97	37.74	112.00	45.00
26-Aug-97	27.28	112.00	45.00
subtotals	65.02	224.00	90.00	379.02
Seattle
27-Aug-97	96.25	109.00	36.00
28-Aug-97	35.00	109.00	36.00
subtotals	131.25	218.00	72.00	421.25
Totals	196.27	442.00	162.00	800.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