Tabel Dengan Spanning

Tabel Dengan Spanning

Dalam tutorial belajar tabel HTML kali ini kita akan membahas tentang spanning atau menggabungkan baris/kolom.
Spanning tabel HTML artinya adalah menyatukan atau menggabungkan beberapa kolom atau baris dalam sebuah tabel. Untuk melakukan spanning, kita memerlukan parameter rowspan dan colspan.
Berikut ini contoh kodenya.

<table border="1">

<tr>

<th>Judul Kolom 1</th>

<th>Judul Kolom 2</th>

<th>Judul Kolom 3</th>

</tr>

<tr><td rowspan="2">Baris 1 Kolom 1</td>

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

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

<tr><td colspan="3">Baris 3 Kolom 1</td></tr>

</table>

Dalam contoh kode di atas, kita juga melihat ada sebuah tag tabel HTML baru yaitu <th>. Tag <th> ini gunanya adalah untuk membuat judul kolom. Biasanya judul kolom ini akan dibuat dengan tulisan yang tebal.
Parameter untuk spanning kita letakkan dalam tag <td>. Untuk menyatukan 2 baris dalam sebuah tabel HTML, kita menggunakan parameter rowspan. Sedangkan untuk menyatukan 2 kolom dalam sebuah tabel HTML, kita menggunakan colspan.

Jika anda menginputkan syntax diatas dengan benar, Maka nanti hasilnya adalah sebagai berikut :

Judul Kolom 1	Judul Kolom 2	Judul Kolom 3
Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
	Baris 2 Kolom 2	Baris 2 Kolom 3
Baris 3 Kolom 1

Share :

Tweet

✚

Related Post