Membuat Tabel di Blog

MEMBUAT TABEL di BLOG

Membuat sebuah tabel di blog yang harus kita perhatikan adalah penulisan dari kode-kode html. Penulisan kode diawali <> dan diakhiri dengan </>. Tabel dapat dimasukkan kedalam suatu posting, page atau page element html.

Format dasar menuliskan tabel adalah :

<tabel> TEKS / GAMBAR / LINK </table>


atau:

<table border="_"><tbody>

<tr><td> TEKS / GAMBAR / LINK </td></tr>

</tbody></table>

Beberapa Atribut Tabel / Kode html penting di dalam membuat sebuah tabel :

1. Pembuatan tabel diawali dengan tag <table> dan diakhiri dengan tag</table>.
2. Baris-baris dalam tabel dibuat dengan diawali tag <tr> dan diakhiri tag</tr>.
3. Membuat kolom-kolom diawali dengan tag <td> dan diakhiri tag </td>.
4. Untuk header (baris paling atas dari tabel) kolom dibuat dengan tag <th> dan </th>.
5. Judul tabel dibuat dengan tag <caption> dan </caption>.
6. Tinggi kolom/tabel (dalam pixcels) dengan tag <height>, misal : <td height=10>
7. Lebar kolom/tabel (pixel atau percen) dengan <width>, misal : <td width=10>
8. Membuat ada garis-garisnya, ditambahkan atribut <border>, misalnya <table border=1>.
9. Background gambar dengan tag : <td background=gambar.jpg/png>.
10. Background warna dengan tag : <td bgcolor=””>, misal : <td bgcolor=”203e8d”>.
11. Memasukkan link <td><a href=link.html><img src=gambar.gif border=0></td>.
12. Pelurusan horizontal suatu sel : align (left, center, right, justify), misal : <tr align=left>
13. Pelurusan vertical suatu sel : valign(top, middle, bottom), misal : <tr valign=top>.
14. Jumlah (n) kolom yang ditempati sebuah sel : rowspan=n, misal : <td rowspan=2>.
15. Mematikan kemampuan melipat kata dalam sel : nowrap, misal : <td nowrap>.

Berikut beberapa tabel dengan pemakaian kode html:

1. Tabel 1 kolom.

Tabel 1 kolom

Tag Html-nya:

<table border="1"><tbody>
<tr><td>Tabel 1 kolom</td></tr>
</tbody></table>


Atau:

Tabel 1 kolom

Tag Html-nya:

<table border="6" style="width: 200px;"><tbody>
<tr><td>Tabel 1 kolom</td></tr>
</tbody></table>
____________________________

2. Tabel 2 kolom.

Tabel 2 kolom

Tabel 2 kolom

Tag Html-nya:


<table border="2″><tbody>
<tr> <td> Tabel 2 kolom </td> <td> Tabel 2 kolom </td> </tr>
</tbody></table>
____________________________

3. Tabel 2 kolom, 2 baris.

Tabel 2 kolom, 2 baris	Tabel 2 kolom, 2 baris
Tabel 2 kolom, 2 baris	Tabel 2 kolom, 2 baris

Tag Html-nya:


<table border="2″"><tbody>
<tr> <td> Tabel 2 kolom, 2 baris </td> <td> Tabel 2 kolom, 2 baris </td> </tr>
<tr> <td> Tabel 2 kolom, 2 baris </td> <td> Tabel 2 kolom, 2 baris </td> </tr>
</tbody></table>

____________________________

4. Tabel 3 kolom, 3 baris, dan Judul Tabel.

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Tag Html-nya:


<table border="7"><tbody>
<tr height="40"><td width="150"><span style="font-family: 'times new roman'; font-size: 16px;">kolom 1 dari baris 1</span></td><td width="200"><span style="font-family: 'times new roman'; font-size: 16px;">kolom 2 dari baris 1</span></td></tr>
<tr height="80"><td width="150"><span style="font-family: 'times new roman'; font-size: 16px;">kolom 1 dari baris 2</span></td><td width="200"><span style="font-family: 'times new roman'; font-size: 16px;">kolom 2 dari baris 2</span></td></tr>
</tbody></table>

____________________________



5. Tabel 3 kolom, 3 baris, dan Judul Tabel.

Judul Tabel

Tabel 3 kolom, 3 baris	Tabel 3 kolom, 3 baris	Tabel 3 kolom, 3 baris
Tabel 3 kolom, 3 baris	Tabel 3 kolom, 3 baris	Tabel 3 kolom, 3 baris
Tabel 3 kolom, 3 baris	Tabel 3 kolom, 3 baris	Tabel 3 kolom, 3 baris

Tag Html-nya:


<table border="2"><caption>Judul Tabel</caption> <tbody>
<tr <th><span class="Apple-style-span" style="font-weight: normal;">Tabel 3 kolom, 3 baris </span></th
<th><span class="Apple-style-span" style="font-weight: normal;">Tabel 3 kolom, 3 baris</span></th>

<tr> <td>Tabel 3 kolom, 3 baris</td> <td>Tabel 3 kolom, 3 baris</td><td>Tabel 3 kolom, 3 baris</td> </tr>

<th><span class="Apple-style-span" style="font-weight: normal;">Tabel 3 kolom, 3 baris</span></th> </tr>
<tr> <td>Tabel 3 kolom, 3 baris</td><td>Tabel 3 kolom, 3 baris</td><td>;Tabel 3 kolom, 3 baris</td> </tr>
</tbody></table>
____________________________



6. Tabel dengan memasukkan gambar.

Pesawat

Helicopter

Tag Html-nya:

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>

<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6RrBIbP-_W5P7OXmYQxrTqnDkbJ9oa8dQnJYwpbjiDudpPGeHQjrLBeLDOwTIbdOgCq6o5OuX3HBnIZe9K1lNyyQ0WaRKHwLoXEOnZrQonhsS7oj2C7diO_Xxj7000F-tzJpipIL7CY/s1600/Pesawat+Dani.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6RrBIbP-_W5P7OXmYQxrTqnDkbJ9oa8dQnJYwpbjiDudpPGeHQjrLBeLDOwTIbdOgCq6o5OuX3HBnIZe9K1lNyyQ0WaRKHwLoXEOnZrQonhsS7oj2C7diO_Xxj7000F-tzJpipIL7CY/s1600/Pesawat+Dani.gif" /></a></td></tr>

<tr><td class="tr-caption" style="text-align: center;">Pesawat</td></tr>

</tbody></table>

</div></td><td style="vertical-align: top;"><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>

<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLJoGJJOYQpFGfGNvWykvIk0f6hyphenhyphennIVQpSzCBawrkJUn1OwiTpogUcbcxkM_s5eEx4cbSMyaVBpR4Qug7HiyvqDaQcicL5Vc4xCDrbjiXgaCwl1H-LJ2LHeYgzRWAGscDTrLlKNdaev8/s1600/Helicopter.gif" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLJoGJJOYQpFGfGNvWykvIk0f6hyphenhyphennIVQpSzCBawrkJUn1OwiTpogUcbcxkM_s5eEx4cbSMyaVBpR4Qug7HiyvqDaQcicL5Vc4xCDrbjiXgaCwl1H-LJ2LHeYgzRWAGscDTrLlKNdaev8/s1600/Helicopter.gif" /></a></td></tr>

<tr><td class="tr-caption" style="text-align: center;">Helicopter</td></tr>

</tbody></table>

</td></tr>

</tbody></table>

_________________________