Sponsor Ads   X  
Sponsor Ads   X  

25/03/2010

TABEL HTML BAGIAN AKHIR

Tag <td>

Melanjutkan dan melengkapi dari dua posting sebelumnya, TABEL HTML membahas tag <table> dan TABEL HTML II membahas tag <tr>, maka kali ini giliran tag <td>.

Tag <td> ini dapat disisipi dengan beberapa atribut yang terdapat pada tag <table> maupun pada tag <tr>. Yaitu antara lain, "bgcolor", "width", "align", ataupun "valign".
Selain daripada itu, atribut yang dapat digunakan adalah:

colspan
Untuk menggabungkan beberapa sel pada satu baris yang sama, dalam sebuah tabel yang memiliki lebih dari satu baris.
rowspan
Untuk menggabungkan beberapa sel pada satu kolom, dalam sebuah tabel yang terdiri dari banyak baris dan sel.

Mulai dengan contoh.
Contoh pertama adalah bagaimana membuat lebih dari satu baris dan sel dalam sebuah tabel.

Jika ditulis:
<table border="1" width="360px" cellpadding="5px">
<tr align="center">
<td width="20%">Simpati</td>
<td width="20%">As</td>
<td width="20%">Mentari</td>
<td width="20%">IM3</td>
<td width="20%">Axis</td>
</tr>
<tr align="center">
<td>Bebas</td>
<td>Jempol</td>
<td>3(three)</td>
<td>???</td>
<td>???</td>
</tr>
<tr align="center">
<td>Flexi</td>
<td>Esia</td>
<td>Fren</td>
<td>Hepi</td>
<td>Smart</td>
</tr>
<tr align="center">
<td>Star One</td>
<td>???</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</table>

Hasilnya adalah:
Simpati As Mentari IM3 Axis
Bebas Jempol 3(three) ??? ???
Flexi Esia Fren Hepi Smart
Star One ??? ??? ??? ???

Perhatikan juga, lebar sel(<td>) yang juga bisa diatur dengan atribut "width" untuk tag <td> pada baris(<tr>) pertama saja.

Colspan

Contoh dengan "colspan "
Jika ditulis:
<table border="1" width="360px" cellpadding="5px">
<tr align="center">
<td colspan="5" bgcolor="red">Operator Selular</td>
</tr>
<tr align="center">
<td width="20%">Simpati</td>
<td width="20%">As</td>
<td width="20%">Mentari</td>
<td width="20%">IM3</td>
<td width="20%">Axis</td>
</tr>
<tr align="center">
<td>Bebas</td>
<td>Jempol</td>
<td>3(three)</td>
<td>???</td>
<td>???</td>
</tr>
<tr align="center">
<td>Flexi</td>
<td>Esia</td>
<td>Fren</td>
<td>Hepi</td>
<td>Smart</td>
</tr>
<tr align="center">
<td>Star One</td>
<td>???</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</table>

Hasilnya adalah:
Operator Selular
Simpati As Mentari IM3 Axis
Bebas Jempol 3(three) ??? ???
Flexi Esia Fren Hepi Smart
Star One ??? ??? ??? ???
Lihat dan perhatikan juga pada baris pertama, tag <td> juga dapat disisipi dengan atribut "bgcolor"

Rowspan

Contoh dengan "rowspan "
Jika ditulis:
<table border="1" width="360px" cellpadding="5px">
<tr align="center">
<td rowspan="2" width="10%">GSM</td>
<td width="18%">Simpati</td>
<td width="18%">As</td>
<td width="18%">Mentari</td>
<td width="18%">IM3</td>
<td width="18%">Axis</td>
</tr>
<tr align="center">
<td>Bebas</td>
<td>Jempol</td>
<td>3(Three)</td>
<td>???</td>
<td>???</td>
</tr>
<tr align="center">
<td rowspan="2">CDMA</td>
<td>Flexi</td>
<td>Esia</td>
<td>Fren</td>
<td>Hepi</td>
<td>Smart</td>
</tr>
<tr align="center">
<td>Star One</td>
<td>???</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</table>
Hasilnya adalah:
GSM Simpati As Mentari IM3 Axis
Bebas Jempol 3(Three) ??? ???
CDMA Flexi Esia Fren Hepi Smart
Star One ??? ??? ??? ???

Untuk lebih memaksimalkan tabel seperti pada contoh diatas, gunakan atribut colspan dan rowspan secara bersamaan.

Contoh:

Jika ditulis:
<table border="1" width="360px" cellpadding="5px">
<tr align="center">
<td colspan="6">Operator Selular</td>
</tr>
<tr align="center">
<td rowspan="2" width="10%">GSM</td>
<td width="18%">Simpati</td>
<td width="18%">As</td>
<td width="18%">Mentari</td>
<td width="18%">IM3</td>
<td width="18%">Axis</td>
</tr>
<tr align="center">
<td>Bebas</td>
<td>Jempol</td>
<td>3(Three)</td>
<td>???</td>
<td>???</td>
</tr>
<tr align="center">
<td rowspan="2">CDMA</td>
<td>Flexi</td>
<td>Esia</td>
<td>Fren</td>
<td>Hepi</td>
<td>Smart</td>
</tr>
<tr align="center">
<td>Star One</td>
<td>???</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</table>

Hasilnya adalah:
Operator Selular
GSM Simpati As Mentari IM3 Axis
Bebas Jempol 3(Three) ??? ???
CDMA Flexi Esia Fren Hepi Smart
Star One ??? ??? ??? ???



Sebelumnya | Berikutnya


Silahkan baca juga yang ini:

0 comments:

Tinggalkan Komentar Anda

Terimakasih telah berkunjung, untuk kritik, saran, ataupun pertanyaan, silahkan berikan komentar anda disini:

 
Halaman Muka | Tentang | Kontak | Sitemap | 2008- © kakangsung All Rights Reserved