Pemograman web dan

perangkat bergerak

Kompetensi dasar
3.3 Menerapkan format tabel pada halaman
web
4.3 Membuat kode HMTL untuk
menampilkan tabel pada halaman web

SUB MATERI
PENGGABUNGAN BARIS DAN KOLOM
PADA TABEL DALAM HTML
1
 Tujuan Pembelajaran :
1. Siswa dapat menjelaskan penggabungan kolom table pada halaman web
dengan benar
2. Siswa dapat menjelaskan penggabungan baris table pada halaman web
dengan benar
3. Siswa dapat menjelaskan penggunaan penggabungan baris dan kolom
secara bersama-sama pada table dalam halaman web dengan benar
4. Peserta didik dapat menerapkan penggabungan kolom table pada halaman
web dengan benar
5. Peserta didik dapat menerapkan penggabungan baris table pada halaman
web dengan benar
6. Peserta didik dapat menerapkan penggunaan penggabungan baris dan
kolom secara bersama-sama pada table dalam halaman web dengan benar

2
 Gambar apakah ini ?
Apakah bisa ditampilkan pada halaman web ?
Untuk membuat tabel dalam HTML tag utama apa
yang dibutuhkan ?
Attribut apa yang digunakan pada tag <tabel> ?
Attribut apa yang digunakan pada tag <tr> ?
Attribut apa yang digunakan
pada tag <td> ?

3
Tabel A Apakah ini juga
disebut dengan tabel ?
Apakah bisa ditampilkan
dalam halaman web ?
Apa perbedaan dengan
tabel sebelumnya ?
Apa manfaat dari adanya
penggabungan baris

Tabel B
vs dan kolom pada tabel ?

Bagaimana agar kita bisa

membuat kolom dan
baris seperti tabel A?

4
 Merger cel Ms. Office

vertikal rowspan HTML

horizontal colspan
<table border=1>
Bagaimana
penerapannya
<tr>
<td rowspan=2></td>
<td colspan=3></td>
</tr>
<tr>
<td></td>
<td></td>
dalam syntax
<td></td>
</tr>
<tr>
html
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Jumlah cel yang akan
digabungkan
6
<table border=1>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
7
<table border=1>
<tr>
<td rowspan=2></td>
<td colspan=2></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

8
<table border=1>
Tabel A
<tr> <table border=1>
<td></td> <tr>
<td></td> <td rowspan=2></td>
<td></td> <td colspan=2></td>
</tr>
<tr> vs Tabel B
</tr>
<tr>
<td></td> <td></td>
<td></td> <td></td>
<td></td> </tr>
</tr> <tr>
<tr> <td></td>
<td></td> <td></td>
<td></td> Dimana Letak <td></td>
<td></td> Perbedaanya ? </tr>
</tr> </table>
</table> Kenapa
berbeda?