Kita hanya perlu menambahkan suatu atribut pada tag <td>, bukan pada tag </td> nya.
Untuk pertama saya akan menjelaskan atribut pertama, yaitu 'colspan'. Colspan digunakan untuk membuat sebuah kolom bergabung dengan kolom yang disebelahnya, yang berada pada satu baris. Efek yang akan terlihat adalah jika tabel mempunyai lebih dari satu baris, tiap baris akan memiliki jumlah kolom yang berbeda. Misal, kita akan membuat tabel dimana di baris pertama ada dua kolom, di baris kedua ada tiga kolom dan di baris ketiga ada satu kolom saja. Yuuu... langsung aja kita lihat kode nya.
-----------------mulai kode html----------------------
<html>
<head><title>Membuat Tabel Dengan Colspan</title></head>
<body>
<table border="1">
<tr>
<td colspan="2">baris pertama kolom satu</td>
<td>baris pertama kolom dua</td>
</tr>
<tr>
<td>baris kedua kolom satu</td>
<td>baris kedua kolom dua</td>
<td>baris kedua kolom tiga</td>
</tr>
<tr>
<td colspan="3">baris ketiga kolom satu</td>
</tr>
</table>
</body>
</html>
-----------------akhir kode html----------------------
supaya lebih mudah melihat hasilnya, kita tambahkan atribut 'border' dengan nilai '1' untuk melihat kolom dan baris dengan jelas.
Seperti yang anda lihat, tabel ini sebenarnya memiliki tiga baris dan tiga kolom pada masing-masing baris. Tapi kita hanya ingin membuat baris dua saja yang memiliki tiga kolom. Sedangkan baris pertama hanya ada dua kolom dan baris tiga satu kolom.
Pada baris pertama dan kolom pertama kita lihat ada atribut 'colspan' dengan nilai '2'. Ini maksudnya menggabungkan '2' kolom menjadi '1' kolom saja. Sedangkan pada baris pertama kolom kedua dibiarkan normal, karena kita ingin baris pertama ada dua kolom.
Pada baris kedua semua dibiarkan normal, karena kita ingin baris kedua memiliki tiga kolom.
Pada baris ketiga hanya ada satu tag <td></td>, tapi nilai 'colspan' nya '3'. Ini maksudnya menggabungkan tiga kolom jadi satu.
Saya beri contoh lagi, supaya lebih ngerti. Pada contoh di bawah kita akan membuat sebuah tabel dengan tiga baris, di mana baris pertama terdiri dari satu kolom, baris kedua terdiri dari tiga kolom dan baris ketiga terdiri dari empat kolom. Berarti patokan kolomnya adalah empat kolom.
-----------------mulai kode html----------------------
<html>
<head><title>Membuat Tabel Dengan Colspan 2</title></head>
<body>
<table border="1">
<tr>
<td colspan="4">baris pertama kolom satu</td>
</tr>
<tr>
<td>baris kedua kolom satu</td>
<td>baris kedua kolom dua</td>
<td colspan="2">baris kedua kolom tiga</td>
</tr>
<tr>
<td>baris ketiga kolom satu</td>
<td>baris ketiga kolom dua</td>
<td>baris ketiga kolom tiga</td>
<td>baris ketiga kolom empat</td>
</tr>
</table>
</body>
</html>
-----------------akhir kode html----------------------
Jadi, kalau ingin membuat tabel dengan colspan yang perlu diperhatikan adalah jumlah kolom terbesar nya berapa. Contoh diatas jumlah kolom terbesar adalah empat. Jadi saat ingin membuat baris pertama yang hanya terdiri dari satu kolom, maka kita hanya membuat satu kolom dengan satu tag <td></td> dan atribut 'colspan' diisi dengan nilai '4' karena ingin menggabungkan '4' kolom menjadi satu kolom.
Sedangkan pada baris kedua kita ingin memiliki tiga kolom saja. Jadi buatlah tiga kolom dengan tiga pasang tag <td></td>. Lalu letakkan atribut 'colspan' pada kolom yang disuka -pada contoh diletakkan pada kolom terakhir- dan isi nilai atribut 'colspan' dengan nilai '2'. Karena kita menggabungkan dua kolom jadi satu.
Hasil nya dapat anda lihat pada gambar ini.
Bagaimana, sudah ngerti? Untuk artikel selanjutnya saya akan menjelaskan bagaimana cara membuat kolom yang mengambil lebih dari satu baris. Sebagai bocoran atribut yang digunakan pada tag <td> adalah 'rowspan'.
Sampai jumpa pada artikel berikutnya...
Kunjungan salam kenal dan baca posting keren, ijin kopy Bos untuk diblog saya, artikelnya bermanfaat untuk pengunjung yang membutuhkan, o iya link sumber anda akan saya letakan dibawah postingan untuk menghargai hasil karya anda, terimakasih dan sukses untuk anda
BalasHapussilahkan, yg penting link sumber jgn dihilangkan. Karena ilmu harus dibagi...
BalasHapus