Wednesday, 2018 May 23, 6:24 AM
Leonard@Zone MainRegistrationLogin
Welcome Guest | RSS
Section categories
Hack software PC [2]
Tutorial Hacking program
IRC , Script & Bot [5]
Tutorial IRC Chat , Script n Pembuatan Bot
Web & Blogger [12]
Tutorial seputar web dan blog
Belajar HTML [8]
Cara Mudah Belajar bahasa HTML
Tag Board
Our poll
Gimana WebQ ?
Total of answers: 35
Statistics

Total online: 1
Guests: 1
Users: 0
Login form
 Publisher 
Main » Articles » Belajar HTML

Membuat Tabel HTML
: 4-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 align dengan 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.


Latihan 1:
Buat tabel untuk teks di bawah ini:

     Tabel 1.1

No.   Nama
1.      Rina Hastuti
2.      Ali Amran
3.      Rahmat
                           

Nama file: latihan4_1.html

<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>Rina Hastuti</td>
</tr>
<tr>
   
<td>2.</td>
    <td>Ali Amran</td>
   
</tr>
<tr>
   
<td>3.</td>
    <td>Rahmat</td>
   
</tr>
</table>
</body>
</html>


Tugas tambahan:
1. Ganti ukuran cellpadding, cellspacing, border dengan lainnya.
2. Berikan nilai width dan height pada tabel hingga 100%.


Latihan 2:

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

Nama file: latihan4_2.html

<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>Rina Hastuti</td>
</tr>
<tr bgcolor="red">
   
<td>2.</td>
    <td>Ali Amran</td>
   
</tr>
<tr bgcolor="blue">
   
<td>3.</td>
    <td>Rahmat</td>
   
</tr>
</table>
</body>
</html>


Tugas tambahan:
Ubahlah align pada baris-2 kolom-1 dan baris-4 kolom-2 ke kanan


Latihan 3:
Buat tabel untuk teks di bawah ini:

     Tabel 1.1

    Data Siswa
No.    Nama
1.      Rina Hastuti
2.      Ali Amran
3.      Rahmat
                           

Nama file: latihan4_3.html

<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>Rina Hastuti</td>
</tr>
<tr bgcolor="red">
   
<td>2.</td>
    <td>Ali Amran</td>
   
</tr>
<tr bgcolor="blue">
   
<td>3.</td>
    <td>Rahmat</td>
   
</tr>
</table>
</body>
</html>


sumber : http://hans.polinpdg.ac.id/html/

Category: Belajar HTML | Added by: leonard (2009 May 09)
Views: 836 | Rating: 0.0/0
Total comments: 0
Name *:
Email *:
Code *:
Search
Site friends
  • Create your own site
  • Copyright MyCorp © 2018