TABLE HTML 0

Untuk membuat tabel baik di dalam postingan blogger maupun pembuatan web selalu menggunakan kode html yang biasa di tulis dengan tag <table> Contoh sederhananya adalah seperti berikut ini, coba perhatikan kode html dari tabel di bawah ini.

<table border="1"> <tr> <td>Cell 1</td><td>Cell 2</td> </tr> </table>

Tampilan dari kode html diatas adalah seperti dibawah ini...

Cell 1

Cell 2

Contoh dari tabel diatas adalah berlaku dengan lebar dari tiap cell menyesuaikan dengan lebar dari isi/teks di dalam cell itu sendiri, jika lebarnya ingin kita utak-atik juga bisa... nach sebagai contoh kode di bawah ini merupakan contoh dari lebar yang disesuaikan dengan lebar postingan.

<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <td width="20%">Cell 1</td><td>Cell 2</td> </tr> </table>

hasilnya

Cell 1

Cell 2

Apabila kita ingin menambahkan baris untuk header, maka tinggal menambahkan tag <th>, liat contoh dibawah ini

<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th>Table header</th> <th>Table header</th> </tr> <tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table>

hasilnya

Header 1	Header 2
Cell 1	Cell 2

Satu lagi ni... biasanya di dalam microsoft excel atau office, ada yang di sebut merge cell, nach.. untuk di kode html biasa di sebut colspan, dimana nilai dari colspan merupakan jumlah dari cell, lihat contoh di bawah ini.

<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th colspan="2">Table header</th> </tr> <tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table>

hasilnya

Header Coloum
Cell 1	Cell 2

Kondisi diatas adalah merupakan mergecell kode html dari kolom, sedangkan untuk merge cell dari baris adalah sebagai berikut

<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th rowspan="2">Table header</th><td>Table cell 1</td> </tr> <tr> <td>Table cell 2</td> </tr> </table>

hasilnya

Header Row	Cell 1
	Cell 2

Sedangkan untuk pewarnaan dari cell langsung saja lihat contoh kodenya, dimana sellnya di berikan background...

<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th style="color:blue;background-color:yellow;" rowspan="2">Table header</th><td>Table cell 1</td> </tr> <tr> <td>Table cell 2</td> </tr> </table>

hasilnya

Header row background	Cell 1
	Cell 2