Langsung ke konten utama

HTML TABEL

Oleh

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>

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS KE-3 PRAKTEK ALGO I

Oleh
INILAH TUGAS KALIAN: Buatlah program untuk menampilkan menu berikut ini kemudian mengerjakan menu yang dipilih: MENU  1. Menghitung Luas Segitiga  2. Menghitung Volume Kubus  3. Menghitung Luas Lingkaran  4. Menghitung Volume Balok  5. MenghitungVolume Tabung  6. Keluar   (Pilihan 6 menyebabkan keluar dari program) KETERANGAN: tugas ini dikumpulkan dalam bentuk hardcopy (print) dan dikumpulkan selambat-lambatnya saat pertemuan praktek berikutnya. jangan lupa mencantumkan :  nama, npm, praktek, shift dan tugas keberapa FIKOM SENANTIASA METAL!
Posting Komentar
lanjut baca??

Operating system listing

Oleh
Ni satu lagi listing SO yg mgkn d butuhkan!!   Below is a listing of many of the different operating systems available today, the dates they were released, the  platforms  they have been developed for and who developed them. Operating system Date first released Platform Developer AIX / AIXL Unix / Linux history can be found  here  . Various IBM AmigaOS Currently no AmigaOS operating system history. Amiga Commodore BSD Unix / Linux history can be found  here  . Various BSD Caldera Linux Unix / Linux history can be found  here  . Various SCO Corel Linux Unix / Linux history can be found  here  . Various Corel Debian Linux Unix / Linux history can be found  here  . Various GNU DUnix Unix / Linux history can be found  here  . Various Digital DYNIX/ptx Unix / Linux history can be found  here  . Various IBM HP-UX Unix / Linux history can be found  here  . Various Hewlett Packard IRIX Unix / Linux history can be found  here  . Various SGI Kondara Linux Unix / Linux history can be found  here ...
Posting Komentar
lanjut baca??

Chord Armada Mau Dibawa Kemana

Oleh
intro A A Semuanya telah kuberi A dengan kesungguhan hati D             A Untukmu hanya untukmu A Tak perlu kau tanya lagi A siapa pemilik hati ini D             A E Kau tahu pasti dirimu Bm tolong lihat aku Dm        E dan jawab pertanyaanku [chorus] D         Dm          A Mau dibawa kemana hubungan kita Bm jika kau terus menunda-nunda dan Dm              E dan tak pernah nyatakan cinta D        Dm          A Mau dibawa kemana hubungan kita Bm Ku tak akan terus jalani Dm           E tanpa ada ikatan pasti antara kau dan aku [intro] A Bm D A Tak perlu kau tanya lagi A siapa pemilik hati ini D             A E Kau tahu pasti dirimu Bm tolong lihat aku Dm        E dan jawab pertanyaanku [chorus] D         Dm          A Mau dibawa kemana hubungan kita Bm jika kau terus menunda-nunda dan Dm              E dan tak pernah nyatakan cinta D        Dm          A Mau dibawa kemana hubungan kita Bm Ku tak akan terus jalani Dm           E tanpa ada ikatan pasti antara kau dan aku [interlude] D A/C...
Posting Komentar
lanjut baca??