ALIGN
VALIGN
BGCOLOR
COLSPAN
ROWSPAN
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:
0 Comments
