Menggabungkan Sel-sel pada Tabel di html
(spanning)
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.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Pembuatan Tabel Sederhana</title>
</head>
<body>
<h1>Contoh Tabel Sederhana Merge Cell</h1>
<table border="1">
<caption>Contoh judul tabel</caption>
<tr>
<td rowspan="2">No</td>
<td rowspan="2">Nama</td>
<td colspan="2" align="center">Data Lengkap</td>
</tr>
<tr>
<td>Homepage</td>
<td>Penulis</td>
</tr>
<tr>
<td>1</td>
<td>Bahasaweb.com</td>
<td>https://bahasaweb.com/</td>
<td>Aris Munandar</td>
</tr>
<tr>
<td>2</td>
<td>Bahasaweb.com</td>
<td>https://bahasaweb.com/</td>
<td>Budi Santoso</td>
</tr>
</table>
</body>
</html>
Dari contoh di atas seharusnya tampil seperti gambar dibawah ini.
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.
Tidak ada komentar:
Posting Komentar