Tabel Di dalam HTML
cara menggunakan tabel di HTML
Seringkali informasi yang akan ditampilkan adalah
informasi olahan yang berbentuk tabel, sehingga kitapun memerlukan format
ini di dalam dokumen HTML. Format ini dapat diwujudkan dengan menggunakan
tag tabel <tabel>. Sedikit berbeda dengan tag lainnya, tag tabel
ini memerlukan tag lainnya untuk menampilkan data dalam bentuk tabulasi.
Berikut ini uraiannya :
| Tag | Parent | Fungsi |
| <table> </table> |
--- | tag utama |
| <caption> </caption> |
<table> | Menampilkan judul tabel |
| <tr></tr> | <table> | Tag baris |
| <th></th> | <tr> | Header table |
| <td></td> | <tr> | Tag sel-sel tabel |
Berikut ini beberapa atribut tag tabel:
| tribut | Fungsi |
| bgcolor | warna background |
| width, height | lebar dan tinggi tabel (dalam % atau pixel) |
| align (left, right, center) | pengaturan posisi horisontal isi sel, rata kanan/kiri/tengah |
| valign (top, bottom, middle) | pengaturan posisi vertikal terhadap isi sel, di atas, bawah atau tengah |
| colspan=n | ekstensi (span) n kolom ke kanan |
| rospan=n | ekstensi (span) n baris ke bawah |
| nowrap | mematikan word wrapping |
contoh membuat tabel tanpa border di HTML
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:
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<html> <head><title>tabel</title></head>
<body>
Tabel tanpa border
<table>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>12345556</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>12356666</td><td>Susilo</td><td>Malang</td></tr>
<tr><td>123675656</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Tamplilan di browser akan seperti ini
Tabel tanpa border
| NIK | nama | alamat |
|---|---|---|
| 12345556 | Ana | Sidoarjo |
| 12356666 | Susilo | Malang |
| 123675656 | Amin | Surabaya |
contoh membuat tabel dengan border di HTML
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>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>12340009</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>12350009</td><td>Susilo</td><td>Malang</td></tr>
<tr><td>123600099</td><td>Amin</td><td>Surabaya</td></tr>
</table>
<br><br>
Tabel dengan border = 5
<table border="5">
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>12349000</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>12359000</td><td>Susilo</td><td>Malang</td></tr>
<tr><td>12369000</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Tampilan di browser :
Tabel dengan border = 1
| NIK | nama | alamat |
|---|---|---|
| 12340009 | Ana | Sidoarjo |
| 12350009 | Susilo | Malang |
| 123600099 | Amin | Surabaya |
Tabel dengan border = 5
| NIK | nama | alamat |
|---|---|---|
| 12349000 | Ana | Sidoarjo |
| 12359000 | Susilo | Malang |
| 12369000 | Amin | Surabaya |
contoh menggabungkan (merge) baris di HTML
Untuk cara menggabungkan baris dapat dengan tag <td rowspan=....>.
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<html>
<head><title>rowspan</title></head>
<body>
mengabungkan baris
<table border=1>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td rowspan=2>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
<head><title>rowspan</title></head>
<body>
mengabungkan baris
<table border=1>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td rowspan=2>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
mengabungkan baris
| NIK | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | |
| 1236999 | Amin | Surabaya |
contoh menggabungkan (merge) kolom di HTML
Untuk menggabungkan kolom dapat dengan tag <td colspan=....>.
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<html>
<head><title>colspan</title></head>
<body>
mengabungkan kolom
<table border=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
<head><title>colspan</title></head>
<body>
mengabungkan kolom
<table border=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Tampilan di browser :
mengabungkan kolom
| data siswa | ||
| NIK | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | Sidoarjo |
| 1236999 | Amin | Surabaya |
contoh mengatur kolom secara horisontal di HTML
Untuk mengatur dalam baris menggunakan tag <tr align=....>, sedangkan untuk setiap kolom dapat menggunakan dengan tag <td align=....>.
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<html>
<head><title>mengatur horisontal</title></head>
<body>
center pada baris ke 4
<table border="1">
<tr><th>Nomor Induk Koantor</th><th>nama</th><th>alamat</th></tr>
<tr><td>123499</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 Kantor</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>
<head><title>mengatur horisontal</title></head>
<body>
center pada baris ke 4
<table border="1">
<tr><th>Nomor Induk Koantor</th><th>nama</th><th>alamat</th></tr>
<tr><td>123499</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 Kantor</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>
Tampilan di browser :
center pada baris ke 4
| Nomor Induk Koantor | nama | alamat |
|---|---|---|
| 123499 | Ana Ningrum | Jl. Jenggolo 1C |
| 1235 | Sudarmanto | J. Blimbing 12 |
| 1236 | Amin | Kedurus |
center pada baris ke 4 kolom 1
| Nomor Induk Kantor | nama | alamat |
|---|---|---|
| 1234 | Ana Ningrum | Jl. Jenggolo 1C |
| 1235 | Sudarmanto | J. Blimbing 12 |
| 1236 | Amin | Kedurus |
contoh mengatur kolom secara vertikal di html
Untuk mengatur dalam baris menggunakan tag <tr valign=....>, sedangkan untuk setiap kolom dapat menggunakan dengan tag <td valign=....>.
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<html>
<head><title>mengatur vertikal</title></head>
<body>
menempatkan pada posisi bottom
<table border=1>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td rowspan=2 valign=bottom>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
<br>
menempatkan pada posisi top
<table border=1>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td rowspan=2 valign=top>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
<head><title>mengatur vertikal</title></head>
<body>
menempatkan pada posisi bottom
<table border=1>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td rowspan=2 valign=bottom>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
<br>
menempatkan pada posisi top
<table border=1>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td rowspan=2 valign=top>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
Tampilan di browser :
menempatkan pada posisi bottom
| NIK | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | |
| 1236999 | Amin | Surabaya |
menempatkan pada posisi top
| NIK | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | |
| 1236999 | Amin | Surabaya |
contoh memberi warna tabel di html
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=....>.
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<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 pegawai</td></tr>
<tr bgcolor=#CCFFFF><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>
<br>
mewarnai sel
<table border=1>
<tr><td colspan=3>data pegawai</td></tr>
<tr><th>NIk</th><th>nama</th><th>alamat</th></tr>
<tr><td bgcolor=#CCFFFF>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>
</body>
</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 pegawai</td></tr>
<tr bgcolor=#CCFFFF><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>
<br>
mewarnai sel
<table border=1>
<tr><td colspan=3>data pegawai</td></tr>
<tr><th>NIk</th><th>nama</th><th>alamat</th></tr>
<tr><td bgcolor=#CCFFFF>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>
</body>
</html>
mewarnai tabel
| data siswa | ||
| NIS | nama | alamat |
|---|---|---|
| 1234 | Ana | Sidoarjo |
| 1235 | Susilo | Sidoarjo |
mewarnai baris
| data pegawai | ||
| NIK | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | Sidoarjo |
mewarnai sel
| data pegawai | ||
| NIk | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | Sidoarjo |
contoh mengatur spasi baris (cellspacing) di html
Untuk mengatur spasi beris dapat dengan tag <table cellspacing=....>.
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<html>
<head><title>cellspacing</title></head>
<body>
cellspacing = 1
<table border=1 cellspacing=1>
<tr><td colspan=3>data pegawai</td></tr>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
<br>
cellspacing = 7
<table border=1 cellspacing=7>
<tr><td colspan=3>data pegawai</td></tr>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
<head><title>cellspacing</title></head>
<body>
cellspacing = 1
<table border=1 cellspacing=1>
<tr><td colspan=3>data pegawai</td></tr>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
<br>
cellspacing = 7
<table border=1 cellspacing=7>
<tr><td colspan=3>data pegawai</td></tr>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
cellspacing = 1
| data pegawai | ||
| NIK | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | Sidoarjo |
| 1236999 | Amin | Surabaya |
cellspacing = 7
| data pegawai | ||
| NIK | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | Sidoarjo |
| 1236999 | Amin | Surabaya |
contoh background dengan gambar di html
Untuk membuat background dengan gambar dapat dengan tag <table backgroung=....>. Gambar dapat berupa latarbelakang warna atau gambar yang lainnya
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<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>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236999</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 pegawai</td></tr>
<tr><th>NIK</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234999</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235999</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236999</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
background garuda pada baris
| data siswa | ||
| NIK | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | Sidoarjo |
| 1236999 | Amin | Surabaya |
background seluruh tabel
| data pegawai | ||
| NIK | nama | alamat |
|---|---|---|
| 1234999 | Ana | Sidoarjo |
| 1235999 | Susilo | Sidoarjo |
| 1236999 | Amin | Surabaya |
Keterangan Yang lebih jelas :
| tag | nilai | keterangan |
|---|---|---|
| <table> | memulai tabel | |
| <tr> | membuat baris | |
| <th> | membuat kolom header | |
| <td> | membuat kolom | |
| border | 0 sampai 15 | menampilkan garis dan ketebalannya |
| align | left , center , right | mengatur isi kolom secara horisontal |
| valign | top , middle , bottom | mengatur isi kolom secara vertikal |
| rowspan | angka bulat | menggabungkan (merge) baris |
| colspan | angka bulat | menggabungkan (merge) kolom |
| bgcolor | kode warna | mewarnai tabel atau kolom |
| background | gambar (image) | membuat latar belakang tabel atau kolom |
| cellspacing | angka bulat | mengatur spasi antar baris dan kolom |
| cellpadding | angka bulat | mengatur spasi dari baris dan kolom |