CARA MEMBUAT TABEL PADA BLOG ATAU HTML

Tabel Hampir sama dengan cara membuat kotak, perbedaannya table adalah kumpulan kotak. yang memiliki border garis berdasarkan baris dan kolom.HTML banyak sekali digunakan untuk menyusun objek, gambar, tulisan, layout, bidang ruang, tampilan halaman dan sebagainya. Oleh karena itu sangat penting bagi kita untuk mengetahui kode yang merupakan elemen pemasangan sebuah tabel.

Terlebih dahulu kita akan mengenal perintah kode-kode yang berhubungan dengan tabel:

satu kolom kodenya:
<table border="1"><tr><th>Nama</th></tr></table>

hasilnya:

Nama

dua kolom kesamping & satu kolom kebawah kodenya:
<table width="250" border="1">
<tr>
<td>nama </td>
<td>alamat </td>
</tr>
</table>

width="250" untuk menentukan panjang tabel,
 hasilnya:

nama

alamat

selanjutnya 2 kolom kesamping & 2 kolom kebawah kodenya:
<table border="1"><tr>
<th>Nama</th>
<th>Tanggal Lahir</th>
</tr>
<tr>
<td>.........</td>
<td>21-03-2013</td></tr>
</table>

hasilnya:

Nama	Tanggal Lahir
.........	21-03-2013

Apabila melihat contoh susunan tabel diatas, pengertian kode HTML nya adalah sebagai berikut :

• <table> diakhiri dengan </table> : digunakan sebagai tanda awal tabel
• <tr>..</tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
• <th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
• <td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data

Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua jenis kode HTML.

sedangkan untuk pendukung kode diatas:

• align : untuk mengatur posisi horizontal
• valign : untuk mengatur posisi vertikal
• width : untuk mengatur lebar
• height : untuk mengatur tinggi
• border : untuk mengatur tebal garis
• border-color : untuk memberi tebal garis dengan warna
• cellpadding : untuk mengatur jarak garis dengan objek didalamnya
• cellspacing : untuk mengatur jarak tiap cell
• bgcolor : untuk mengatur warna
• background : untuk mengatur latar gambar
• rowspan : jumlah baris yang memotong beberapa baris
• colspan : jumlah kolom yang memotong beberapa kolom

Berikut ini adalah contoh dari tabel dengan beberapa kode warna, Susunan script kodenya:
<table width="510" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="58" rowspan="3" bgcolor="#00CCCC">...........</th>
<th width="79" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="250" bgcolor="#FF9900">Tanggal lahir</th>
<th colspan="2" bgcolor="#FF9900">..........</th>
</tr>
<tr>
<td bgcolor="#66CCFF">......</td>
<td align="center" bgcolor="#99CC66">........</td>
<td bgcolor="#9966FF">...........</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFF00">........</td>
<td align="center" bgcolor="#FFFF00">..........</td>
<td bgcolor="#FFFF00">.........</td>
<td bgcolor="#FFFF00">&nbsp;</td>
<td bgcolor="#FFFF00">&nbsp;</td>
</tr>
</table>

hasilnya:

...........	Nama	Alamat	Tanggal lahir	..........
	......	........	...........
	........	..........	.........

Tabel memang sangat banyak digunakan mulai dari Microsoft Excell, Microsoft Word, Microsoft Powerpoint, Adobe Dreamweaver dan lainnya.Karna itu akan sangat bagus juga anda sekalianmenggunakan nya pada pembuatan blog.


Namun jika anda tidak ingin repot dan ingin menggunakan cara mudah silah kan lihat artikel saya sebelumnya CARA MEMBUAT KOTAK / BINGKAI DI BLOG

wasalam.