Tag Table Data dan Atributnya

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 :

<TD>semogaberkah.blogspot.Com</TD>  


akan menghasilkan tampilan sebagai berikut :

semogaberkah.blogspot.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 :

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>semogaberkah.blogspot.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	semogaberkah.blogspot.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 : 

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>semogaberkah.blogspot.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	semogaberkah.blogspot.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 :

1. <table>  
2.     <tr>  
3. <td> Belajar </td>  
4. <td BGCOLOR=red> HTML </td>  
5. </tr>  
6. <tr>  
7. <td> bersama </td>  
8. <td> semogaberkah.blogspot.com </td>  
9. </tr><  
10. </table>

Hasilnya :

Belajar	HTML
bersama	semogaberkah.blogspot.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:

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>semogaberkah.blogspot.com</TD>  
12. </TR>  
13. </TABLE>

Hasilnya :

Belajar	HTML		mudah
dan	lengkap	bersama	semogaberkah.blogspot.com

Contoh II:

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>semogaberkah.blogspot.com</TD>  
11. </TR>  
12. </TABLE> 

Hasilnya :

Belajar	HTML
mudah dan	lengkap	bersama	semogaberkah.blogspot.com

Contoh III:

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 semogaberkah.blogspot.com</TD>  
10. </TR>  
11. </TABLE>

Hasilnya :

Belajar	HTML	mudah	dan lengkap
bersama semogaberkah.blogspot.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: 

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">semogaberkah.blogspot.com</TD>  
10. </TR>  
11. </TABLE>

Hasilnya :

Belajar HTML	mudah dan lengkap	di
situs		semogaberkah.blogspot.com

Contoh II (gabungan COLSPAN dan ROWSPAN):

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">semogaberkah.blogspot.com</TD>  
10. </TR>  
11. <TR>  
12.      <TD style="text-align:center">bersama</TD>  
13.      <TD style="text-align:center">semogaberkah.blogspot.com</TD>  
14. </TR>  
15. <TR>  
16.      <TD style="text-align:center">bersama</TD>  
17.      <TD style="text-align:center">semogaberkah.blogspot.com</TD>  
18. </TR>  
19. </TABLE>

Hasilnya :

Belajar
mudah dan	lengkap	bersama	semogaberkah.blogspot.com
	bersama	semogaberkah.blogspot.com
	bersama	semogaberkah.blogspot.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.