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:

---