HTML : Table

HTML : Belajar Membuat Tabel

okray guys, sekarang saya akan menshare/berbagi ilmu HTML tentang cara membuat tabel. Tabel dalam HTML dibuat dengan menggunakan tag awal <TABLE>  dan tag penutup </TABLE>, tag ini memiliki beberapa bagian penting, seperti :

<TABLE> ... </TABLE> : berfungsi membentuk table
<TH> ... </TH> : berfungsi membentuk judul kolom
<TR> ... </TR>  : berfungsi membentuk baris
<TD> ... </TD>    : berfungsi membuat sel data
Border : berfungsi memberikan garis pada tabel

  
tampilan diatas adalah tampilan table sederhana dari HTML, penasaran kan cara membuatnya??yuk kita praktek dari yang sederhana sampai rumit!

<table border = "1">
<tr><th>NO</th><th>Nama</th></tr>
<tr><td>1</td><td>Ujang</td></tr>
 <tr><td>2</td><td>Udin</td></tr>
</table>

simpan dengan tabel1.html
maka hasilnya :

NO	Nama
1	Ujang
2	Udin

ok, tampilan diatas sangat sederhana anda bisa memodifikasinya sesuai keinginan anda, tabel1 sudah, sekarang kita membuat tabel2, kita buat lebih keren lagi,

<table border = "1" bgcolor = "#006600" cellpadding>
<tr><th>NO</th><th>Nama</th><th>Status</th></tr>
<tr><td>1</td><td>Epul</td><td>Duda</td></tr>
<tr><td>2</td><td>Saprudin</td><td>Bujangan</td></tr>
</table>

simpan dengan nama tabel2.html
maka hasilnya :

NO	Nama	Status
1	Epul	Duda
2	Saprudin	Bujangan

nah sudah pemanasannya sekarang kita akan bermain ke yang lebih rumit <COLSPAN><ROWSPAN>, ok saya jelaskan!
<ROWSPAN> : berfungsi menggabungkan baris pada tabel
<COLSPAN>  : berfungsi menggabungkan kolom pada tabel

ok langsung saja dipraktekkin

<table border = "1" bgcolor = "yellow">
<tr><th>Provinsi</th><th>Kota</th></tr>
<tr><td rowspan = "2">Jawa Barat</td><td>Tasikmalaya</td></tr>
<tr><td>Bandung</td></tr>
<tr><td rowspan = "2">Jawa Timur</td><td>Jember</td></tr>
<tr><td>Surabaya</td></tr>
</table>

Provinsi	Kota
Jawa Barat	Tasikmalaya
	Bandung
Jawa Timur	Jember
	Surabaya

keren kan,simpan dengan nama tabelrowspan.html
setelah kita membuat tabel rowspan yuk kita buat tabel colspan

<table border = "1" bgcolor = "orange">
<tr><td colspan = "2">Opsi</td></tr>
<tr><td>Ya</td><td>Tidak</td></tr>
<tr><td>Hapus</td><td>Edit</td></tr>
<table>

Opsi
Ya	Tidak
Hapus	Edit

simpan dengan nama tabelcolspan.html

nah sekian ilmu yang saya berikan untuk anda semoga bermanfaat, untuk yang lainnya anda berkreasi sendiri, otak atik sendiri syntax HTML tabel ini, wassalam
 

Posted in: HTML