Postingan kali ini saya beri judul cara Membuat Tabel di Blog dengan Atribut HTML, Postingan blog kali ini merupakan kelanjutan dari postingan sebelumnya mengenai cara membuat tabel di blog dengan menggunakan kode HTML, pada postingan sebelumnya tersebut telah saya bahas kode HTML dasar untuk membuat tabel di blog, dan sebagai kelanjutannya maka pada postingan kali ini saya akan membahas kode hatml untuk membuat tabel khususnya membahas mengenai atribut - atribut yang biasa digunakan untuk membuat tabel lebih lengkap dan agar tampilan tabel lebih menarik.

Seperti di bahas pada postingn sebelmnya bahwa kode HTML dasar Tabel :
  • Tag pembuka  tabel: <table><tbody> dan penutup:  </tbody></table> dan didalamnya terdapat:
  • Tag pembuka  untuk membuat judul <th> dan ditutup dengan tag </th>
  • Tag pembuka  untuk membuat baris  <tr> dan ditutup dengan tag </tr> (berada di dalam tag tabel)
  • Tag pembuka  untuk membuat kolom (berada dalam tag baris) :<td> dan ditutup dengan tag </td> (berada di dalam tag baris)
Atribut Tag HTML pada Tabel
  1. Atribut: border="(angka)" misal penulisan: <table border="2">
    Atribut border digunakan untuk membuat garis tepi pada elemen-elemen tabel, dan besarnya / ketebalan garis dapat diatur dengan menggunakan angka (satuan dalam pixel) contoh penggunaannya sudah diberikan pada postingan sebelumnya
  2. Atribut bgcolor="(warna)" contoh <table bgcolor="red">
    Atribut border digunakan untuk menentukan warna background pada elemen-elemen tabel, adapun untuk menentukan warnanya bisa menggunakan nama warna (dalam bahasa ingris) seperti: white, orange, red, blue, yellow dan lain lain, atau bisa juga menggunakan kode HTML untuk warna seperti: "#ffffff" untuk warna putih, "#ee2724" untuk warna merah "#f36c21" untuk warna orange dan lainnya.
    Adapun contoh penggunaan Atribut bgcolor="(warna)" :  
    1. penggunaan backround untuk seluruh isi tabel: <table bgcolor="red">,
    2. penggunaan backround untuk baris tertentu dalam tabel: <tr bgcolor="red">
    3. penggunaan backround  untuk kolom tertentu pada baris tertentu : <td bgcolor="red">
  3. Atribut align="left" atau align="center" atau align="right"
    atribut align berfungsi untuk mengatur perataan horizontal tex/ tulisan yang ada pada tabel, apakah rata kiri, tengah, rata kanan, atau rata kiri-kanan, Adapun penggunaannya sama seperti tribut border bisa pada seluruh isi tabel, pada baris tertentu saja atau kolom tertentu saja
    berikut Contoh  kode HTML Tabel nya::
    <table border="1">
    <tr>
    <th>Nama siapa saja</th>
    <th>Alamat dimana saja </th>
    <th>Pekerjaaan apa saja</th>
    </tr >
    <tr align="center">
    <td >rata tengah </td>
    <td>sel 1</td>
    <td>coba - coba,<br/> sel 2</td>
    </tr>
    <tr>
    <td align=right>rata kanan</td>
    <td align=center>rata tengan</td>
    <td>default,<br>rata kiri</td>
    </tr>
    </table>

    Hasilnya akan tampak tabel seperti ini:
    Nama siapa saja Alamat dimana saja Pekerjaaan apa saj
    rata tengah sel 1 coba - coba,
    sel 2
    rata kanan rata tengan default,
    rata kiri

  4. Atribut valign="top" atau valign="center" atau valign="bottom"
    Atribut valign berfungsi untuk mengatur posisi/perataan text secara vertikal, rata atas, tengah, atau bawah. berikut contoh penggunaan Contoh  kode HTML Tabel nya:: 
    <table border="2">
<tr>
<th>Nama Siapa saja</th>
<th>Alamat dimana saja </th>
<th>Pekerjaaan apa saja</th>
</tr> 
     <tr>
<td valign=top>default nya</td>
<td valign=bottom>posisi bawah</td>
<td>default alignment,<br>tengah</td>
</tr>
    <tr valign=top>
<td>all aligned to top</td>
<td>lihatlah yang ini<br>biar 2 bsris</td>
<td>Cell 3</td>
</tr>
</table>

    Hasilnya akan menjadi seperti ini:
    Nama Siapa saja Alamat dimana saja Pekerjaaan apa saja
    default nya posisi bawah default alignment,
    tengah
    all aligned to top lihatlah yang ini
    biar 2 bsris    		 Cell 3
  5. Atribut cellpadding="(angka dalam pixel)" contoh:  cellpadding="10"
    Atribut cellpadding berfunsi untuk mengatur jarak antara tepi sel dengan text isi sel di dalam sebuah tabel : Contoh  kode HTML Tabel nya::
    <table border="1" cellpadding="15" >
<tr>
<td>satu juta</td> <td>lima ratus ribu</td> <td>satu</td>
</tr>
<tr cell padding="15" >
<td>aa</td> <td>ss</td> <td>ii</td>
</tr>
</table>

    Hasilnya adalah seperti ini:
    satu juta lima ratus ribu satu
    aa ss ii
  6. Atribut cellspacing"(angka dalam pixel)" contoh: berfungsi untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Contoh  kode HTML Tabel nya::
    <table border="1" cellspacing="15" >
<tr>
<td>satu juta</td> <td>lima ratus ribu</td> <td>satu</td>
</tr>
<tr>
<td>aa</td> <td>ss</td> <td>ii</td>
</tr>
</table>
    hasilnya adalah tabel sebagai berikut:
    satu juta lima ratus ribu satu
    aa ss ii
  7. Atribut width="pixel" atau width="%" : berfungsi untuk mengatur lebar tabel. untuk pemakaian  
    Contoh tabel dengan width="pixel" 
    <table border width="300"> 
    <tr>
    <td width="100">Item A</td>
    <td width="200">Item B</td>
</tr> 
    <tr><td>Item C</td>
    <td>Item D</td>
</tr>  
    </table>
    Hasil tabelnya
    Item A Item B
    Item C Item D

    Contoh kode HTML Tabel dengan width="100%"
    <table border="1" width="100%">
<tr>
    <td>Item 1</td>
    <td>Item 2</td> 
    </tr> 
    <tr>
    <td>Item 1</td>
    <td>Item 2</td> 
    </tr> 
    </table>
    hasil tabel nya
    Item 1 Item 2
    Item 1 Item 2
  8. Atribut height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .
    Contoh tabel dengan width="pixel" 
    <table border="1"> 
    <tr  height="25">
    <td>Item A</td>
    <td>Item B</td>
</tr> 
    <tr height="100">
<td>Item C</td>
    <td>Item D</td>
</tr>  
    </table>
    Hasilnya tabel akan tampak seperti ini:
    Item A Item B
    Item C Item D
  9. Atribut colspan="(jml kolom)" Atribut ini berfungsi untuk menggabungkan dua Cell atau lebih dalam satu Baris  menjadi satu Cell, ingat kalau di aplikasi excell kita jumpai dengan istila "merge cell":
    Contoh penggunaan dalam tabel
    <table border="1" widht="400">
    <tr>
    <td>Item 1</td>
    <td colspan="2">Item 2 dan 2 (digabung menjadi 1 cell)</td>
    </tr>
    <tr>
    <td>Item 4</td>
    <td>Item 5</td>
    <td>Item 6</td>
    </tr>
    </table>
    Tabel Hasinya akan tampak seperti:
    Item 1 Item 2 dan 2 (digabung menjadi 1 cell)
    Item 4 Item 5 Item 6
  10. Atribut rowspan :Atribut ini berfungsi untuk menggabungkan dua Cell atau lebih dalam satu kolom menjadi satu Cell, ingat kalau di aplikasi excell kita jumpai dengan istila "merge cell":
    Contoh penggunaan dalam tabel
    <table border="1" width="300">
    <tr>
    <td>Item 1</td>
    <td rowspan="2">Item 2</td>
    <td>Item 3</td>
    </tr>
    <tr>
    <td>Item 4</td>
    <td>Item 5</td>
    </tr>
    </table>
    Hasilnya akan tampak seperti ini:
    Item 1 Item 2 Item 3
    Item 4 Item 5
Demikian Postingan kali ini cara Membuat Tabel di Blog dengan Atribut HTML,semoga bermanfaat.

Tutorial Blog yang lain:
  1. CARA MUDAH MEMBUAT BLOG DI BLOGSPOT
  2. Cara Kompres CSS, HTML, JavaScript Template Blog
  3. Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog
  4. Cara Membuat Hyperlink Text pada postingan Blogspot
  5. Cara Membuat Kode HTML Link Gambar pada Blogspot
  6. Cara Menampilkan Kode HTML dalam Postingan Blog
  7. Cara Mengganti Tampilan Kursor Mouse dengan Gambar Kustom pada Blog
  8. Cara Mengganti/Mengubah Default Icon Bullet/list di Blog 
  9. Membuat Tabel di Blog dengan Kode HTML - 
  10. Mengenal Kode Tag HTML Dasar pada Web / Blog
  11. Tips Riset Keyword yang Efektif dalam membuat Blog
  12. Tips membuat Atribut HTML link pada Blogspot agar SEO Friendly
  13. Tips/Cara Memasang iklan di body / bawah judul postingan
  14. Tips/Cara Membuat Meta Tag HTML Agar Blog SEO Friendly
  15. Tutorial Urutan Langkah dalam Membangun Blog SEO Friendly