Tabel Pada Post Blog

Sekilas, penampilan table pada post blogger mungkin terlihat mudah dan sederhana. Namun pada kenyataannya tidak semudah yang dibayangkan.

Nah, kesempatan kali ini saya ingin nge-share gimana sih cara agar post berupa table bias termuat dan ditampilkan pada laman kita.

Berikut …

1   Pertama-tama buat table yang akan ditampilkan dengan Ms. Excel atau program sejenis.  
2    Blok dan copy sel-sel yang akan di tampilkan pada post. 
3   Paste-kan pada post blog. Anda akan mendapati bahwa border dari table tersebut tidak tampak padahal Anda sudah mengaturnya sedemikian rupa di Ms. Excel.
4.   Setelah Anda paste-kan table tersebut, klik HTML. Kita lihat disana  ada elemen-elemen dari sel yang Anda paste tadi.

  <tr height="22" style="height: 16.5pt;">

  <td class="xl71" height="22" style="height: 16.5pt;">NO</td>

  <td class="xl71" style="border-left: none;">NAMA</td>

  <td class="xl71" colspan="2" style="border-left: none;">TANDA TANGAN</td>

  </tr>

5.      Untuk mengatur agar border table nampak, tambahkan kode

<table border="1">

        Tepat diatas kode

<tr height="22" style="height: 16.5pt;">

        Sehingga menjadi,

<table border=”1”>

<tr height="22" style="height: 16.5pt;">

  <td class="xl71" height="22" style="height: 16.5pt;">NO</td>

  <td class="xl71" style="border-left: none;">NAMA</td>

  <td class="xl71" colspan="2" style="border-left: none;">TANDA TANGAN</td>

            </tr>

6.     Untuk mengatur posisi text dalam table, ketikkan saja align=”[posisi*]” [spasi] dalam baris kode html dari text yang ingin diatur posisinya.(* : center/left/right)

Contoh pada kolom NAMA :

<table border=”1”>

<tr height="22" style="height: 16.5pt;">

  <td class="xl71" height="22" style="height: 16.5pt;">NO</td>

  <td class="xl71" align=”center” style="border-left: none;">NAMA</td>

  <td class="xl71" colspan="2" style="border-left: none;">TANDA TANGAN</td>

            </tr

Hasilnya,

 BORDER=0

 BORDER=1

7.     Untuk mengatur panjang dan lebar sel menggunakan kode height (lebar) dan width(panjang). Metode penyisiipannya pun sama seperti kita kentisipkan kode untuk mengatur posisi.

          

           HEIGHT=”VALUE”

           WIDTH=”VALUE”

Contoh pada kolom NAMA :

           

<table border=”1”>

<tr height="22" style="height: 16.5pt;">

  <td class="xl71" height="22" style="height: 16.5pt;">NO</td>

  <td class="xl71" align=”center” width=”150” style="border-left: none;">NAMA</td>

  <td class="xl71" colspan="2" style="border-left: none;">TANDA TANGAN</td>

                                         </tr

            Hasilnya,

                                                                              WIDTH=50

                        
                           WIDTH=150

8.    Satu baris table dinyatakan dengan kode :

          <tr height="20" style="height: 15.0pt;">

          <td class="xl65" height="20" style="border-top: none; height: 15.0pt;">5</td>

          <td class="xl66" style="border-left: none; border-top: none;">Ira </td>

          <td class="xl67" style="border-left: none; border-top: none;">5</td>

          <td class="xl67" style="border-left: none; border-top: none;"></td>

          </tr>

Dimulai dengan <tr …….> dan diakhiri dengan </tr>

Pada dasarnya kode dari sebuah sel adalah <td ……….[PENGATURAN]……… >VALUE/PERNYATAAN</td>.

Kode <td class="xl67" style="border-left: none; border-top: none;"></td> merupakan sel kosong karena value/pernyataannya kosong.

Kode <td class="xl66" style="border-left: none; border-top: none;">Ira </td> merupakan sel yang berisi pernyataan berupa “Ira” karena value/pernyataan yang tersedia memang begitu adanya.

Tag <TR> merupakan pembentuk baris, dan tag <TD> merupakan pembentuk kolom.

Posted in: Internet,Tips