Tutorial : Cara Membuat Tabel pada Web Design

Biasanya Blog dari blogspot maupun wordpress saat ini belum dilengkapi dengan toolbar untuk membuat tabel pada postingan atau artikel yang kita tulis.
Oleh karena itu, kita dapat membuat tabel dengan menulis langsung kode atau tag HTML untuk membuat tabel. Adapun tag HTML yang digunakan untuk membuat tabel pada blog adalah sebagai berikut :

<table>
<tr>
<td>ISI 1 TABEL</td>
</tr>
</table>


Keterangan :
Tag <table></table> bertujuan untuk membentuk "bungkus" tabel secara keseluruhan.
Tag <tr></tr> bertujuan untuk membentuk baris tabel.
Tag <td></td> bertujuan untuk membentuk kolom
Kolom akan berada di dalam baris. Artinya, kita harus membuat baris dulu baru kemudian membuat kolom.
Sedangkan isi dari tabel kita tuliskan di dalam tag <td></td>.

Jadi, jika kita ingin menambah kolom baru pada tabel tersebut, cukup tulis saja stuktur (kode) mulai tag <td> sampai </td>. Sehingga bentuknya menjadi :

<table>
<tr>
<td>ISI 1 TABEL</td><td>ISI 2 TABEL</td>
</tr>
</table>

Selanjutnya, jika kita ingin menambah baris baru, cukup tulis lagi struktur (kode) mulai tag <tr> sampai </tr>. Sehingga bentuknya menjadi :

<td> sampai </td>. Sehingga bentuknya menjadi:
<table>
<tr>
<td>ISI 1 TABEL</td><td>ISI 2 TABEL</td>
</tr>
<tr>
<td>ISI 3 TABEL</td><td>ISI 4 TABEL</td>
</tr>
</table>


Nah, supaya tabel tersebut bisa terlihat pada halaman blog, maka kita harus membuat border dari tabel tersebut:. Caranya cukup menambahkan kode yang berwarna biru seperti di bawah ini :

<table border="2">
<tr>
<td>ISI 1 TABEL</td><td>ISI 2 TABEL</td>
</tr>
<tr>
<td>ISI 3 TABEL</td><td>ISI 4 TABEL</td>
</tr>
</table>

border="..." tersebut merupakan atribut digunakan untuk mengatur tabel yang nilainya adalah pixel. Beberapa atribut lain yang bisa kita gunakan antara lain:

1. cellspacing : merupakan atribut untuk mengatur jarak antar sel. Misalnya jarak sel pada baris 1 kolom 1 dengan dengan sel baris 1 kolom 2. Penulisannya adalah:
   <table cellspacing="2">...</table>
2. cellpadding : merupakan jarak tulisan atau isi sel dari pinggir sel. Tujuannya agar isi atau tulisan pada tabel tersebut tidak mepet pada pinggir atau border tabel. Penulisannya adalah:
   <table cellpadding="2">...</table>
3. bgcolor : merupakan atribut untuk mengatur warna background dari tabel. Isinya adalah kode-kode warna. Contoh penulisannya:
   <table bgcolor="#00FF00">...</table>
4. align : merupakan atribut untuk mengatur posisi tabel. Nilai dari atribut ini adalah:
   
   • center : agar berada ditengah-tengah halaman.
     
   • left : agar berada disebelah kiri halaman.
   • right: agar berada disebelah kanan halaman.
   Contoh penulisannya adalah :
   <table align="left">...</table>
   
5. bordercolor : untuk mengatur warna border tabel. Nilainya adalah pixel. Contoh penulisannya adalah:
   <table bordercolor="#0000FF">...</table>
6. width: untuk mengatur lebar tabel. Nilainya adalah pixel atau persen (%). Contoh penulisannya:
   <table width="300">...</table>
7. height : untuk mengatur tinggi tabel. Nilainya adalah pixel atau persen (%). Contoh penulisannya:
   <table height="150">...</table>

Contoh penggunaan keseluruhan dari atribut tersebut adalah:

<table align="left" border="2" bordercolor="#0000FF" height="150" width="300" bgcolor="#00FF00" cellpadding="2" cellspacing="2">
<tr>
<td>ISI 1 TABEL</td><td>ISI 2 TABEL</td>
</tr>
<tr>
<td>ISI 3 TABEL</td><td>ISI 4 TABEL</td>
</tr>
</table>

dan Hasil ScreenShootnya Seperti Gambar di Bawah Ini :

Semoga Bermanfaat :)
Ohya tutorial ini juga dapat berfungsi untuk blog kmu atau web design buatan km.
bisa menggunakan Macromedia DreamWeaver.

sumber artikel : tutorial website