RENCANA PELAKSANAAN PEMBELAJARAN

( RPP )

Satuan Pendidikan : SMK MA’ARIF 1 TEMON
Kelas/Semester : X/1
Mata Pelajaran : Pemrograman Web
Materi pokok : Format Tabel pada Halaman Web
Waktu : 4 kali pertemuan @ 445 Menit

A. Kompetensi Inti
1. Menghayati dan mengamalkan ajaran agama yang dianutnya.
2. Mengembangkan perilaku (jujur, disiplin,tanggung jawab, peduli, santun, ramah
lingkungan, gotong royong, kerjasama, cinta damai,responsif dan proaktif) dan
menunjukan sikap sebagai bagian dari solusi atas berbagai permaslahan bangsa dalam
berinteraksi secara efektif dengan lingkungan sosial dan alam serta dalam
menempatkan diri sebagai cerminan bangsa dalam pergaulan dunia
3. Memahami, menerapkan,menganalisis pengetahuan faktual, konseptual, prosedural
berdasarkan ingintahunya tentang ilmu pengetahuan, teknologi, seni, budaya dan
humaniora dengan wawasan kemanusiaan, kebangsaan, kenegaraan dan peradaban
terkait fenomena dan kejadian, serta menerapkan pengetahuan prosedural pada bidang
kajian yang spesifik sesuai dengan bakat dan minatnya untuk memcahkan masalah
4. Mengolah, menalar, dan menyaji dalam ranah konkret dan ranah abstrak terkait
dengan pengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu
melaksanakan tugas spesifik di bawah pengawasan langsung

B. Kompetensi Dasar
1.2. Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai sumber energi di
alam
Indikator
1.2.1. Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai sumber energi
di alam.
2.2. Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari sebagai wujud
implementasi melaksanakan percobaan dan melaporkan hasil percobaan
Indikator
2.2.1. Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari sebagai
wujud implementasi melaksanakan percobaan dan melaporkan hasil percobaan
3.3. Menerapkan format tabel pada halaman web
Indikator
3.3.1 Menjelaskan perintah-perintah html untuk membuat tabel pada halaman web
3.3.2. Menerapkan perintah-perintah html untuk membuat tabel pada halaman web
4.3. Menyajikan data tabel pada halaman web
Indikator
4.3.1. Menerapkan perintah-perintah html untuk membuat tabel sederhana pada
halaman web
4.3.2. Menerapkan perintah-perintah html untuk membuat tabel dengan spanning
4.3.3. Menerapkan perintah-perintah html untuk membuat tabel di dalam tabel (tabel
bersarang)
4.3.4. Menerapkan perintah-perintah html untuk membuat tampilan web sederhana
dengan tabel

C. Tujuan Pembelajaran
1. Melalui berdoa, Peserta didik dapat merenungi kebesaran Tuhan yang menciptakan
berbagai sumber energi di alam
2. Melalui diskusi dan presentasi, peserta didik dapat menghargai kerjasama dalam
kelompok
3. Melalui membaca, diskusi dan presentasi, peserta didik dapat menunjukkan
perintah html untuk membuat tabel pada halaman web dengan benar.
4. Melalui membaca, diskusi dan presentasi, peserta didik dapat menerapkan perintah
html untuk membuat tabel pada halaman web dengan benar.
5. Melalui diskusi dan praktik, peserta didik dapat menerapkan perintah html untuk
membuat sebuah tabel sederhana pada halaman web dengan benar.
6. Indikator 4.3.2.
Melalui diskusi dan praktik, peserta didik dapat menerapkan perintah html untuk
membuat sebuah tabel dengan spanning dengan benar.
7. Indikator 4.3.3.
Melalui diskusi dan praktik, peserta didik dapat menerapkan perintah html untuk
membuat sebuah tabel di dalam tabel dengan benar.
8. Indikator 4.3.4.
Melalui diskusi dan praktik, peserta didik dapat menerapkan perintah html untuk
membuat sebuah tampilan web sederhana menggunakan tabel dengan benar.

D. Materi Pembelajaran
Materi terdapat pada buku ... halaman ...
Atau ditulis semuanya
 Anatomi tabel minimal
 Tabel dengan spanning
 Tabel di dalam tabel
 Desain halaman web dengan konsep tabel

E. Metode
1. Pendekatan : Saintifik / ---> yg lain:discovery, projrct
2. Model :
3. Metode : Penugasan, Diskusi, Presentasi, Praktek
Strategi: gabungan dari beberapa metode.

F. Media Pembelajaran
1. Laptop dan LCD
2. Papan tulis, spidol dan penghapus.

G. Alat dan Bahan
1. Lembar rangkuman materi pembelajaran.
2. Lembar penilaian
3. Laptop/PC yang sudah terinstal text editor dan browser web



H. Sumber Belajar
1. Lembar materi
2. Modul HTML / pemrograman web
3. Buku referensi dan artikel yang sesuai
4. Sumber bacaan dari Internet

I. Kegiatan Pembelajaran
1. Alokasi Waktu
(waktu: 1 pertemuan 4 x 45 menit)

2. Langkah – Langkah Pembelajaran
a. Pertemuan 1
Kegiatan Deskripsi Kegiatan
Alokasi
Waktu

Pendahuluan 1. Peserta didik berdoa dan menjawab salam dari guru.
2. Peserta didik dipresensi oleh guru.
3. Guru bertanya tentang materi sebelumnya
4. Peserta didik memperoleh apersepsi dari guru berkaitan
dengan pengetahuan mengenai Format tabel pada halaman
web.
5. Peserta didik memperoleh motivasi dari guru berkaitan
dengan format tabel pada halaman web.
6. Peserta didik mendapatkan informasi dari guru tentang KD,
tujuan, dan skenario pembelajaran.
7. Peserta didikmembentuk kelompok belajar yang
beranggotakan 4-5 orang
10 menit
Inti Mengamati
1. Peserta didik membaca buku/modul atau mengamati video
pembelajaran tentang cara membuat tabel pada halaman
web
2. Peserta didik browsing internet dan mengamati tentang
pelbagai contoh tabel dan tampilannya pada halaman web

Mengumpulkan informasi
Peserta didik mengumpulkan informasi tentang contoh
perintah/kode html untuk membuat tabel beserta hasilnya.

Menanya
1. Siswa bertanya tentang materi yang belum dipahami
2. Siswa mendiskusikan perintah html dalam pembuatan tabel
pada halaman web

Mengeksplorasi >Menalar
1. Siswa mendefinisikan perintah dasar html untuk membuat
sebuah tabel pada halaman web
2. Siswa melakukan eksperimen dengan membuat beberapa
bentuk tabel sederhana pada halaman web dengan html
3. Siswa mempraktekkan pembuatan tabel sesuai dengan soal
yang diberikan oleh guru.

Mengasosiasi >mengerjakan latihan
Siswa menganalisis, mendiskusikan serta membuat rangkuman
tentang bagian-bagian tabel pada halaman web dan perintah
140 menit
html unntuk membuatnya

Mengkomunikasikan
Siswa mempresentasikan perintah pembuatan tabel pada
halaman web
Penutup 1. Salah satu atau lebih peserta didik menyimpulkan tentang
tabel pada halaman web dan perintah html-nya.
2. Tes tertulis bentuk uraian mengenai perintah html untuk
membuat tabel pada halaman web
3. Peserta didik memperhatikan dengan cermat untuk
mempelajari materi lebih lanjut.
30 menit

Tes ada di Inti.

b. Pertemuan 2
Kegiatan Deskripsi Kegiatan
Alokasi
Waktu

Pendahuluan 1. Peserta didik berdoa dan menjawab salam dari guru.
2. Peserta didik dipresensi oleh guru.
3. Peserta didik memperoleh apersepsi dari guru berkaitan
dengan pengetahuan mengenai tabel dengan spanning pada
halaman web.
4. Peserta didik memperoleh motivasi dari guru berkaitan
dengan tabel dengan spanning pada halaman web.
5. Peserta didik mendapatkan informasi dari guru tentang KD,
tujuan, dan skenario pembelajaran.
6. Peserta didikmembentuk kelompok belajar yang
beranggotakan 4-5 orang
10 menit
Inti Mengamati
1. Peserta didik membaca buku atau melihat video tentang
tabel dengan spanning pada halaman web
2. Peserta didik browsing internet dan mengamati tentang
pelbagai contoh tabel dengan spanning dan tampilannya
pada halaman web

Mengumpulkan informasi
Peserta didik mengumpulkan informasi tentang contoh tabel
dengan spanning beserta perintah/kode html untuk membuatnya.

Menanya
1. Siswa bertanya tentang materi yang belum dipahami
2. Siswa mendiskusikan perintah pembuatan tabel dengan
spanning pada halaman web





Mengeksplorasi
140 menit
1. Siswa mendefinisikan perintah html untuk membuat sebuah
tabel dengan spanning pada halaman web
2. Siswa melakukan eksperimen dengan membuat beberapa
bentuk tabel dengan spanning pada halaman web dengan
html

Mengasosiasi
Siswa menganalisis, mendiskusikan serta membuat rangkuman
tentang bagian-bagian tabel dengan spanning pada halaman
web dan perintah html untuk membuatnya

Mengkomunikasikan
Siswa mempresentasikan perintah dasar pembuatan tabel
dengan spanning pada halaman web
Penutup 1. Salah satu atau lebih peserta didik menyimpulkan tentang
tabel dengan spanning dan perintah html-nya.
2. Tes tertulis bentuk uraian mengenai perintah html untuk
membuat tabel dengan spanning pada halaman web.
3. Peserta didik memperhatikan dengan cermat untuk
mempelajari materi lebih lanjut.
30 menit

3. Pertemuan 3
Kegiatan Deskripsi Kegiatan
Alokasi
Waktu

Pendahuluan 1. Peserta didik berdoa/menjawab salam guru bersama-sama.
2. Peserta didik dipresensi oleh guru.
3. Peserta didik memperoleh apersepsi dari guru berkaitan
dengan pengetahuan mengenai tabel di dalam tabel.
4. Peserta didik memperoleh motivasi dari guru berkaitan
dengan tabel di dalam tabel pada halaman web.
5. Peserta didik mendapatkan informasi dari guru tentang KD,
tujuan, dan skenario pembelajaran.
6. Peserta didikmembentuk kelompok belajar yang
beranggotakan 4-5 orang
10 menit
Inti Mengamati
1. Peserta didik membaca buku tentang tabel di dalam tabel
pada halaman web
2. Peserta didik browsing internet dan mengamati tentang
pelbagai contoh tabel di dalam tabel dan tampilannya pada
halaman web

Mengumpulkan informasi
Peserta didik mengumpulkan informasi tentang contoh tabel di
dalam tabel beserta perintah/kode html untuk membuatnya.




Menanya
140 menit
1. Siswa bertanya tentang materi yang belum dipahami
2. Siswa mendiskusikan perintah pembuatan tabel di dalam
tabel pada halaman web

Mengeksplorasi
1. Siswa mendefinisikan perintah html untuk membuat sebuah
tabel di dalam tabel pada halaman web
2. Siswa melakukan eksperimen dengan membuat beberapa
bentuk tabel di dalam tabel pada halaman web dengan html

Mengasosiasi
Siswa menganalisis, mendiskusikan serta membuat rangkuman
tentang bagian-bagian tabel di dalam tabel pada halaman web
dan perintah html untuk membuatnya

Mengkomunikasikan
Siswa mempresentasikan perintah dasar pembuatan tabel di
dalam tabel pada halaman web
Penutup 1. Salah satu atau lebih peserta didik menyimpulkan tentang
tabel di dalam tabel dan perintah html-nya.
2. Tes tertulis bentuk uraian mengenai perintah html untuk
membuat tabel di dalam tabel pada halaman web.
3. Peserta didik memperhatikan dengan cermat untuk
mempelajari materi lebih lanjut.
30 menit

4. Pertemuan 4
Kegiatan Deskripsi Kegiatan
Alokasi
Waktu

Pendahuluan 1. Peserta didik berdoa/menjawab salam guru bersama-sama.
2. Peserta didik dipresensi oleh guru.
3. Peserta didik memperoleh apersepsi dari guru berkaitan
dengan pengetahuan mengenai tampilan halaman web
sederhana dengan tabel.
4. Peserta didik memperoleh motivasi dari guru berkaitan
dengan tampilan halaman web sederhana dengan tabel b.
5. Peserta didik mendapatkan informasi dari guru tentang KD,
tujuan, dan skenario pembelajaran.
6. Peserta didikmembentuk kelompok belajar yang
beranggotakan 4-5 orang
10 menit
Inti Mengamati
1. Peserta didik membaca buku tentang tampilan halaman web
sederhana dengan tabel.
2. Peserta didik browsing internet dan mengamati tentang
pelbagai contoh tampilan halaman web sederhana dengan
tabel pada halaman web



Mengumpulkan informasi
140 menit
Peserta didik mengumpulkan informasi tentang contoh tampilan
halaman web sederhana dengan tabel beserta perintah/kode
HTML untuk membuatnya.

Menanya
1. Siswa bertanya tentang materi yang belum dipahami
2. Siswa mendiskusikan perintah untuk membuat tampilan
halaman web sederhana dengan tabel.

Mengeksplorasi
1. Siswa mendefinisikan perintah HTML untuk membuat
sebuah tampilan halaman web sederhana dengan tabel
2. Siswa melakukan eksperimen dengan membuat beberapa
bentuk tampilan halaman web sederhana dengan tabel

Mengasosiasi
Siswa menganalisis, mendiskusikan serta membuat rangkuman
tentang tampilan halaman web sederhana dengan tabel dan
perintah HTML unntuk membuatnya

Mengkomunikasikan
Siswa mempresentasikan perintah dasar pembuatan tampilan
halaman web sederhana dengan table
Penutup 1. Salah satu atau lebih peserta didik menyimpulkan tentang
tampilan halaman web sederhana dengan tabel dan perintah
html-nya.
2. Tes tertulis bentuk uraian mengenai tampilan halaman web
sederhana dengan tabel.
3. Peserta didik memperhatikan dengan cermat untuk
mempelajari materi lebih lanjut.
30 menit


E. Penilaian Hasil Belajar

1. Jenis / Teknik Penilaian :
a. Penilaian Sikap : Observasi
b. Penilaian Pengetahuan: Tes Tulis
c. Penilaian Keterampilan: Tes Praktik

2. Aspek Penilaian
No
Aspek yang
dinilai
Teknik Penilaian Waktu Penilaian
1. Sikap

Observasi
1. Menghayati dan mengamalkan ajaran
agama diamati selama proses KBM
2. Bekerjasama diamati dalam kegiatan
kelompok.
3. Toleransi diamati dalam diskusi ketika
terjadi proses pemecahan masalah yang
berbeda.
4. Menjaga dan memelihara kebersihan
lingkungan selama pelaksnaan
pembelajaran
Dalam pembelajaran
dan saat diskusi
(selama kegiatan
inti)
2. Pengetahuan

Tes tertulis
bentuk uraian mengenai pengertian, perintah
html untuk membuat tabel dan tahapan
dalam pengaturan dan pembuatan sebuah
tabel

Penyelesaian tugas
essay individu, pada
akhir KD
3.

Keterampilan

Praktik
Keterampilan dalam melaksanakan dan
meyelesaikan Lembar Kerja Praktik.

Penyelesaian tugas
praktik (baik individu
maupun kelompok)



















3. Bentuk Instrumen dan Instrumen Penilaian
a. Penilaian Sikap
Instrumen penilaian sikap dengan observasi
Berilah tanda cek pada kolom pilihan berikut:
Pedoman skor::
4 = selalu,
3 = sering,
2 = jarang
1 = tidak pernah

Keterangan Aspek Pengamatan
Kode Aspek Pengamatan
A Berdoa sebelum dan sesudah melakukan sesuatu
B Aktif dan berkontribusi positif dalam diskusi kelompok
C Santun dalam mengungkapkan pendapat selama diskusi
D Menjaga kebersihan selama pembelajaran

b. Penilaian Pengetahuan dan Keterampilan
1) PERTEMUAN 1
Instrumen Tes Tulis (uraian)
Jawablah pertanyaan di bawah ini dengan jelas dan benar!
1. Apakah kegunaan tabel pada halaman web?
2. Sebut dan jelaskan tag utama untuk membuat tabel!
3. Sebut dan jelaskan atribut pada tag table!
4. Tuliskan contoh perintah html untuk membuatan sebuah tabel sederhana!

Kunci jawaban :
1. Tabel digunakan untuk menampilkan informasi dalam bentuk sel yang terdiri
atas baris dan kolom.
2. Tag utama untu membuat tabel dan fungsinya adalah
Tag Fungsi
<table> ...</table> Mendefinisikan blok tabel
<tr> ... </tr> Mendefinisikan table row atau baris
<td> ... </td> Mendefinisikan table data atau sel sebagai tempat
untuk menuliskan/meletakkan data pada tabel
<th> ... </th> Mendefinisikan table heading atau sel yang merupakan
judul tiap kolom
No Nama Siswa
Aspek Pengamatan
A B C D
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1
2
3
4
5
6
7
8


3. Atribut dan nilainya pada tag Table
Width = bilangan bulat (lebar table, pixel atau persen)
Height = bilangan bulat (tinggi table, pixel atau persen)
Border = bilangan bulat (tebal garis tepi)
Cellspacing = bilangan bulat (spasi antar sel)
Cellpadding = bilangan bulat (spasi di dalam sel)
Align = [left|center|right] (perataan table)
Bgcolor = [warna|kode heksadesimal] (warna latar belakang)
4. Contoh perintah html untuk menampilkan tabel:
<table border=”1”>
<tr>
<td>Nama</td>
<td>Budi Setiawan</td>
</tr>

<tr>
<td>Umur</td>
<td>16 tahun</td>
</tr>
</table>

Pedoman Penilaian Tes Tulis Uraian (Pengetahuan)
1. Soal nomor 1 dijawab benar skor maksimal 25
2. Soal nomor 2 dijawab benar skor maksimal 25
3. Soal nomor 3 dijawab benar skor maksimal 25
4. Soal nomor 4 dijawab benar skor maksimal 25

Instrumen Praktik
Soal Praktik:
1. Buatlah tabel sederhana berikut ini dengan perintah html






2) PERTEMUAN 2
Instrumen Tes Tulis (uraian)
Jawablah pertanyaan di bawah ini dengan jelas dan benar!
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 !

Kunci jawaban :
1. Atribut untuk menggabungkan baris adalah rowspan
2. Atribut untuk menggabungkan kolom adalah colspan
3. Tag untuk menggabugkan 3 baris adalah <td rowspan=”3”>
4. Tag untuk menggabungkan 3 kolom adalah <td colspan=”3”>

Pedoman Penilaian Tes Tulis Uraian (Pengetahuan)
1. Soal nomor 1 dijawab benar skor maksimal 25
2. Soal nomor 2 dijawab benar skor maksimal 25
3. Soal nomor 3 dijawab benar skor maksimal 25
4. Soal nomor 4 dijawab benar skor maksimal 25

Instrumen Praktik
Soal Praktik:
Buatlah tabel dengan spanning berikut menggunakan html!



3) PERTEMUAN 3
Instrumen Tes Tulis (uraian)
Jawablah pertanyaan di bawah ini dengan jelas dan benar!
1. Apa keuntungan teknik tabel di dalam tabel?
2. Jelaskan cara membuat tabel di dalam tabel?

Kunci Jawaban:
1. Keuntungan tabel di dalam tabel (tabel bersarang) adalah menghasilkan layout
tabel yang kompleks tanpa membuat kode perintah tabel yang sangat
kompleks
2. Untuk membuat tabel di dalam tabel adalah dengan membuat/menuliskan
perintah table di dalam sebuah sel (<td></td>)





Pedoman Penilaian Tes Tulis Uraian (Pengetahuan)
1. Soal nomor 1 dijawab benar skor maksimal 50
2. Soal nomor 2 dijawab benar skor maksimal 50

Instrumen Praktik
Buatlah sebuah contoh layout tabel bersarang berikut!


4) PERTEMUAN 4
Instrumen Tes Tulis (uraian)
Jawablah pertanyaan di bawah ini dengan jelas dan benar!
1. Jelaskan tentang bagian dari anatomi sebuah halaman web!

Kunci Jawaban:
1. Anatomi halaman web:
a. Containing Block.
Containing block merupakan bagian dari halaman web yang membungkus
semua komponen halaman web.
b. Logo.
Identitas perusahaan, organisasi, pemilik situs.
c. Navigation.
Navigasi atau menu merupakan bagian penting dari situs yang
memudahkan pengunjung berpindah-pindah halaman.
d. Content.
Content atau isi adalah segalanya, karena disinilah sebagian besar
informasi disajikan.
e. Footer.
Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs
(copyright) dan beberapa link.
f. Whitespace.
Whitespace merupakan area kosong yang membatasi antar-komponen.
Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti
di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan
banner atau animasi.

Pedoman Penskoran Tes Tulis Uraian (Pengetahuan)
1. Soal Uraian nomor 1 dijawab benar skor maksimal 100

Instrumen Praktik
Buatlah layout web dengan tabel berikut dengan html!

Instrumen Penilaian Praktik
Berilah tanda cek pada kolom pilihan berikut dengan :

No. Nama Siswa
Tanggung Jawab Integritas Objektivitas Kemahiran
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1
2

Pedoman Penskoran (Keterampilan)
NO. ASPEK ETIKA PROFESI KRITERIA PENILAIAN SKOR
1. Tanggung jawab Kurang bertanggung jawab
Cukup bertanggung jawab
Bertanggung jawab
Sangat bertanggung jawab
1
2
3
4
2. Integritas Kurang berintegritas
Cukup berintegritas
Berintegritas
Sangat berintegritas
1
2
3
4
3. Objektivitas Kurang objektif
Cukup objektif
Objektif
Sangat objektif
1
2
3
4
4. Kemahiran Kurang mahir
Cukup mahir
Mahir
Sangat mahir
1
2
3
4

Kulonprogo, 12 September 2014
Mengetahui
Kepala Sekolah GuruMapel



Dra. Kasminah Yudwi Antoro Wibowo
NIP.19550110 198403 2 001
LAMPIRAN
A. RINGKASAN MATERI PERTEMUAN KE-1
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan
kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag <Table>.
Elemen table berisi property <tr> untuk menentukan baris (table row) yang di dalamnya terdapat
properti <td> untuk menampilkan data pada setiap sel table(table data).
Struktur elemen table adalah sebagai berikut:
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
</table>
Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag <th> ….. </th>
Tag Utama untuk tabel adalah
Tag Fungsi
<table> ….. </table> Mendifinisikan Tabel
<tr> … </tr> Mendifinisikan table row atau baris
<td> … </td> Data pada tabel/sel
<th> … </th> Mendifinisikan table heading atau
judul tiap kolom
Atribut Elemen Table
Width = panjang(lebar table, pixel atau persen)
Height = panjang(tinggi table, pixel atau persen)
Border = pixel(tebal garis tepi)
Cellspacing = pixel(spasi antar sel)
Cellpadding = pixel(spasi di dalam sel)
Align = [left|center|right](perataan table)
Bgcolor = warna(warna latar belakang table)
Atribut Table Row
Align = [left|center|right](perataan sebaris sel secara horizontal)
Valign = [top|middle|bottom](perataaan sebaris sel secara vertical)
Bgcolor = warna(warna latar belakang baris)
Atribut Tabel Data
Align = [left|center|right](perataan horizontal)
Width = [top|middle|bottom](perataan vertical)
Height = pixel(tinggi sel, pixel atau persen)
Bgcolor = warna(warna latar belakang sel)

B. RINGKASAN MATERI PERTEMUAN KE-2
Tabel dengan Spanning
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>
Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah :
<th colspan=4> …….</th>
Jadi untuk menggabungkan baris ataupun kolom pada tabel, digunakan atribut :
Rowspan : untuk baris
Colspan : untuk kolom

C. RINGKASAN MATERI PERTEMUAN KE-3
Tabel Bersarang (Tabel di Dalam tabel)

Dapat kita lihat bahwa di kolom “Email account note” ada table berisi tentang catatan jenis email. Jadi
ada tabel di dalam tabel atau istilahnya “nested table” atau tabel bersarang.
Dalam penulisan HTML “tabel bersarang” ini adalah dengan menuliskan HTML Tabel di dalam
sebuah sel dari tabel, letaknya adalah pada <td>….</td>, seperti berikut ini
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>

<table>
<tr>
<td>cell tabel ke 2</td>
<td>cell tabel ke 2</td>
</tr>
</table>

</td>
</tr>
</table>

Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa
membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang kompleks, maka
cara sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>).

D. RINGKASAN MATERI PERTEMUAN KE-4
Layout Web dengan Tabel
Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo,
navigation, content, white space dapat digambarkan sebagai berikut

1. Containing Block.
Containing block merupakan bagian dari halaman web yang membungkus semua komponen
halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.
2. Logo.
Identitas perusahaan, organisasi, pemilik situs.
3. Navigation.
Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung
berpindah-pindah halaman.
4. Content.
Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.
5. Footer.
Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan
beberapa link.
6. Whitespace.
Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi
penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain.
Whitespace dapat juga diisi dengan banner atau animasi.
Gambar brikut ini adalah contoh sebuah tabel yang digunakan sebagai layout format tampilan
halaman web.

Dengan menggunakan html, maka dapat dibuat layout web seperti berikut: