Cara Membuat Tabel Pada Blog

Posted by Unknown on 11/19/2009
11 komentar
This item was filled under ,

B
log dari blogspot maupun wordpress saat ini belum dilengkapi dengan toolbar untuk membuat tabel pada postingan atau artikel yang kita tulis. Oleh karena itu, kita harus 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>
  1. Tag <table></table> bertujuan untuk membentuk "bungkus" tabel secara keseluruhan. 
  2. Tag <tr></tr> bertujuan untuk membentuk baris tabel.
  3. Tang <td></td> bertujuan untuk membentuk kolom 
  4. Kolom akan berada di dalam baris. Artinya, kita harus membuat baris dulu baru kemudian membuat kolom.
  5. 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> sampat </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>
    • bordercolor : untuk mengatur warna border tabel. Nilainya adalah pixel. Contoh enulisannya adalah:
      <table bordercolor="#0000FF">...</table>
    • width: untuk mengatur lebar tabel. Nilainya adalah pixel atau persen (%). Contoh penulisannya:
      <table width="300">...</table>
    • 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>

    Bookmark and Share

    POSTINGAN LAIN YANG BERHUBUNGAN :




    Dapatkan Tutorial Website Via Email:
    Setelah membaca artikel diatas, jangan lupa ngasi komentar ya...

    11 komentar on "Cara Membuat Tabel Pada Blog"



    Post a Comment