Jelajahi eBook
Kategori
Jelajahi Buku audio
Kategori
Jelajahi Majalah
Kategori
Jelajahi Dokumen
Kategori
Media Pembelajaran Apriliya Rasmadiowati
Diunggah oleh
Apriliya RasmadiowatiJudul Asli
Hak Cipta
Bagikan dokumen Ini
Apakah menurut Anda dokumen ini bermanfaat?
Apakah konten ini tidak pantas?
Laporkan Dokumen IniMedia Pembelajaran Apriliya Rasmadiowati
Judul Asli:
Diunggah oleh
Apriliya RasmadiowatiPemograman 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
