Widget edited by super-bee

Laman

12.15.2011

Tag Table Data dan Atributnya

ALIGN
VALIGN
BGCOLOR
COLSPAN
ROWSPAN

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>bunnoichi.blogspot.com</TD>

akan menghasilkan tampilan sebagai berikut :


bunnoichi.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 :

<TABLE>
<TR> <TD WIDTH=200>Belajar</TD> <TD WIDTH=400>Mudah</TD> </TR>
<TR> <TD>Asik</TD> <TD>Menyenangkan</TD> </TR>
<TR> <TD>di</TD> <TD>bunnoichi.blogspot.com</TD>
</TR>

</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 bunnoichi.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 :

<TABLE>
<TR> <TD WIDTH="30%">Belajar</TD> <TD WIDTH="70%">Mudah</TD> </TR>
<TR> <TD>Asik</TD> <TD>Menyenangkan</TD> </TR>
<TR> <TD>di</TD> <TD>bunnoichi.blogspot.com</TD>
</TR>

</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 bunnoichi.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 :

<table>
<tr>
<td> Belajar </td>
<td BGCOLOR=red> HTML </td>
</tr>
<tr>
<td> bersama </td>
<td> bunnoichi.blogspot.com </td>
</tr>
</table>

Hasilnya :

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

<table>
<tr>
<td> Belajar </td>
<td COLSPAN="2"> HTML </td>
<td> mudah </td>
</tr>
<tr>
<td> dan </td>
<td> lengkap </td>
<td> bersama </td>
<td> bunnoichi.blogspot.com </td>
</tr>
</table>

Hasilnya :

Belajar HTML mudah
dan lengkap bersama bunnoichi.blogspot.com

Contoh II:

<table>
<tr>
<td> Belajar </td>
<td COLSPAN="3"> HTML </td>
</tr>
<tr>
<td> mudah dan </td>
<td> lengkap </td>
<td> bersama </td>
<td> bunnoichi.blogspot.com </td>
</tr>
</table>

Hasilnya:

Belajar HTML
mudah dan lengkap bersama bunnoichi.blogspot.com

Contoh III:

<table>
<tr>
<td> Belajar </td>
<td> HTML </td>
<td> mudah dan </td>
<td> lengkap </td>
<td> bersama </td>
</tr>
<tr>
<td COLSPAN="4"> bunnoichi.blogspot.com </td>
</tr>
</table>

Hasilnya:

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

<TABLE>
<TR>
<TD style="text-align:center">Belajar HTML</TD>
<TD ROWSPAN="2" style="text-align:center">mudah dan lengkap</TD>
<TD style="text-align:center">di</TD>
</TR>
<TR>
<TD style="text-align:center">situs</TD>
<TD style="text-align:center">bunnoichi.blogspot.com</TD>
</TR>
</TABLE>

Hasilnya:

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

Contoh II (gabungan COLSPAN dan ROWSPAN):

<TABLE>
<TR>
<TD colspan="4" style="text-align:center">Belajar</TD>
</TR>
<TR>
<TD rowspan="3" style="text-align:center">mudah dan</TD>
<TD style="text-align:center">lengkap</TD>
<TD style="text-align:center">bersama</TD>
<TD rowspan="3" style="text-align:center">bunnoichi.blogspot.com</TD>
</TR>
<TR>
<TD style="text-align:center">bersama</TD>
<TD style="text-align:center">bunnoichi.blogspot.com</TD>
</TR>
<TR>
<TD style="text-align:center">bersama</TD>
<TD style="text-align:center">bunnoichi.blogspot.com</TD>
</TR>
</TABLE>

Hasilnya:

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


Artikel Terkait:

Comments
0 Comments

0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More