gambar top

Saya mendengar lalu saya lupa  ,  Saya membaca lalu saya ingat  ,  Saya melakukan lalu saya mengerti

Pelajaran 06 : Tabel

Untuk membuat tabel menggunakan tag <TABLE> dan dengan attribut sebagai berikut.

tagnilaiketerangan
<table> memulai tabel
<tr> membuat baris
<th> membuat kolom header
<td> membuat kolom
border0 sampai 15menampilkan garis dan ketebalannya
alignleft , center , rightmengatur isi kolom secara horisontal
valigntop , middle , bottommengatur isi kolom secara vertikal
rowspanangka bulatmenggabungkan (merge) baris
colspanangka bulatmenggabungkan (merge) kolom
bgcolorkode warnamewarnai tabel atau kolom
backgroundgambar (image)membuat latar belakang tabel atau kolom
cellspacingangka bulatmengatur spasi antar baris dan kolom
cellpaddingangka bulatmengatur spasi dari baris dan kolom

Ikuti penjelasannya sebagai berikut :

1. membuat tabel tanpa border

Pembuatan tabel diawali dengan tag <table> dan diakhiri tag </table>. Sedangkan untuk memulai membuat baris dimulai dengan tag <th> untuk baris atas dan selanjutnya menggunakan tag <td>

Contoh penulisannya:

<html>
<head><title>tabel</title></head>
<body>
Tabel tanpa border
<table>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Malang</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Hasilnya adalah :

2. membuat tabel dengan border

Pembuatan tabel dengan border menggunakan tag <table border=....> dan diakhiri tag </table>. Ketebalan garis border tergantung dari besarnya angga border.

Contoh penulisannya:

<html>
<head><title>tabel border</title></head>
<body>

Tabel dengan border = 1
<table border="1">
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Malang</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br><br>

Tabel dengan border = 5
<table border="5">
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Malang</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

</body>
</html>
Hasilnya adalah :

3. menggabungkan (merge) baris

Untuk menggabungkan baris dapat dengan tag <td rowspan=....>.

Contoh penulisannya:

<html>
<head><title>rowspan</title></head>
<body>
mengabungkan baris
<table border=1>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td rowspan=2>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Hasilnya adalah :

4. menggabungkan (merge) kolom

Untuk menggabungkan kolom dapat dengan tag <td colspan=....>.

Contoh penulisannya:

<html>
<head><title>colspan</title></head>
<body>
mengabungkan kolom
<table border=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Hasilnya adalah :

5. mengatur kolom secara horisontal

Untuk mengatur dalam baris menggunakan tag <tr align=....>, sedangkan untuk setiap kolom dapat menggunakan dengan tag <td align=....>.

Contoh penulisannya:

<html>
<head><title>mengatur horisontal</title></head>
<body>
center pada baris ke 4
<table border="1">
<tr><th>Nomor Induk Siswa</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana Ningrum</td><td>Jl. Jenggolo 1C</td></tr>
<tr><td>1235</td><td>Sudarmanto</td><td>J. Blimbing 12</td></tr>
<tr align=center><td>1236</td><td>Amin</td><td>Kedurus</td></tr>
</table>

<br>

center pada baris ke 4 kolom 1
<table border="1">
<tr><th>Nomor Induk Siswa</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana Ningrum</td><td>Jl. Jenggolo 1C</td></tr>
<tr><td>1235</td><td>Sudarmanto</td><td>J. Blimbing 12</td></tr>
<tr><td align=center>1236</td><td>Amin</td><td>Kedurus</td></tr>
</table>
</body>
</html>
Hasilnya adalah :

6. mengatur kolom secara vertikal

Untuk mengatur dalam baris menggunakan tag <tr valign=....>, sedangkan untuk setiap kolom dapat menggunakan dengan tag <td valign=....>.

Contoh penulisannya:

<html>
<head><title>mengatur vertikal</title></head>
<body>
menempatkan pada posisi bottom
<table border=1>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td rowspan=2 valign=bottom>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br>

menempatkan pada posisi top
<table border=1>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td rowspan=2 valign=top>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Hasilnya adalah :

7. memberi warna tabel

Untuk memberi warna tabel dapat dengan tag <table bgcolor=....>. Untuk memberi warna pada baris dapat dengan tag <tr bgcolor=....>, sedangkan untuk memberi warna sel dapat dengan tag <td bgcolor=....>.

Contoh penulisannya:

<html>
<head><title>warna</title></head>
<body>
mewarnai tabel
<table border=1 bgcolor=#CCFFFF>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>

<br>

mewarnai baris
<table border=1>
<tr><td colspan=3>data siswa</td></tr>
<tr bgcolor=#CCFFFF><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>

<br>

mewarnai sel
<table border=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td  bgcolor=#CCFFFF>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>

</body>
</html>
Hasilnya adalah :

8. mengatur spasi baris (cellspacing)

Untuk mengatur spasi beris dapat dengan tag <table cellspacing=....>.

Contoh penulisannya:

<html>
<head><title>cellspacing</title></head>
<body>
cellspacing = 1
<table border=1 cellspacing=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br>

cellspacing = 7
<table border=1 cellspacing=7>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Hasilnya adalah :

9. mengatur jarak ke garis (cellpadding)

Untuk mengatur spasi beris dapat dengan tag <table cellpadding=....>.

Contoh penulisannya:

<html>
<head><title>cellpadding</title></head>
<body>
cellpadding = 1
<table border=1 cellpadding=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br>

cellpadding = 10
<table border=1 cellpadding=10>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Hasilnya adalah :

10. background dengan gambar

Untuk membuat background dengan gambar dapat dengan tag <table backgroung=....>. Gambar dapat berupa latarbelakang warna atau gambar yang lainnya seperti misalnya gambar berikut :
  

Contoh penulisannya:

<html>
<head><title>background</title></head>
<body>
background garuda pada baris
<table border=1 cellpadding=10 >
<tr><td colspan=3 background="garuda.JPG">data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br>

background seluruh tabel
<table border=1 cellpadding=10 background="paper.GIF">
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Hasilnya adalah :



-----------========| copyright @ 2008   SMK Negeri 3 Buduran|========-----------

by: ICT Center Team
Hyper Text Markup Languange

  dasar HTML

  teks heading

  daftar atau list

  teks font

  atribut teks

  tabel

  insert image

  frame

  link

HTML