Tutorial Colspan & Rowspan Tabel HTML (3)

Close
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 :
thumbnail


1. Pertama buka kembali file index.html.

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



<!--Tabel ini tidak menggunakan Colspan dan Rowspan-->
<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 />
<!--Tabel ini menggunakan Colspan dan Rowspan-->
<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 :

Tampilan Tabel Pada webbrowser




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.

Terimakasih telah berkunjung dan membaca artikel di Blog ini. Tinggalkan kritik, saran, dan pertanyaan pada kolom komentar.