Colspan & Rowspan HTML

Pelajaran pembuatan table lebih lanjut, yaitu menggunakan Colspan dan rowspan

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

Attribute colspan diletakkan dalam tag <td> dan anda bisa mengatur “value”nya berapa kotak yang akan di span. Berikut saya kasih contohnya:

<table border=”1″>
<tr>
<td colspan=”5″>Gabungan Kotak 1-5</td>
</tr>
<tr>
<td>Kotak 1</td>
<td>Kotak 2</td>
<td>Kotak 3</td>
<td>Kotak 4</td>
<td>Kotak 5</td>
</tr>
</table>

dan hasilnya akan menjadi seperti ini:

Gabungan kotak 1-5

Kotak 1 Kotak 2 Kotak 3 Kotak 4 Kotak 5

Dengan menyetting colspan menjadi “5”, kotak di barisan pertama akan melebar menjadi gabungan dari 5 kolom. Berikut adalah contoh lain untuk pemahaman yang lebih baik:

<table border=”1″>
<tr>
<td colspan=”3″>Kotak 1-3</td>
<td>Kotak A</td>
<td>Kotak B</td>
</tr>
<tr>
<td>Kotak 1</td>
<td>Kotak 2</td>
<td>Kotak 3</td>
<td>Kotak 4</td>
<td>Kotak 5</td>
</tr>
</table>

dan anda bisa lihat di browser, hasilnya akan seperti ini:

Kotak 1-3

Kotak A Kotak B
Kotak 1 Kotak 2 Kotak 3 Kotak 4 Kotak 5

Bagaimana dengan Rowspan?
Rowspan tugasnya untuk menyatukan kotak- kotak row kebawah sehingga menjadi satu unit yang panjang. Contohnya seperti ini:

<table border=”1″>
<tr>
<td rowspan=”5″>Kotak 1-5</td>
<td>Kotak 1</td>
</tr>
<tr>
<td>Kotak 2</td>
</tr>
<tr>
<td>Kotak 3</td>
</tr>
<tr>
<td>Kotak 4</td>
</tr>
<tr>
<td>Kotak 5</td>
</tr>
</table>

dan ini hasilnya pada browser anda:

Kotak 1-5 Kotak 1
Kotak 2
Kotak 3
Kotak 4
Kotak 5

Anda bisa memodifikasi semua perintah-perintah yang ada dihtml terutama mengenai pembuatan table. Kreatifitaslah yang akan memaksimalkan perintah-perintah yang ada di html.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s