Best Author
sangdedi

743,603
octa

486,235
fitrotinnikm

456,615
idjah

445,157
dwi

313,549
adit

310,096
resta-andara

275,123
benedict

261,583
rahadian

240,910
bara

228,942
nabilalalala

216,882
kurnitap_

154,132
kuswanto

140,175
suranto

100,765
admin

98,982
iwan

80,055
kupukupu

78,106

TD

Tag ini merupakan kepanjangan dari Table Data. Tag ini digunakan beriringan dengan tag <Table ..> dan tag <TR ..>. Tag ini berguna untuk membuat satu sel tabel. Tag ini tidak dapat berdiri sendiri.

<td>KlikBelajar.Com</td>

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 $lt;TD..>. Ukuran yang dapat digunakan adalah pixel dan persen.

<table>
<tbody>
<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>KlikBelajar.Com</td>
</tr>
</tbody>
</table>

Kode diatas akan menghasilkan tabel yang memiliki kolom dengan lebar yang berbeda, yang sebelah kiri memiliki lebar 200 pixel dan yang kanan memiliki lebar 400 pixel.

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.

<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>KlikBelajar.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.

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.

<table>
<tr>
<td>Belajar</td>
<td bgcolor="red">HTML</td>
</tr>
<tr>
<td>bersama</td>
<td>Klikbelajar.com</td>
</tr>
</table>

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>Klikbelajar.com</td>
</tr>
</table>

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>Klikbelajar.com</td>
</tr>
</table>

Contoh III

<table>
<tr>
<td>Belajar</td>
<td>HTML</td>
<td>mudah</td>
<td>dan lengkap</td>
</tr>
<tr>
<td colspan="4">bersama Klikbelajar.com</td>
</tr>
</table>
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 style="text-align: center;" rowspan="2">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;">Klikbelajar.com</td>
</tr>
</table>

Contoh II (Gabungan Rowspan dan Colspan)

<table>
<tr>
<td style="text-align: center;" colspan="4">Belajar</td>
</tr>
<tr>
<td style="text-align: center;" rowspan="3">mudah dan</td>
<td style="text-align: center;">lengkap</td>
<td style="text-align: center;">bersama</td>
<td style="text-align: center;" rowspan="3">Klikbelajar.com</td>
</tr>
<tr>
<td style="text-align: center;">bersama</td>
<td style="text-align: center;">Klikbelajar.com</td>
</tr>
<tr>
<td style="text-align: center;">bersama</td>
<td style="text-align: center;">Klikbelajar.com</td>
</tr>
</table>
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.