~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SAYA MENDENGAR LALU SAYA LUPA ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MEMBACA LALU SAYA INGAT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MELAKUKAN LALU SAYA MENGERTI~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3 April 2015

Pelajaran 06 : Tabel Pada HTML


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 :
  • tabel tanpa border
  • tabel dengan border
  • menggabungkan (merge) baris
  • menggabungkan (merge) kolom
  • mengatur kolom secara horisontal
  • mengatur kolom secara vertikal
  • memberi warna tabel
  • mengatur spasi baris (cellspacing)
  • mengatur jarak ke garis (cellpadding)
  • background dengan gambar

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>
 



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>
 



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>
 



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>
 



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>
 



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>
 



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>
 



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>
 



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>
 



10. Background Dengan Gambar

Untuk membuat background dengan gambar dapat dengan tag <table background=....>. 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>



by herman @smkn3buduransda



ARTIKEL TERKAIT:


BACA JUGA TULISAN MENARIK LAINNYA :

0 Komentar:

Post a Comment