MEMBUAT TABEL DENGAN HTML

CARA MEMBUAT TABEL DENGAN TAG - TAG HTML

Setelah mengetahui beberapa tag dasar HTML, perlu ulasan kembali tentang pembuatan tabel dalam HTML agar mengerti secara matang tag-tag yang digunakan dan mengerti bagaimana mewarnai tabel, merge tabel dll. Dalam mengelola tabel agar lebih baik pasti memerlukan atribut tagnya. pertama-tama mari kita mengenal atribut tagnya.

1. Atribut tag <table>



Atribut Tag <table>	Fungsi Tag	Value	Contoh
border	menambahkan border tabel	1,2,3 dst.	<table border="1">
cellpadding	mengatur jarak antara tes dalam tabel dengan garisnya	1,2,3 dst.	<table cellpadding="1">
cellspacing	mengatur jarak antara cell dengan cell lainnya	1,2,3 dst.	<table cellspacing="1">
align	mengatur posisi tabel	left, center, right.	<table align="left">
width	mengatur lebar tabel	100px,100%	<table width="100px">
height	mengatur tinggi tabel	200px	<table height="100px">
bgcolor	memberi background warna tabel	red, yellow, green, blue dst.	<table bgcolor="red">
frame	memberi border sebagian saja atau semua bagian yang ingin diberi border	box, above, below, hsides,	<table frame="box">
rules	memberi garis beberapa atau semua dalam cell pada tabel	rows, cols, all, none	<table rules="rows">
bordercolor	memberi border warna pada tabel	red,yellow,green, dst.	<table rules="rows">



OK, dimengertikan. tabel diatas saya akan memberikan contoh dari atribut frame dan rules yang lainnya bisa dicoba sendiri.

Atribut frame

contoh Atribut  frame="box"

<table frame="box"> <tbody> <tr> <td>kolom 1</td><td>kolom 2</td><td>kolom 3</td></tr> <tr> <td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> </tbody></table>


maka hasilnya seperti berikut ini :

kolom 1	kolom 2	kolom 3
kolom 4	kolom 5	kolom 6

 contoh Atribut  frame="above"

<table frame="above"> <tbody> <tr> <td>kolom 1</td><td>kolom 2</td><td>kolom 3</td></tr> <tr> <td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> </tbody></table>


maka hasilnya seperti berikut ini :

kolom 1	kolom 2	kolom 3
kolom 4	kolom 5	kolom 6

  contoh Atribut  frame="below"

<table frame="below"> <tbody> <tr> <td>kolom 1</td><td>kolom 2</td><td>kolom 3</td></tr> <tr> <td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> </tbody></table>


maka hasilnya seperti berikut ini :

kolom 1	kolom 2	kolom 3
kolom 4	kolom 5	kolom 6

contoh Atribut  frame="hsides"

<table frame="hsides"><tbody> <tr><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> </tbody></table>


maka hasilnya seperti berikut ini :

kolom 1	kolom 2	kolom 3
kolom 4	kolom 5	kolom 6

Atribut rules

contoh Atribut  rules="rows" 

<table rules="rows"> <tr><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> </table>


maka hasilnya seperti berikut ini :

kolom 1	kolom 2	kolom 3
kolom 4	kolom 5	kolom 6
kolom 4	kolom 5	kolom 6
kolom 4	kolom 5	kolom 6

contoh Atribut  rules="cols" 

<table rules="cols"> <tr><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> </table>


maka hasilnya seperti berikut ini :

kolom 1	kolom 2	kolom 3
kolom 4	kolom 5	kolom 6
kolom 4	kolom 5	kolom 6
kolom 4	kolom 5	kolom 6

contoh Atribut  rules="all" 

<table rules="all"> <tr><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> </table>


maka hasilnya seperti berikut ini :

kolom 1	kolom 2	kolom 3
kolom 4	kolom 5	kolom 6
kolom 4	kolom 5	kolom 6
kolom 4	kolom 5	kolom 6

contoh Atribut  rules="none" 

<table rules="none"> <tr><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> <tr><td>kolom 4</td><td>kolom 5</td><td>kolom 6</td></tr> </table>


maka hasilnya seperti berikut ini :

kolom 1	kolom 2	kolom 3
kolom 4	kolom 5	kolom 6
kolom 4	kolom 5	kolom 6
kolom 4	kolom 5	kolom 6



2. Atribut tag <th>,<tr>, dan <td>

Tag <th>, <tr> dan <td> Atributnya sama dengan atribut <table> hanya saja ada beberapa tag yang tak berfungsi jika dimasukana disini yaitu : cellpadding, cellspacing, frame, dan rules. kali ini aku akan mengajarkan bagaimana caranya untuk me-merge kolom atau baris. Berikut ulasannya pada tabel berikut : 

Atribut Tag <th> atau <td>	Fungsi Tag	Value	Contoh
colspan	menggabungkan 2 cell atau lebih dalam bentuk horizontal atau kekanan.	2,3,4,5, dst	<th colspan=2>
rowspan	menggabungkan 2 cell atau lebih dalam bentuk vertikal atau kebawah.		<td rowspan=2>

Contoh Colspan

<table border="1"><tr><th colspan="4">Identitas diri</th> </tr><tr>    <td>Nama</td><td>Email</td><td>Nomor HP</td><td>Alamat</td></tr></table>

maka hasilnya seperti berikut ini :

Identitas diri
Nama	Email	Nomor HP	Alamat

Contoh Rowspan

<table border="1"> <tr> <th>Bulan</th> <th>Simpanan</th> <th>Simpanan Untuk Hari Libur</th> </tr> <tr> <td>Januari</td> <td>Rp.10.000</td> <td rowspan="2">Rp.5.000</td> </tr> <tr> <td>Februari</td> <td>Rp.8.000</td> </tr> </table>

maka hasilnya seperti berikut ini :

Bulan	Simpanan	Simpanan Untuk Hari Libur
Januari	Rp.10.000	Rp.5.000
Februari	Rp.8.000