Home
Membuat Table HTML pada Blog

Membuat Table HTML pada Blog

08/22/2010 No Comments
Pembuatan table biasanya digunakan untuk menyajikan informasi dalam bentuk daftar/table. Selain itu juga bisa dipakai untuk merapikan tampilan posting dengan cara menyembunyikan border table sehingga seolah-olah tanpa table postingan bisa berdampingan kiri dan kanan.
Untuk membuat tabel baik di dalam postingan blog maupun untuk pembuatan web selalu menggunakan kode HTML yang biasa di tulis dengan tag <table>

<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

Sumber : http://www.karsono.co.cc/

About The Author

admin

Leave a Reply