MODUL
2
HTML
DAN PEMBUATAN TABEL
A. Tujuan
Praktikum
1.
Praktikan memahami konsep dasar
pembuatan table dengan HTML
2.
Praktikan memahami atribut-atribut dasar
dalam table HTML
3.
Praktikan mampu membuat dan mengatur
table sesuai dengan ketentuan-ketentuan yang telah ditetapkan.
B. Dasar
Teori
1. Membuat Tabel
Table merupakan cara
untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom.
Untuk menampilkan data dlam bentuk table pada HTML, digunakan tag <table>. Elemen tabel berisi
property <tr> untuk menentukan
baris <table row> yang didalamnya terdapat property <td> untuk menampilkan data pada setiap sel tabel (table
data).
Struktur
elemen tabel adalah sebagai berikut :
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baris 1 kolom 2</td>
</tr>
</table>
2. Atribut Elemen Tabel
width = panjang (lebar tabel,
pixel atau persen)
height = panjang (tinggi tabel,
pixel atau persen)
border = pixel (tebal garis tepi)
cellspacing = pixel (spasi antar sel)
cellpadding = pixel (spasi didalam sel)
align = left, center, right
(perataan sel)
bgcolor
= warna (warna latar
belakang)
3. Atribut Tabel Row
align = left, center, right (perataan
sebaris sel secara horisontal)
valign = top, middle, bottom (perataan sebaris
sel secara vertical)
bgcolor = warna (warna latar belakang)
4. Atribut Tabel Data
rowspan = angka (baris yang dispan oleh sel)
colspan = angka (kolom yang sispan oleh sel)
align = left, center, right (perataan
sebaris sel secara horisontal)
valign = top, middle, bottom (perataan sebaris
sel secara vertical)
width = pixel (lebar sel, pixel atau persen)
height = pixel (tinggi sel, pixel atau persen)
bgcolor = warna (warna latar belakang)
LATIHAN
Latihan 01 : tabel.html
Syntax Program
<html>
<head>
<title>tabel_137006002</title>
</head>
<body>
berikut contoh tabel dengan
rowspan dan colspan
<table width=80% border=2
cellspacing 0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris i kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2
kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3
kolom 1</td>
<td>baris 3 kolom
2</td>
</tr>
<tr>
<td>baris 4 kolom
2</td>
</tr>
</table>
<p align=center>M Gilbran Eka Pawitra<br> 137006002<br></p>
</body>
</html>
|
Tampilan Program
Analisis
Program
:
2. Latihan 02 : tabel2.html
Script Program
<html>
<head>
<title>Penggunaan
ALIGN</title>
</head>
<body>
<table border =
"1">
<caption>Daftar
Wiraniaga</caption>
<tr>
<th
colspan = "2" rowspan = "2">WIRANIAGA</th>
<th
colspan = "3">KOTA</th>
</tr>
<tr>
<th>Ciamis</th>
<th>Tasik</th><th>Banjar</th>
</tr>
<tr>
<th
rowspan = "2">Jenis Kelamin</th>
<th>Pria</th>
<td
align= "right">30</td>
<td
align= "right">20</td>
<td
align= "right">30</td>
</tr>
<tr>
<th>Wanita</th>
<td
align= "right">20</td>
<td
align= "right">8</td>
<td
align= "right">18</td>
</tr>
</table>
</body>
</html>
|
Tampilan Program
Analisis
Program
:
3.
Latihan
03 : tabel 3.html
Script
Program
<html>
<head>
<title>Latihan_137006002</title>
</head>
<body>
<table border = "1">
<tr>
<th width
="150" height ="50"<center>Nama</th>
<th width
="150" height ="50"<center>Usia</th>
</tr>
<tr>
<td>Gilbran</td>
<td>20</td>
</tr>
<tr>
<td>Pawitra</td>
<td>21</td>
</tr>
</table>
<br>
<br>
<table border = "1">
<tr>
<th width
="150" height ="70"<center>Nama</th>
<th width
="150" height ="70"<center>Usia</th>
</tr>
<tr>
<td width
="150" height ="70">Gilbran</td>
<td width
="150" height ="70">20</td>
</tr>
<tr>
<td width
="150" height ="70">Pawitra</td>
<td width
="150" height ="70">21</td>
</tr>
</table>
</body>
</html>
|
Tampilan Program
Analisis Program:
No comments:
Post a Comment
Tata cara komentar di blog ini :
1. Menggunakan bahasa yang baik dan benar
2. Pikirkan terlebih dahulu apa yang ingin di pertanyakan
3. Boleh saling memberikan informasi yang akurat dan jelas
4. Anda sopan, kami segan