Scribd Logo

Bahasa

Unggah

Selamat datang di Scribd!

Tabel Dengan Spanning Dan Tabel Nested

Diunggah oleh

Ja'i Ter
102 tayangan12 halaman

Hak Cipta

© © All Rights Reserved

Format Tersedia

PDF, TXT atau baca online dari Scribd

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini

Hak Cipta:

© All Rights Reserved
Unduh sebagai PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
102 tayangan12 halaman

Tabel Dengan Spanning Dan Tabel Nested

Diunggah oleh

Ja'i Ter

Hak Cipta:

© All Rights Reserved
Unduh sebagai PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
dari 12

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>


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>
</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>
<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 mangga

pisang jeruk nanas


leci

9. Kegiatan Belajar 9 : Pembuatan Tabel dalam Tabel

a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 9 ini Peserta Didik diharapkan dapat :
1). Memahami tabel di dalam tabel
2). Menyajikan tabel dalam tabel

b. Uraian Materi
1. Tabel di dalam Tabel (Tabel bersarang)
Coba perhatikan gambar tabel berikut ini :

Gambar 9.1. Tabel Online Order

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>tabel ke 2</td>
<td>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>).
Berikut ini contoh langkah-demi langkah :
 Buatlah tabel dengan 2 kolom dan 2 baris. HTML tag-nya adalah sebagai
berikut :

<table border=1>
<tr>
<td>kolom 1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr>
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
</table>
 Tentukan sel dimana kita ingin menempatkan tabel bersarang. Kita akan
menaruh di kolom 2 baris 2.
 Ganti teks dalam sel itu dengan tabel kedua. HTML akan terlihat seperti
ini
<table border=1>
<tr>
<td>kolom 1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr>
<td>kolom 1 baris 2</td>
<td>
<table border=1>
<tr>
<td>kolom 1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr>
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
</table>
</td>
</tr>
</table>
Hasilnya adalah sebagai berikut :

Trik untuk tabel bersarang adalah untuk selalu menutup tag tabel dalam sebelum
menutup sel tabel luar.

c. Rangkuman
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. Tugas
1. Buatlah dokumen HTML berikut ini :

<html
<head>
<title>Tabel Bersarang</title>
</head>

<body>
<table border=1>
<tr>
<td>
<table border=1>
<tr>
<td>kolom 1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr>
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
</table>
</td>
<td>kolom 2 baris 1</td>
</tr>
<tr>
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
</table></body>
</html>
2. Buatlah dokumen HTML berikut ini :

<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 didalamnya, 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 :

Anda mungkin juga menyukai