belajar html

Tag ini digunakan beriringan dengan tag <Table..> dan tag <TR..>. Tag ini berguna untuk membuat satu sel tabel. Tag ini tidak dapat berdiri sendiri.

Penulisan :

view plaincopy to clipboardprint?
  1.    
  2. <TD>KlikBelajar.Com</TD>  
akan menghasilkan tampilan sebagai berikut :

KlikBelajar.Com
ALIGN
Atribut ini berguna seperti layaknya atribut align pada tag <TR..> yang digunakan untuk menentukan posisi dari setiap isi sel, apakah ingin rata kiri, tengah, atau rata kanan. Bedanya penggunaan atribut ini pada tag <TD..> hanya akan mempengaruhi untuk satu isi sel saja, tidak seperti tag <TR..> yang dapat mempengaruhi satu baris dari tabel.
WIDTH
Atribut ini berguna untuk menentukan lebar dari tag <TD..>. Ukuran yang dapat digunakan adalah pixel dan persen.

Contoh :

view plaincopy to clipboardprint?
  1. <TABLE>  
  2. <TR> <TD WIDTH=200>Belajar</TD> <TD WIDTH=400>Mudah</TD> </TR>  
  3. <TR> <TD>Asik</TD> <TD>Menyenangkan</TD> </TR>  
  4. <TR> <TD>di</TD> <TD>KlikBelajar.Com</TD> </TR>  
  5. </TABLE>  
Akan menghasilkan tabel yang memiliki kolom dengan lebar yang berbeda, yang sebelah kiri memiliki lebar 200 pixel dan yang kanan memiliki lebar 400 pixel.

Belajar Mudah
Asik Menyenangkan
di KlikBelajar.Com
Penggunaan satuan persen pada tag lebih fleksibel dikarenakan penentuan ukurannya berupa persentase yang besar dan kecil ukuran dalam pixel-nya mengikuti besar dan kecil ukuran dari tabel. Misal kita memiliki tabel dengan ukuran 200 pixel.

Contoh :

view plaincopy to clipboardprint?
  1. <TABLE>  
  2. <TR> <TD WIDTH="30%">Belajar</TD> <TD WIDTH="70%">Mudah</TD> </TR>  
  3. <TR> <TD>Asik</TD> <TD>Menyenangkan</TD> </TR>  
  4. <TR> <TD>di</TD> <TD>KlikBelajar.Com</TD> </TR>  
  5. </TABLE>  
Ingat !! Gunakan tanda kutip pada nilai persentase yang dimasukkan.

Tag diatas akan menghasilkan ukuran kolom kiri dari tabel memiliki lebar 30% dari 200 pixel ukuran tabel yaitu sebesar 60 pixel, sedangkan untuk kolom kanannya memiliki lebar sebesar 70% dari 200 pixel atau sebesar 140 pixel. Sehingga perbandingan antara tabel kiri dan kanan akan tetap stabil 3 : 7, meskipun ukuran tabel diubah-ubah.

Hasilnya :

Belajar Mudah
Asik Menyenangkan
di KlikBelajar.Com
BGCOLOR
Sama seperti atribut BGCOLOR pada tag <TABLE..> dan tag <TR..> atribut ini berguna untuk menentukan warna latar dari sel. Bedanya penggunaan atribut BGCOLOR pada tag <TD..> hanya akan mempengaruhi satu sel saja.
Contoh :

view plaincopy to clipboardprint?
  1. <table>  
  2.     <tr>  
  3. <td> Belajar </td>  
  4. <td BGCOLOR=red> HTML </td>  
  5. </tr>  
  6. <tr>  
  7. <td> bersama </td>  
  8. <td> Klikbelajar.com </td>  
  9. </tr><  
  10. </table>  
Hasilnya :

Belajar HTML
bersama Klikbelajar.com
COLSPAN
Atribut ini digunakan untuk menggabungkan dua atau lebih sel dalam baris yang sama. Fungsinya sama seperti penggunaan 'Merge' dalam Microsoft Excel. Untuk lebih jelasnya lihat penggunaannya dalam beberapa contoh berikut ini :
Contoh I:

view plaincopy to clipboardprint?
  1. <TABLE>  
  2. <TR>  
  3.      <TD>Belajar</TD>  
  4.      <TD COLSPAN="2">HTML</TD>  
  5.      <TD>mudah</TD>  
  6.  </TR>  
  7. <TR>  
  8.      <TD>dan</TD>  
  9.      <TD>lengkap</TD>  
  10.      <TD>bersama</TD>  
  11.      <TD>Klikbelajar.com</TD>  
  12. </TR>  
  13. </TABLE>  
Hasilnya :

Belajar HTML mudah
dan lengkap bersama Klikbelajar.com
Contoh II:

view plaincopy to clipboardprint?
  1. <TABLE>  
  2. <TR>  
  3.      <TD>Belajar</TD>  
  4.      <TD COLSPAN="3">HTML</TD>  
  5.  </TR>  
  6. <TR>  
  7.      <TD>mudah dan</TD>  
  8.      <TD>lengkap</TD>  
  9.      <TD>bersama</TD>  
  10.      <TD>Klikbelajar.com</TD>  
  11. </TR>  
  12. </TABLE>  
Hasilnya :

Belajar HTML
mudah dan lengkap bersama Klikbelajar.com
Contoh III:

view plaincopy to clipboardprint?
  1. <TABLE>  
  2. <TR>  
  3.      <TD>Belajar</TD>  
  4.      <TD>HTML</TD>  
  5.      <TD>mudah</TD>  
  6.      <TD>dan lengkap</TD>  
  7.  </TR>  
  8. <TR>  
  9.      <TD COLSPAN="4">bersama Klikbelajar.com</TD>  
  10. </TR>  
  11. </TABLE>  
Hasilnya :

Belajar HTML mudah dan lengkap
bersama Klikbelajar.com
Yang harus diperhatikan untuk membuat colspan yang baik dalam html adalah jumlah setiap gabungan sel dan sisanya dalam setiap baris haruslah sama. Seperti contoh satu, pada baris pertama, terdapat 1 sel yang menggabungkan 2 sel, sementara sisanya yang tidak digabungkan ada 2, sehingga jumlah seluruh sel sebenarnya adalah 2 + 2 = 4, sama seperti baris dibawahnya bukan ? ada 4 sel.
Kemudian pada contoh nomor tiga, pada baris pertama, ada satu sel yang menggabungkan 3 sel, sementara sisa sel yang tidak digabung ada 1, sehingga total sel sebenarnya ada 1 + 3 = 4, sama seperti baris dibawahnya bukan ? ada 4 sel. Hal yang sama berlaku juga pada contoh nomor 3 yaitu 4 + 0 = 4.
ROWSPAN
Penggunaannya sama seperti COLSPAN hanya saja yang digabungkan adalah sel-sel dalam kolom yang sama. Untuk lebih jelas langsung saja melihat contoh-contoh berikut ini :
Contoh I:

view plaincopy to clipboardprint?
  1. <TABLE>  
  2. <TR>  
  3.      <TD  style="text-align:center">Belajar HTML</TD>  
  4.      <TD ROWSPAN="2"  style="text-align:center">mudah dan lengkap</TD>  
  5.      <TD  style="text-align:center">di</TD>  
  6.  </TR>  
  7. <TR>  
  8.      <TD  style="text-align:center">situs</TD>  
  9.      <TD  style="text-align:center">Klikbelajar.com</TD>  
  10. </TR>  
  11. </TABLE>  
Hasilnya :

Belajar HTML mudah dan lengkap di
situs Klikbelajar.com
Contoh II (gabungan COLSPAN dan ROWSPAN):

view plaincopy to clipboardprint?
  1. <TABLE>  
  2. <TR>  
  3.      <TD colspan="4" style="text-align:center">Belajar</TD>  
  4.  </TR>  
  5. <TR>  
  6.      <TD rowspan="3" style="text-align:center">mudah dan</TD>  
  7.      <TD style="text-align:center">lengkap</TD>  
  8.      <TD style="text-align:center">bersama</TD>  
  9.      <TD rowspan="3" style="text-align:center">Klikbelajar.com</TD>  
  10. </TR>  
  11. <TR>  
  12.      <TD style="text-align:center">bersama</TD>  
  13.      <TD style="text-align:center">Klikbelajar.com</TD>  
  14. </TR>  
  15. <TR>  
  16.      <TD style="text-align:center">bersama</TD>  
  17.      <TD style="text-align:center">Klikbelajar.com</TD>  
  18. </TR>  
  19. </TABLE>  
Hasilnya :

Belajar
mudah dan lengkap bersama Klikbelajar.com
bersama Klikbelajar.com
bersama Klikbelajar.com
Untuk membuat ROWSPAN yang baik, hal yang harus diperhatikan ada posisi sel yang di ROWSPAN. Posisi tersebut akan menciptakan sel-sel baru pada baris di bawahnya. Sehingga sel-sel yang akan ditambahkan pada baris di bawahnya harus menyesuaikan dengan jumlah sel pada baris diatasnya. Pada contoh nomor satu, pada baris pertama, terdapat satu sel yang me-ROWSPAN 2 sel. Sedangkan jumlah total sel pada baris pertama ada 3 buah. Artinya, untk membuat tabel yang bagus, pada baris kedua kita cukup menambahkan 2 sel tambahan karena 1 sel telah diciptakan dari hasil ROWSPAN baris sebelumnya.

0 komentar:

terima kasih atas kunjungan anda

http://tugasbloger.blogspot.com/

Langganan: Posting Komentar (Atom)
Copyright © 2016 TUGAS-NGEBLOG