0 Membuat Tabel di Blog dan Atribut HTML

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.