Google Translate
Arabic Korean Japanese Chinese Simplified Russian Portuguese English French German Spain Italian Dutch

Kamis, 11 Oktober 2012

Belajar html 3-HTML TABLE ::


salam silaturahmi
  • 3-HTML TABEL ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan tabel.

MATERI:
Element TABLE, Element CAPTION, Element TH(table header), Element TR(table
row), Element TD(table data)


  • ELEMENT TABLE

Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas
kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border,
cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak antara sel),
width(lebar tabel), height(tinggi tabel). Element TABLE berisikan element CAPTION,
TH, TR dan TD.

Sintaks:
<table 
align="left"|"center"|"right" 
bgcolor="color" 
border="pixel" 
cellpadding="pixel" 
cellspacing="pixel" 
width="pixel"|"%" 
height="pixel"|"%" > 
........................ 
</table>


  • ELEMENT CAPTION 
Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada
di dalam element TABLE dan mempunyai attribute aligndengan nilai top(judul terletak
di atas tabel), dan bottom(judul terletak di bawah tabel).
Sintaks:
<caption align="top"|"bottom"> 
.......................... 
</caption>

  • ELEMENT TR (Table Row)
Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam
element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat
pada element ini adalah align, valign(posisi vertikal), dan bgcolor.
Sintaks:
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color">
..........................
</tr>


  • ELEMENT TH (Table Header) dan TD (Table Data)
Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai
header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel.
Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini
adalah align, valign, bgcolor, colspan, rowspan
Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</th>
<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>



  • LATIHAN

Gunakan teks editor misalkan "Notepad"untuk menyunting dan
menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut
dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul
ini dengan mengklik menu Editor.
cara menyimpan notepad
"judul.htm"

  • Latihan 1:
contoh tabel untuk teks dg backgroud
Tabel 1.1
No. Nama
1. joe ilyasa
2. kendal
3. semarang



<html>
<head>
<title>Latihan4-1</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5"
cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>joe ilyasa</td>
</tr>
<tr>
<td>2.</td>
<td>kendal</td>
</tr>
<tr>
<td>3.</td>
<td>semarang</td>
</tr>
</table>
</body>
</html>



  • Latihan 2:

Dari Latihan 1 gantilah warna background baris tabel menjadi baris-1=green baris-2=yellow baris-3=red baris-4=blue
contoh::

Tabel 1.1
No. Nama
1. joe ilyasa
2. kendal
3. semarang
<html>
<head>
<title>Latihan4-2</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5"
cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>joe ilyasa</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>kendal</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>semarang</td>
</tr>
</table>
</body>
</html>


  • Latihan 3:

contoh tabel untuk teks di bawah ini:

Tabel 1.1
Data Siswa
No. Nama
1. joe ilyasa
2. kendal
3. semarang
<html>
<head>
<title>Latihan4-3</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5"
cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Siswa</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>joe ilyasa</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>kendal</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>semarang</td>
</tr>
</table>
</body>
</html>

sekian belajar html table saat ini,,
bersambung di Belajar 4 HTML IMAGE (GAMBAR) :: 
salam silaturahmi

1 komentar: