Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar.
Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak kesamping” sedangkan rowspan mengartikan “berapa kotak kebawah”.
Contoh Colspan
<table border="1">
<caption>COLSPAN Example</caption>
<tr>
<td colspan="3">Element 1</td>
</tr>
<tr>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
</tr>
</table>
hasilnya :
Contoh Rowspan
<table border="1">
<caption>ROWSPAN Example</caption>
<tr>
<td rowspan="2">Element 1</td>
<td>Element 2</td>
</tr>
<tr>
<td>Element 3</td>
</tr>
</table>
hasilnya :
Ini koding yang saya buat menggunakan notepad :
<html>
<head>
<title>Penggunaan Rowspan</title>
</head>
<body>
<p align="center">
<font color="blue" size="5">
<table border ="1" body bgcolor="black">
<caption><font color="blue" size="3"> Daftar Wilayah Dan kota</font></caption>
<tr>
<td body bgcolor="red" rowspan ="3">Jawa Tengah</td>
<td body bgcolor="orange">Semarang</td>
</tr>
<tr><td body bgcolor="white">Kudus</td></tr>
<tr><td body bgcolor="orange">Solo</td></tr>
<tr>
<td body bgcolor="green" rowspan ="4">Jawa Timur</td>
<td body bgcolor="aqua">Surabaya</td>
</tr>
<tr><td body bgcolor="white">Malang</td></tr>
<tr><td body bgcolor="aqua">Kediri</td></tr>
<tr><td body bgcolor="white">Madiun</td></tr>
</table>
Penggunaan Colspan
<table border="1" body bgcolor="black">
<caption><font color ="blue">Daftar Target</font></caption>
<tr>
<th body bgcolor="cornflowerblue"colspan ="2">Area: Jawa Tengah</th>
</tr>
<tr><td body bgcolor="lightseagreen">Semarang</td><td body bgcolor="white">15.000.000</td></tr>
<tr><td body bgcolor="white">Kudus</td><td body bgcolor="lightseagreen">11.000.000</td></tr>
<tr><td body bgcolor="lightseagreen">Solo</td><td body bgcolor="white">14.000.000</td></tr>
<tr>
<th body bgcolor="cornflowerblue" colspan ="2">Area: Jawa Timur</th>
</tr>
<td body bgcolor="lime">Surabaya</td><td body bgcolor="white">20.000.000</td></tr>
<tr><td body bgcolor="white">Malang</td><td body bgcolor="lime">12.000.000</td</tr>
<tr><td body bgcolor="lime">Kediri</td><td body bgcolor="white">11.000.000</td></tr>
<tr><td body bgcolor="white">Madiun</td><td body bgcolor="lime">13.000.000</td></tr>
</table>
</body>
</html>
Maka hasilnya seperti ini :
Selamat mencoba
0 comments:
Post a Comment