Kumpulan Soal lengkap pramuka: Tutorial Colspan & Rowspan Tabel HTML (3)

Halo Sobat Blogger, kembali lagi ditutorial Belajar HTML dan CSS, pada tutorial sebelumnya Tutorial Membuat Tabel Halaman HTML (2) kita belajar membuat Tabel pada halaman HTML, kali ini kita akan kembali membahas tentang tabel, yaitu menggunakan perintah Colspan dan Rowspan.

Colspan dan Rowspan berfungsi untuk menggabungkan kolom, sedangkan Rowspan untuk menggabungkan baris.

Contoh :

1. Pertama buka kembali file index.html.

2. Sisipkan Script berikut ini diantara tag <body> dan </body>.

<h2>Tabel tidak menggunakan Colspan dan Rowspan</h2>
<table border='1'>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
</tr>

<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>

<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
<td>Baris 3 Kolom 3</td>
</tr>
</table>

<br />
<br />

<h1>Tabel dengan Colspan dan Rowspan</h1>
<table border='1'>
<tr>
<td colspan='2'>Gabungan (Baris 1 Kolom 1)<br /> dan (Baris 1 Kolom 2)</td>
<td rowspan='3'>Gabungan (Baris 1 Kolom 3)<br />, (Baris 2 Kolom 3)<br />, dan (Baris 3 Kolom 3)</td>
</tr>

<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>

<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

3. Save/Simpan, kemudian coba buka file index.html tersebut.

Maka Tampilan Halaman HTML Pada Browser Seperti Ini :

Penjelasan :

- Perintah Colspan atau Rowspan diletakkan diantara <td dan > , contoh pada perintah <td colspan='2'> yang artinya elemen tabel yang akan digabungkan ada dua kolom, seperti pada contoh diatas. Elemen Baris 1 Kolom 1 digabungkan dengan Baris 1 Kolom 2.

- Pada script yang sebelumnya berbentuk :

<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
</tr>

setelah diberi perintah Colspan tentu elemen yang digabungkan harus dihilangkan, yaitu elemen Baris 1 Kolom 2 yang telah di gabungkan dengan Baris 1 Kolom 1 maka perubahan script menjadi seperti ini :
<tr>
<td colspan='2'>Gabungan (Baris 1 Kolom 1)<br /> dan (Baris 1 Kolom 2)</td>
<td>Baris 1 Kolom 3</td>
</tr>

- Hal serupa juga dapat kita gunakan pada perintah Rowspan.
- Perintah <br /> berfungsi untuk membuat baris baru / enter pada bahasa markup (HTML).

Demikian tutorial ini Saya buat semoga dapat berguna bagi sobat sekalian.

Kumpulan Soal lengkap pramuka

Senin, 06 Oktober 2014

Tutorial Colspan & Rowspan Tabel HTML (3)

Tidak ada komentar:

Posting Komentar