Senin, 12 Oktober 2015
Fungsi atau kegunaan dari kedua ini, adalah
untuk menyatukan, tabel, tapi tiap atribut ini memiliki fungsi tersendiri,
yaitu
1. Atribut rowspan berfungsi untuk menggabungkan antar baris kolom
dalam tabel html.
2. Atribut colspan berfungsi untuk menggabungkan antar kolom
dalam tabel html
Supaya bisa lebih mengerti, langsung saja ke contoh
penggunaannya, berikut ini.
Terlebih dahulu perhatikan tag
HTML untuk membuat Tabel dua baris tiga kolom:
Contoh:
1. Membuat Tabel 3 kolom 2 baris
<html>
<head>
<title>Menampilkan Tabel</title>
<body>
<table border="1">
1. Membuat Tabel 3 kolom 2 baris
<html>
<head>
<title>Menampilkan Tabel</title>
<body>
<table border="1">
<!...baris ke 1...>
<tr>
<td>Kolom 1 Baris ke 1</td> <!...menampilkan kolom ke 1 dari baris ke 1...>
<td>Kolom 2 Baris ke 1</td> <!...menampilkan kolom ke 2 dari baris ke 1...>
<td>Kolom 3 Baris ke 1</td> <!...menampilkan kolom ke 3 dari baris ke 1...>
</tr>
<tr>
<td>Kolom 1 Baris ke 1</td> <!...menampilkan kolom ke 1 dari baris ke 1...>
<td>Kolom 2 Baris ke 1</td> <!...menampilkan kolom ke 2 dari baris ke 1...>
<td>Kolom 3 Baris ke 1</td> <!...menampilkan kolom ke 3 dari baris ke 1...>
</tr>
<!...baris ke 2...>
<tr>
<td>Kolom 1 Baris ke 2</td> <!...menampilkan kolom ke 1 dari baris ke 2...>
<td>Kolom 2 Baris ke 2</td> <!...menampilkan kolom ke 2 dari baris ke 2...>
<td>Kolom 3 Baris ke 2</td> <!...menampilkan kolom ke 3 dari baris ke 2...>
</tr>
</tble>
</body>
</head<
</html>
<td>Kolom 1 Baris ke 2</td> <!...menampilkan kolom ke 1 dari baris ke 2...>
<td>Kolom 2 Baris ke 2</td> <!...menampilkan kolom ke 2 dari baris ke 2...>
<td>Kolom 3 Baris ke 2</td> <!...menampilkan kolom ke 3 dari baris ke 2...>
</tr>
</tble>
</body>
</head<
</html>
Jika ditampilkan melalui
Browser:
|
Kolom 1 Baris ke 1
|
Kolom 2 Baris ke 1
|
Kolom 3 Baris ke 1
|
|
Kolom 1 Baris ke 2
|
Kolom 2 Baris ke 2
|
Kolom 3 Baris ke 2
|
Nah, dari tag-tag diatas
selanjutnya kita masuk ke materi, yaitu Colspan dan Rowspan.
Apa itu Colspan? Apa itu Rowspan?
Colspan dan Rowspan merupakan atribut HTML yang fungsinya untuk menggabungkan beberapa kolom (colspan) atau beberapa baris (rowspan) menjadi satu. Misalnya menggabungkan dua kolom menjadi satu. Atau menggabungkan dua baris menjadi satu, dan seterusnya. Dalam aplikasi Microsoft Word atribut HTML ini sama fungsinya dengan Tool Merge Center.
Colspan dan Rowspan merupakan atribut HTML yang fungsinya untuk menggabungkan beberapa kolom (colspan) atau beberapa baris (rowspan) menjadi satu. Misalnya menggabungkan dua kolom menjadi satu. Atau menggabungkan dua baris menjadi satu, dan seterusnya. Dalam aplikasi Microsoft Word atribut HTML ini sama fungsinya dengan Tool Merge Center.
Tag Colpsan
Colspan merupakan kependekan dari Column span, fungsinya menggabungkan beberapa kolom menjadi satu.
Penulisan tagnya:
Colspan merupakan kependekan dari Column span, fungsinya menggabungkan beberapa kolom menjadi satu.
Penulisan tagnya:
<td colspan=”2″>Text Kolom</td>
Angka 2 menunjukan jumlah kolom
yang digabungkan.
Perharikan contoh dibawah ini:
<table border=”1″>
<tr>
<td colspan=”4″>Gabungan Kolom 1-4 Baris Ke 1</td><!– tag ini mewakili penulisan tag 4 kolom lainnya–>
</tr>
<tr>
<td>Kolom 1 Baris Ke 2</td>
<td>Kolom 2 Baris Ke 2</td>
<td>Kolom 3 Baris Ke 2</td>
<td>Kolom 4 Baris Ke 2</td>
</tr>
</table>
<tr>
<td colspan=”4″>Gabungan Kolom 1-4 Baris Ke 1</td><!– tag ini mewakili penulisan tag 4 kolom lainnya–>
</tr>
<tr>
<td>Kolom 1 Baris Ke 2</td>
<td>Kolom 2 Baris Ke 2</td>
<td>Kolom 3 Baris Ke 2</td>
<td>Kolom 4 Baris Ke 2</td>
</tr>
</table>
Jika ditampilkan dalam browser
maka hasilnya:
|
Gabungan Kolom 1-4 Baris Ke 1
|
|||
|
Kolom 1 Baris Ke 2
|
Kolom 2 Baris Ke 2
|
Kolom 3 Baris Ke 2
|
Kolom 4 Baris Ke 2
|
Tag Rowspan
Rowspan merupakan kependekan dari rows span, fungsinya menggabungkan beberapa baris menjadi satu.
Rowspan merupakan kependekan dari rows span, fungsinya menggabungkan beberapa baris menjadi satu.
Penulisan tagnya:
<td rowspan=”2″>Teks dalam baris</td>
Angka 2 menunjukan jumlah baris
yang digabung.
Perhatikan contoh dibawah ini:
<table border=”1″>
<tr>
<td rowspan=”5″>Gabungan Baris 1-5</td> <!– tag ini mewakili penulisan tag 5 baris lainnya–>
</tr>
<tr>
<td>Baris Ke 2</td>
</tr>
<tr>
<td>Baris Ke 3</td>
</tr>
<tr>
<td>Baris Ke 4</td>
</tr>
<tr>
<td>Baris Ke 5</td>
</tr>
</table>
<tr>
<td rowspan=”5″>Gabungan Baris 1-5</td> <!– tag ini mewakili penulisan tag 5 baris lainnya–>
</tr>
<tr>
<td>Baris Ke 2</td>
</tr>
<tr>
<td>Baris Ke 3</td>
</tr>
<tr>
<td>Baris Ke 4</td>
</tr>
<tr>
<td>Baris Ke 5</td>
</tr>
</table>
Tag diatas jika ditampilkan
dalam browser, maka hasilnya:
|
Gabungan Baris 1-5
|
|
|
Baris Ke 2
|
|
|
Baris Ke 3
|
|
|
Baris Ke 4
|
|
|
Baris Ke 5
|
Bagaimana? Masih pusing tidak?
Mudah-mudahan tidak ya, sebab penjelasannya sudah sangat sederhana. Tapi kalau
masih pusing, silahkan bertanya langsung dan kita diskusikan lagi dengan contoh
dan penjelasan yang mudah-mudahan bisa dipahami.
