Pada kesempatan kali ini saya akan membagikan informasi ringan di minggu sore yang syahdu ini hehe.. Saya akan membagikan informasi mengenai fungsi colspan dan rowspan, mungkin kita pernah mendengarnya namun untuk apa? Berikut saya ulas secara mudah
Pertama Colspan merupakan pengaturan colom pada tabel. Untuk lebih jelasnya perhatikan berikut :
Script 1 :
<table border="1">
<tr>
<td colspan="4" align="center">Gabungan Kolom 1-4</td>
</tr>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>
</table>
Maka hasilnya akan seperti
Script 2 :
<table border="1">
<tr>
<td colspan="2" align="center">Gabungan Kolom 1-4</td>
<td align="center">Kotak 1</td>
<td align="center">Kotak 2</td>
</tr>
<tr align="center">
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>
</table>
Maka hasilnya akan seperti
Dan untuk selanjutnya adalah rowspan. Hampir sama seperti colspan, namun pada rowspan kita akan mengatur fungsi baris.
Script 1 :
<table border="1">
<tr>
<td rowspan="4" align="center">Gabungan Kolom 1-4</td>
<td>Kolom 1</td>
</tr>
<tr>
<td>Kolom 2</td>
</tr>
<tr>
<td>Kolom 3</td>
</tr>
<tr>
<td>Kolom 4</td>
</tr>
</table>
Maka hasinya akan seperti
Script 2 :
<table border="1">
<tr>
<td rowspan="2" align="center">Gabungan Kolom 1-4</td>
<td>Kolom 1</td>
</tr>
<tr>
<td>Kolom 2</td>
</tr>
<tr>
<td>Kolom 3</td>
<td>Kolom 3</td>
</tr>
<tr>
<td>Kolom 4</td>
<td>Kolom 3</td>
</tr>
</table>
Maka hasilnya akan seperti
Sekian informasi yang bisa saya sampaikan, semoga bermanfaat. Terus kembangkan hal-hal seperti ini terlihat mudah namun rumit jika tidak dilatih.
Great Day!!!!
0 komentar:
Posting Komentar