Selvana Arma Putra - Tugas Pemrogragaman Web3

Nama : Selvana Arma Putra
Nim : 20180801058
Soal tugas online 3
I.
1. Jelaskan pengertian dan tujuan dari tabel dalam HTML ?
2. Sebutkan dan jelaskan tag – tag yang digunakan dalam membuat tabel pada HTML ?
3. Buatlah tabel dengan menggunakan tag – tag jawaban no 2? Tabel karya sendiri !
4. Apa yang fungsi dari perintah rowspan, colspan, cellspacing dan cellpadding ?
5. Buatlah tabel dengan memanfaatkan perintah – perintah pada soal no 4? Karya sendiri!
II. Buatlah table katalog yang isi/data tabelnya sesuai tema atau judul home page tugas
kelompok anda ? [kerjakan berkelompok utk tugas kelompok anda]
Jawaban I
1. Pengertian tabel adalah : daftar yang berisi susunan informasi atau data yang ditampilkan
dalam bentuk baris dan kolom. Secara umum suatu tabel terdiri atas beberapa elemen
antara lain : baris,kolom,sel dan garis.
Tujuan nya adalah : untuk menyajikan infotmasi data secara ringkas dalam bentuk daftar,
sehingga akan lebih mudah untuk dibaca.
2. Tag – tag yang digunakan dalam membuat tabel pada HTML:
a. Tag <table> untuk membungkus tabelnya
b. Tag <thead> untuk membungkus bagian kepala table
c. Tag <tbody> untuk membungkus bagian body dari table
d. Tag <tr> (tabel row) untuk membuat baris
e. Tag <td> (table data) untuk membuat sel
f. Tag <th> (table head) untuk membuat judul pada header
3. <!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>No.</th>
<th>Nama</th>
<th>Kota</th>
</tr>
<tr>
<td>1</td>
<td>Udin</td>
<td>Jakarta</td>
</tr>
<tr><br> <td>2</td>
<td>Samsul</td>
<td>Tangerang</td>
</tr>
</table>
</body>
</html>
4. Rowspan untuk menggabungkan beberapa sel tabel menjadi 1 secara vertikal.
Colspan untuk menggabungkan beberapa sel tabel menjadi 1 secara horizontal.
Cellspacing untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.
Cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text
tabel itu sendiri.
5. Rowspan
<!DOCTYPE html>
No Nama Kota
<html> 1 Udin Jakarta
<head> 2 Samsul Tanggerang
</head>
<body>
<table border="1">
<tr>
<table>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Kota</th>
</tr>
<tr>
<td>1</td>
<td>Udin</td>
<td rowspan="2">Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Samsul</td>
</tr>
</table>
Colspan
<!DOCTYPE html>
No Nama Kota
<html> 1 Udin Jakarta
<head> 2 Samsul Tanggerang
</head>
<body>
<table>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Kota</th>
</tr>
<tr>
<td>1</td>
<td>Udin</td>
<td rowspan="2">Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Samsul</td>
</tr>
</table>
Cellspacing
<!DOCTYPE html>
<html>
<head>
<title> Cellspacing di HTML</title>
</head>
<body>
<table border="2" cellspacing="5">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>
Cellpadding
<!DOCTYPE html>
<html>
<head>
<title> Cellpadding di HTML</title>
</head>
<body>
<table border="2" cellpadding="5">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html
Jawaban II
<html>
<head>
<title>Katalog Buku</title>
</head>
<body>
<center>
<table width="619" border="1" bgcolor="#FFD966">
<tr>
<td width="609">
<center>
<font face="calibri"><h1>
TOKO BUKU<marquee><font face="Viner Hand ITC" color="blue">"MILIK
KITA"</font></MARQUEE></H1></font>
<table width="539" border="0" bgcolor="" >
<tr>
<td width="115" bgcolor="white"><center>
<img src="Adobe_ilustrator_2009.jpg" width="100" height="150"></center>
</td>
<td width="500" valign="top" bgcolor="white">
<table border="0" >
<tr>
<td colspan="3" valign="top"><font color="blue" ><b>Membuat Desain
Profesional Dengan Adobe Illustrator</b></font></td>
</tr>
<tr>
<td valign="top">Penerbit</td>
<td colspan="2" valign="top">: INFORMATIKA </td>
</tr>
<tr>
<td width="92" valign="top">Penulis</td>
<td width="7" valign="top">: </td>
<td width="306" valign="top">Edi Suhendi, ST.<br />
Ginanjar Rizki Perdana</td>
</tr>
<tr>
<td valign="top">Tahun Terbit</td>
<td colspan="2" valign="top">: 2009</td>
</tr>
<tr>
<td valign="top">Tebal Buku</td>
<td colspan="2" valign="top">: 376 Halaman</td>
</tr>
<tr>
<td valign="top">Kategori</td>
<td colspan="2" valign="top">: Desain Grafis / CorelDraw</td>
</tr>
<tr>
<td valign="top">Berat Buku</td>
<td colspan="2" valign="top">: 0.39 Kg</td>
</tr>
<tr>
<td valign="top">Harga </td>
<td colspan="2">: <del>Rp 60.000</del><b>Rp. 48,000</b></td>
</tr>
<tr>
<td colspan="3" valign="top"><a href="http://kurir-
informasi2.blogspot.com/2014/03/membuat-desain-profesional-dengan-adobe.html"
target="_blank"><center>
<font face="blue">Keterangan</font></center>
</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" bgcolor=""></td>
</tr>
<tr>
<td colspan="2" valign="top"bgcolor=""></td>
</tr>
<tr>
<td bgcolor="white"><center>
<img src="autodesk_inventor_2008.jpg" width="100" height="150" ></center>
</td>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="white">
<tr>
<td colspan="3" valign="top" bgcolor="white"><font color="blue"
><b>Pemodelan CAD 3D Menggunakan Autodesk Inventor + CD</b></font></td>
</tr>
<tr>
<td colspan="2" valign="top">: INFORMATIKA</td>
</tr>
<tr>
<td width="306" valign="top">Firman Tuakia, ST</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" valign="top">: Desain Grafis / Pemrograman CAD</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
informasi2.blogspot.com/2014/03/pemodelan-cad-3d-menggunakan-autodesk.html"
</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" bgcolor=""></td>
</tr>
<tr>
<img src="linux_fedora_revisi_2008.jpg" width="100" height="150"></center>
</td>
<td valign="top"><table border="0" bgcolor="white">
<tr>
<td colspan="3" valign="top"><font color="blue" ><b>Mudah Membangun
Server Dengan Fedora + 3DVD (Edisi Revisi)</b></font></td>
</tr>
<tr>
</tr>
<tr>
<td width="306" valign="top">Iwan Sofana</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" valign="top">: Sistem Operasi / Linux</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
informasi2.blogspot.com/2014/03/mudah-membangun-server-dengan-fedora.html"
</a></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="">
<td colspan="2"></td>
</tr>
<tr>
<img src="merakit_komputer_2009.jpg" width="100" height="150"></center>
</td>
<td valign="top">
<table border="0" bgcolor="white">
<tr>
<td colspan="3" valign="top"><font color="blue" ><b>BELAJAR MERAKIT
KOMPUTER REVISI KETIGA</b></font></td>
</tr>
<tr>
</tr>
<tr>
<td width="306" valign="top">Atang Gumawang</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" valign="top">: Uncategories / Komputer</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
informasi2.blogspot.com/2014/03/belajar-merakit-komputer-revisi-ketiga.html"
</a></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="">
</tr>
<tr>
<img src="new_j2me_2008.jpg" width="100" height="150"></center>
</td>
<td valign="top">
<tr>
<td colspan="3" valign="top"><font color="blue" ><b>Pemrograman J2ME
(Belajar Cepat Pemrograman Perangkat Telekomunikasi Mobile</b></font></td>
</tr>
<tr>
</tr>
<tr>
<td width="306" valign="top">M. Shalahuddin<br />
Rosa A.S</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" valign="top">: Pemrograman / Java Programing</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
informasi2.blogspot.com/2014/03/pemrograman-j2me-belajar-cepat.html"
</a></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="">
</tr>
<tr>
<img src="new_jaringan_komputer_2008.jpg" width="100" height="150"></center>
</td>
<td valign="top">
<table border="0" bgcolor="white" >
<tr>
<td colspan="3" valign="top"><font color="blue" ><b>Instalasi dan Konfigurasi
Jaringan Komputer (edisi revisi)</b></font></td>
</tr>
<tr>
</tr>
<tr>
<td width="306" valign="top">Dede Sopandi</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" valign="top">: Jaringan Komputer / TPC/IP</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
informasi2.blogspot.com/2014/03/instalasi-dan-konfigurasi-jaringan.html"
</a></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="">
</tr>
<tr>
<img src="new_sun_solaris_2_2008.jpg" width="100" height="150"></center>
</td>
<td valign="top">
<tr>
<td colspan="3" valign="top"><font color="blue" ><b>SOLARIS OPERATING
SYSTEM</b></font></td>
</tr>
<tr>
</tr>
<tr>
<td width="306" valign="top">Kalamullah Ramli<br />
Masruri</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" valign="top">: Sistem Operasi / Solaris</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2">: Rp 45.000<b>Rp 36,000</b></td>
</tr>
<tr>
informasi2.blogspot.com/2014/03/solaris-operating-system.html"
</a></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="">
</tr>
<tr>
<img src="office_2007.jpg" width="100" height="150"></center>
</td>
<td valign="top">
<table border="0" bgcolor="white" >
<tr>
<td colspan="3" valign="top"><font color="blue" ><b>Be Smart, Be
Professional With Microsoft Office 2007</b></font></td>
</tr>
<tr>
</tr>
<tr>
<td width="306" valign="top">Cato Chandra<br />
Teddy Marcus Zakaria</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" valign="top">: Office Aplication / Windows</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2">: <del>Rp 45.000</del><b>Rp 36,000</b></td>
</tr>
<tr>
informasi2.blogspot.com/2014/03/be-smart-be-professional-with-microsoft.html"
</a></td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<img src="open_office_x3_2009.jpg" width="100" height="150"></center>
</td>
<td>
<tr>
<td colspan="3" valign="top"><font color="blue" ><b>Panduan Lengkap
Menguasai </b><b>Open Office</b><b> 3.x</b></font></td>
</tr>
<tr>
</tr>
<tr>
<td width="306" valign="top">Ana Heryana</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" valign="top">: Office Aplication / Linux</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
informasi2.blogspot.com/2014/03/panduan-lengkap-menguasai-open-office-3x.html"
target="_blank"><font face="blue"><center>
Keterangan</center>
</font></a></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="">
</tr>
<tr>
<img src="vbdotnet2009.jpg" width="100" height="150"></center>
</td>
<td valign="top">
<tr>
<td colspan="3" valign="top"><font color="blue" ><b>Pemrograman Aplikasi
Database dengan Microsoft Visual Basic.Net 2008</b></font></td>
</tr>
<tr>
<td colspan="2" valign="top">:INFORMATIKA </td>
</tr>
<tr>
<td width="306" valign="top">I Ketut Darmayuda</a></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" valign="top">: Pemrograman / Visual Basic Programing</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
informasi2.blogspot.com/2014/03/pemrograman-aplikasi-database-dengan.html"
<font face="blue">Keterangan</center>
</font></a></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<blockquote>
<u><font color="blue" ><b>Alamat Cabang Toko Buku "MILIK
KITA"</b></font></u>
</blockquote>
<blockquote>
<ul>
<li><font color="blue" ><b>Jakarta :</b></font> Jl. Pluit Raya No.11, Jakarta, Telp.
(021) 899 86879</li>
<li><font color="blue" ><b>Bandung :</b></font> Jl. Warung Jati No.91, Jakarta, Telp.
(021) 819 84579</li>
<li><font color="blue" ><b>Semarang :</b></font> Jl. Raden Kartini No.19, Jakarta,
Telp. (021) 849 83479</li>
<li><font color="blue" ><b>Surabaya :</b></font> Jl. Jend. Suparman No.81, Jakarta,
Telp. (021) 899 86379</li>
<li><font color="blue" ><b>Jakarta :</b></font> Jl. Pluit Raya No.11, Jakarta, Telp.
(021) 899 86879</li>
</ul>
</blockquote>
</td>
</tr>
</table>
</center>
</body>
</html>

Selvana Arma Putra - Tugas Pemrogragaman Web3

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Selvana Arma Putra - Tugas Pemrogragaman Web3

Diunggah oleh

Hak Cipta:

Format Tersedia

Nama : Selvana Arma Putra

Anda mungkin juga menyukai