PEMROGRAMAN WEB SEMESTER 1 88 | Page 8. Kegiatan Belajar 8 : Menyajikan Tabel dengan Spaning a. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 8 ini Peserta Didik diharapkan dapat : 1) Memahami Tabel dengan Spaning 2) Menyajikan Tabel dengan Spaning b. Uraian Materi 1) Pembuatan Tabel Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut ini contoh tabel yang menggabungkan baris : Benua Negara ASIA Arab Saudi India Indonesia Singapura Berikut ini contoh tabel yang menggabungkan kolom : Benua EROPA Negara Belanda Italia Inggris Jerman Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan adalah sebagai berikut Rowspan =angka(baris yang di span oleh sel) Colspan =angka(kolom yang di span oleh sel) Jadi untuk menggabungkan 4 baris seperti table di atas adalah : <td rowspan=4> …….</td>
Buku Kurikulum 2013 Sub Pokok Bahasan Tabel Pemrograman WEB Dasar SMK Spanning Table HTML
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
PEMROGRAMAN WEB SEMESTER 1
88 | P a g e
8. Kegiatan Belajar 8 : Menyajikan Tabel dengan Spaning
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 8 ini Peserta Didik diharapkan dapat :
1) Memahami Tabel dengan Spaning
2) Menyajikan Tabel dengan Spaning
b. Uraian Materi
1) Pembuatan Tabel
Ada kalanya kita membuat table dengan menggabungkan baris, ataupun
kolom. Berikut ini contoh tabel yang menggabungkan baris :
Benua Negara
ASIA Arab Saudi
India
Indonesia
Singapura
Berikut ini contoh tabel yang menggabungkan kolom :
Benua EROPA
Negara Belanda Italia Inggris Jerman
Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan
adalah sebagai berikut
Rowspan =angka(baris yang di span oleh sel)
Colspan =angka(kolom yang di span oleh sel)
Jadi untuk menggabungkan 4 baris seperti table di atas adalah :
<td rowspan=4> …….</td>
Pemrograman Web Semester 1
89 | P a g e
Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah :
<th colspan=4> …….</th>
c. Rangkuman
Untuk menggabungkan baris ataupun kolom pada tabel, digunakan atribut :
Rowspan : untuk baris
Colspan : untuk kolom
d. Tugas
1. Buatlah dokumen HTML berikut ini :
<html
<head>
<title>Tabel Dengan Rowspan</title>
</head>
<body>
<table width="500" border="1">
<tr>
<th scope="col">Nama Perumahan </th>
<th scope="col">Tipe / Luas tanah
(m<sup>2</sup>) </th>
</tr>
<tr>
<td rowspan="4">Griya Indah Permai </td>
<td>21 / 60 </td>
</tr>
<tr>
<td>36 / 90 </td>
PEMROGRAMAN WEB SEMESTER 1
90 | P a g e
</tr>
<tr>
<td>45 / 120 </td>
</tr>
<tr>
<td>54 / 120 </td>
</tr>
</table>
</body>
</html>
Bagaimana hasilnya? Apa yang dapat kamu simpulkan?
2. Buatlah dokumen HTML berikut ini :
<html >
<head>
<title>Tabel dengan Colspan</title>
</head>
<body>
<table width="500" border="1">
<tr>
<th scope="col">Perumahan</th>
<th colspan="4" scope="col">Tipe / Luas
tanah (m<sup>2</sup>) </th>
</tr>
<tr>
Pemrograman Web Semester 1
91 | P a g e
<td>Griya Indah Permai </td>
<td>21/60</td>
<td>36/90</td>
<td>45/120</td>
<td>54/120</td>
</tr>
</table>
</body>
</html>
Bagaimana hasilnya? Apa yang dapat kamu simpulkan?
3. Buatlah dokumen HTML dari tampilan table berikut ini :
Benua Negara
ASIA Arab Saudi
India
Indonesia
Singapura
EROPA Belanda
Italia
Inggris
Jerman
4. Buatlah dokumen HTML dari tampilan tabel berikut ini :
Benua EROPA ASIA
Negara Belanda Italia Indonesia India
Bagaimana hasilnya? Apa yang dapat kamu simpulkan?
5. Buatlah dokumen HTML dari tampilan table berikut ini :
apel
jeruk
mangga
pisang nanas
PEMROGRAMAN WEB SEMESTER 1
92 | P a g e
leci
e. Tes Formatif
1. Apa atribut untuk menggabungkan baris?
2. Apa atribut untuk menggabungkan kolom?
3. Tulislah tag jika ingin menggabungkan 3 baris !
4. Tulislah tag jika ingin menggabungkan 3 kolom !
<html> <head><title>nested table 3</title></head> <body> <table border="3" cellpadding="10" cellspacing="10"> <td> sel berikutnya yang satu ini memiliki tabel kecil di
PEMROGRAMAN WEB SEMESTER 1
98 | P a g e
dalamnya, tabel di dalam tabel. </td> <td> <table border="3" cellpadding="3" cellspacing="3"> <td>tabel ke 2</td> <td>tabel ke 2</td> <tr> <td>tabel ke 2</td> <td>tabel ke 2</td> </tr> </table></td> </table> </body> </html>
3. Buatlah dokumen HTML dari tampilan tabel berikut ini :
4. Buatlah dokumen HTML dari tampilan tabel berikut ini :
5. Buatlah dokumen HTML dari tampilan table berikut ini :
Pemrograman Web Semester 1
99 | P a g e
e. Tes Formatif
1. Apa keuntungan teknik tabel di dalam tabel?
2. Jelaskan cara membuat tabel di dalam tabel?
3. Mana pernyataan berikut ini yang benar untuk tag tabel di dalam tabel?
a. <table>..</table> diletakan di dalam sel
b. <table>..</table> diletakan di dalam <tr>..</tr>
c. <table>..</table> diletakan di dalam <td>..</td>