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

Daftar Instruksi Bahasa Assembly - Perintah Perpindahan Data

Oleh
Dalam program bahasa assembly terdapat 2 jenis yang kita tulis dalam program: 1. Assembly Directive (yaitu merupakan kode yang menjadi arahan bagi assembler/compiler untuk menata program) 2. Instruksi (yaitu kode yang harus dieksekusi oleh CPU mikrokontroler dengan melakukan operasi tertentu sesuai dengan daftar yang sudah tertanam dalam CPU) Daftar Assembly Directive Assembly Directive Keterangan EQU Pendefinisian konstanta DB Pendefinisian data dengan ukuran satuan 1 byte DW Pendefinisian data dengan ukuran satuan 1 word DBIT Pendefinisian data dengan ukuran satuan 1 bit DS Pemesanan tempat penyimpanan data di RAM ORG Inisialisasi alamat mulai program END Penanda akhir program CSEG Penanda penempatan di code segment XSEG Penanda penempatan di e...
2 komentar
lanjut baca??

Memahami Fungsi-Fungsi dalam MS Exel 2003

Oleh
UNTUK FILE PDF-NYA ADA DISINI Menggunakan Fungsi IF       Fungsi   IF  digunakan   untuk  mengisi   sel  dengan  syarat   tertentu.  Disini  hasilnya minimal ada 2 alternatif. Bentuk umumnya adalah:  =if(syarat,hasil1,hasil2)       Jika   syaratnya  terpenuhi,  yang   muncul   adalah   hasil1,  sebaliknya  kalau  tidak memenuhi syarat    akan muncul hasil2 Perhatikan Contoh berikut:  Untuk mengisi kolom keterangan berdasarkan nilai yang dimiliki siswa jika nilai lebih besar 50 (>50) maka akan Lulus dan jika kurang dari 50 (<50) maka Gagal. Pada kolom keterangan dituliskan rumus: =if(c2>50;”Lulus”;”Gagal) Latihan Kerjakan soal dibawah ini: Upah Lembur = jam lembur * 1500 Tunjangan   = 10% * gaji pokok Gaji Bersih = Gaji Pokok + Upah Lembu...
Posting Komentar
lanjut baca??

HTML FORMAT TEKS

Oleh
OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pemformatan teks. MATERI: Element BR(line break), Element P(paragraph), Element H1,H2,H3,H4,H5,H6(header), Element B(bold), Element I(italic), Element U(underline), Element PRE(preformated text), Element CENTER, Element BASEFONT, Element FONT, Element HR(horizontal rule) ELEMENT BR (Line Break) Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup. Sintaks: <br> ELEMENT P (Paragraph) Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf. Element P mempunyai attribute yaitu align yang bernilai "left" , "center" , "right" yang menspesifikasikan posisi tepi horizontal dar...
Posting Komentar
lanjut baca??