Scribd Logo

Bahasa

Unggah

Selamat datang di Scribd!

Modul Format Tabel

Diunggah oleh

Gress Prettycia
17 tayangan5 halaman
Modul Format Tabel X Multimedia

Hak Cipta

© © All Rights Reserved

Format Tersedia

DOCX, PDF, TXT atau baca online dari Scribd

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini
Modul Format Tabel X Multimedia

Hak Cipta:

© All Rights Reserved
Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
17 tayangan5 halaman

Modul Format Tabel

Diunggah oleh

Gress Prettycia
Modul Format Tabel X Multimedia

Hak Cipta:

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

Modul Ajar Pemrograman Web Kelas X

FORMAT TABEL
PEMBUATAN TABEL DALAM TABEL
A. Teori Pembuatan Tabel di dalam Tabel
Perhatikan gambar tabel berikut ini:

Gambar di atas menunjukkan bahwa pada kolom Email account note


terdapat tabel yang berisi tentang catatan jenis email. Jadi, terdapat
tabel di dalam tabel atau bisa disebut dengan nested tabel atau
tabel bersarang
Penulisan HTML untuk tabel bersarang adalah dengan menuliskan
tag HTML tabel di dalam sebuah sel dari tabel yang sudah dibuat
sebelumnya, letaknya adalah pada tag <td>....</td>, seperti contoh
berikut ini:
<html>
<head>
<title>Tabel Bersarang</title>
</head>
<body>
<caption>Tabel Bersarang</caption>
<table border="1">
<tr>
<td>data baris 1 kolom 1</td>
<td>
<table border="1">
<tr>
<td> tabel ke 2</td>
<td> tabel ke 2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Page 1 of 5

Modul Ajar Pemrograman Web Kelas X


Teknik dari tabel bersarang adalah salah satu cara untuk menghasilkan
layout tabel yang kompleks tanpa membuat tabel yang cukup rumit.
Sehingga, ketika harus membuat tabel yang kompleks, cara
sederhananya adalah membuat tabel di dalam sebuah sel (di dalam
tag <td>...</td>)
Langkah-langkah membuat tabel bersarang:
1. Buat tabel yang memiliki 2 kolom dan 2 baris.
Ketikkan script HTML berikut ini:
<html>
<head>
<title>Tabel Bersarang</title>
</head>
<body>
<caption>Tabel Bersarang</caption>
<table border="1">
<tr>
<td>data kolom 1 baris 1</td>
<td>data kolom 2 baris 1</td>
</tr>
<tr>
<td>data kolom 1 baris 2</td>
<td>data kolom 2 baris 2</td>
</tr>
</table>
</body>
</html>

2. Tentukan sel dimana kita ingin menempatkan tabel bersarang.


Misalkan kita akan meletakkan di kolom 2 baris 2
3. Ganti isi data dalam sel tersebut dengan script untuk tabel kedua.
Ubah script sebelumnya seperti di bawah ini:

Page 2 of 5

Modul Ajar Pemrograman Web Kelas X


<html>
<head>
<title>Tabel Bersarang</title>
</head>
<body>
<caption>Tabel Bersarang</caption>
<table border="1">
<tr>
<td>data kolom 1 baris 1</td>
<td>
<table border="1">
<tr>
<td>data kolom 1 baris 1</td>
<td>data kolom 2 baris 1</td>
</tr>
<tr>
<td>data kolom 1 baris 2</td>
<td>data kolom 2 baris 2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Hasilnya akan tampak seperti berikut:

Yang harus diingat! Jangan lupa untuk menutup tag tabel


bersarang sebelum menutup sel tabel utama.
B. Rangkuman
Teknik tabel bersarang adalah salah satu cara untuk menghasilkan
layout tabel yang kompleks tanpa membuat tabel yang rumit.
Sehingga, ketika harus membuat tabel yang kompleks, cara
sederhananya adalah membuat tabel di dalam sebuah sel
(<td>...</td>)
C. Tugas
1. Buatlah dokumen HTML berikut ini!

Page 3 of 5

Modul Ajar Pemrograman Web Kelas X


<html>
<head>
<title>Tabel Bersarang</title>
</head>
<body>
<table border="1">
<tr>
<td>
<table border="1">
<tr>
<td>kolom 1 baris
<td>kolom 2 baris
</tr>
<tr>
<td>kolom 1 baris
<td>kolom 2 baris
</tr>
</table>
</td>
</tr>
<tr>

1</td>
1</td>
2</td>
2</td>

<td>kolom 2 baris 1</td>


<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>

</tr>
</table>
</body>
</html>

a. Bagaimanakah tampilan halaman HTMLnya?


Gambarkan tampilan tabelnya!
b. Jelaskan dimana letak tabel bersarang dari halaman HTML
tersebut!

2. Buatlah dokumen HTML berikut ini!

Page 4 of 5

Modul Ajar Pemrograman Web Kelas X


<html>
<head>
<title>Tugas Tabel Bersarang 2</title>
</head>
<body>
<table border="3" cellpadding="10" cellspacing="10">
<td>sel berikutnya 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>

a. Bagaimanakah tampilan halaman HTMLnya?


Gambarkan tampilan tabelnya!
b. Jelaskan tampilan halaman HTML tersebut!
c. Jelaskan maksud dari tag:
<table border="3" cellpadding="10" cellspacing="10">
d. Apakah perbedaan tampilan tabel pada tugas 1 dan tugas 2?
Jelaskan!
3. Buatlah dokumen HTML dari tampilan tabel berikut ini!

Ketentuan tugas no 3!
1) Masukkan script HTML beserta screenshot halaman HTML di
microsoft word.
2) Kirimkan ke grup edmodo Pemrograman Web X pada menu
assignment Tugas Praktikum 3. Jangan lupa tuliskan identitas
dengan jelas

Page 5 of 5

Anda mungkin juga menyukai