Colspan dan Rowspan Dalam HTML

Colspan dan Rowspan Dalam HTML– Biar semuanya jadi lebih paham, posting HTML nya diulang-ulang. Yang kemarin mudah-mudahan anak-anak kelas X MM SMK Nida El-Adabi sudah pada ngerti bagaimana membuat tabel dengan HTML. Penjelasannya sudah disederhanakan. Kalau masih belum ngerti, silahkan “request” aja biar kita bahas lagi dengan penjelasan yang lebih lebih sederhana lagi. Sekarang mari kita simak bagaimana penulisan tag HTML untuk menampilkan rowspan dan colspan pada Tabel. Simak ya!

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">

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

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

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.

Tag Colpsan
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>

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.

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>

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.

4 Responses to “Colspan dan Rowspan Dalam HTML”

  1. makasih informasinya saya jadi bisa tambah mengerti dengan pelajaran html

  2. makasiah informansinya berguna sekali bagi saya yg baru belajar tentang html

Trackbacks

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: