Anda di halaman 1dari 22

Pemograman Web dan

Perangkat Bergerak
Materi :
Menyajikan Tabel dalam HTML

Oleh : Apriliya Rasmadiowati


KOMPETENSI DASAR
KD

Indikator
3.3 Menerapkan format tabel pada halaman web
4.3 Membuat kode html untuk menampilkan tabel
pada halaman web
MATERI

Evaluasi

Referensi

Exit
INDIKATOR
KD
3.3.1. Menjelaskan tag-tag html yang digunakan untuk
Indikator
membuat tabel.
3.3.2 Menentukan prosedur pembuatan tabel dalam
MATERI html.
3.3.3 Menentukan penerapan format tabel dalam web.
Evaluasi 3.3.4 Menentukan prosedur pembuatan tabel dalam
tabel.
Referensi 4.3.1 Merancang program tampilan tabel dalam html
4.3.2 Membuat program halaman web yang menampilkan
Exit tabel.
4.3.3 Menguji program tampilan tabel dalam web server.
MATERI
KD
tag-tag html yang
digunakan untuk
Indikator
membuat tabel

MATERI prosedur
pembuatan tabel
dalam html
Evaluasi MENYAJIKAN TABEL DALAM
HTML
penerapan format
Referensi
tabel dalam web

Exit
prosedur
pembuatan tabel
dalam tabel

NEXT
MATERI LANJUTAN
KD

Indikator
STRUKTUR DASAR TABEL

MATERI

Evaluasi

Referensi <table>…</table> <tr>…</tr> <td>…</td>

Exit

BACK NEXT
MATERI LANJUTAN
KD

Indikator
Macam Tabel

MATERI

Evaluasi

Referensi Tabel Sederhana Tabel Kompleks

Exit

BACK NEXT
MATERI LANJUTAN
KD

Indikator
Tabel Sederhana
Untuk membuat tabel sederhana maka membutuhkan tag :
MATERI
<table>
<tr>
Evaluasi <td> … </td>
</tr>
Referensi </table>

Exit Jumlah <tr>..</tr> tergantung jumlah baris yang akan di buat


Jumlah <td> .. </td> tergantung dengan jumlah kolom / sel yang akan
di buat

BACK NEXT
MATERI LANJUTAN
KD

Indikator
Contoh Tabel Sederhana
Hasilnya
<table border=4>
MATERI <td>
<td>100</td>
<td>200</td>
Evaluasi <td>300</td>
</tr>
<tr>
Referensi
<td>400</td>
<td>500</td>
Exit <td>600</td>
</tr>
</table>

BACK NEXT
MATERI LANJUTAN
KD

Indikator
Tabel Kompleks Memiliki judul tabel

MATERI

<table>
Evaluasi
<thead>
<th> … </th> judul tabel
Referensi </thead>

Exit <tr>
<td> … </td>
</tr>
</table>

BACK NEXT
MATERI LANJUTAN
KD

Indikator
Contoh Tabel Kompleks
Hasilnya
<tabel border=1>
<thead> Judul Tabel
MATERI
<th>Nama</th>
<th>Alamat</th>
<th>Telepon</th>
Evaluasi
</thead>
<tr>
Referensi <td>Jon Keboy</td>
<td>Jl. Angker Indah</td>
<td>7878787</td>
Exit </td>
<td>
<td>Frank de Pengky</td>
<td>Jl. Ongol-ongol</td>
<td>7779988</td>
</td>
</table>

BACK NEXT
MATERI LANJUTAN
KD

Indikator
Atribut pada tag <tabel>…</table>

Width
MATERI
Cellspacing
Evaluasi
Cellpadding
Referensi
<tabel>…</table> Height
Exit
Border

Align

Bgcolor

BACK NEXT
MATERI LANJUTAN
KD

Indikator
Atribut pada tag <tr>…</tr>

MATERI

Evaluasi
Align
Referensi
<tr>…</tr>
Exit
Valign

BACK NEXT
MATERI LANJUTAN
KD

Indikator
Atribut pada tag <td>…</td>

Width
MATERI

Height
Evaluasi

Rowspan
Referensi
<td>…</td>
Exit Colspan

Align

Bgcolor

BACK NEXT
MATERI LANJUTAN
KD
Contoh penggunaan attribut
Indikator
<html> <tr>
<body> <td align="left">Make-Up</td>
<table width=400 border=1 <td align="right">$30.00</td>
MATERI
cellspasing=2 cellpadding=3> <td align="right">$44.45</td>
<tr> </tr>
Evaluasi <th align="left" <tr>
bgcolor="yellow">Money Spent <td align="left">Food</td>
on...</th> <td align="right">$730.40</td>
Referensi <th align="right" <td align="right">$650.00</td>
bgcolor="yellow">January</th> </tr>
<th align="right" <tr>
Exit bgcolor="yellow">FEBRUARY</th> <th align="left">Sum</th>
</tr> <th
<tr> align="right">$1001.50</th>
<td align="left">Clothes</td> <th align="right">$744.65</th>
<td align="right">$241.10</td> </tr>
<td align="right">$50.20</td> </table>
</tr> </body>
</html>

BACK NEXT
MATERI LANJUTAN
KD
Contoh penggunaan attribut colspan dan rowspan
Indikator
<html> <H4>Cell that spans two
<body> rows:</H4>
<H4>Cell that spans two <table border=1>
MATERI
columns:</H4> <tr>
<table border=1> <th>Name:</th>
Evaluasi <tr> <td>Bill Gates</td>
<th>Name</th> </tr>
<th colspan=2>Telephone</th> <tr>
Referensi </tr> <th ROWSPAN=2>Telephone</th>
<tr> <td>555 77 854</td>
<td>Bill Gates</td> </tr>
Exit <td>555 77 854</td> <tr>
<td>555 77 855</td> <td>555 77 855</td>
</tr> </tr>
</table> </table>
</body>
</html>

BACK NEXT
MATERI LANJUTAN
KD

Indikator
Tabel Bersarang / Tabel yang sangat Kompleks

MATERI

Evaluasi menghasilkan layout tabel yang kompleks


tanpa membuat tabel yang sangat kompleks
Referensi

Exit
membuat tabel di dalam sebuah sel (<td></td>)

BACK NEXT
MATERI LANJUTAN
KD
Contoh penggunaan tabel bersarang
Indikator
<HTML> <TD>C</TD>
<BODY> <TD>D</TD>
<TABLE BORDER=1> </TR>
MATERI
<TR> </TABLE>
<TD> </TD>
Evaluasi <P>This is first paragraph</P> </TR>
<P>This is second <TR>
paragraph</P> <TD>This Cell contains a list:
Referensi </TD> <UL>
<TD>This Cell cotanins a <LI>Apel</LI>
Table: <LI>Pisang</LI>
Exit <TABLE BORDER=1> <LI>Nanas</LI>
<TR> </UL>
<TD>A</TD> </TD>
<TD>B</TD> <TD></TD>
</TR> </TR>
<TR> </TABLE>
</BODY>
</HTML>

BACK
EVALUASI
KD
Buatlah dokumen HTML dari tampilan table berikut ini
Indikator

MATERI

Evaluasi

Referensi

Exit

NEXT
EVALUASI
KD
Buatlah dokumen HTML dari tampilan table berikut ini
Indikator

MATERI

Evaluasi

Referensi

Exit

BACK NEXT
EVALUASI
KD
Buatlah dokumen HTML dari tampilan table berikut ini
Indikator

MATERI

Evaluasi

Referensi

Exit

BACK
REFERENSI
KD
Buku Pemograman Web dan Perangkat Bergerak SMK Kelas XI
Indikator
penulis Wahyu Purnomo dan Endah Damayanti

MATERI Modul Pemograman Web dan Perangkat Bergerak


penulis Arika Prihartanti S, S.Pd
Evaluasi
Buku Pemograman Web dan Perangkat Bergerak XI
penulis Ikrar Auliady, S.Kom
Referensi

Exit
TERIMA KASIH