Tutorial Belajar Colspan di HTML
Sunday, May 14, 2017
Add Comment
Kita dapat merentangkan sebuah sel pada tabel ke samping, sehingga ukurannya setara dengan beberapa kolom.
<table border="1"><tr>
<th>No.</th>
</tr>
<th>Nama</th>
<tr>
<td>1</td>
</tr>
<td>Toni</td>
<td>Haryanto</td>
<tr>
</tr>
<td>2</td>
<td>Kresna</td>
<td>Galuh</td>
</table>
Pada kode di atas jumlah kolom di tiap barisnya ada 3, kecuali baris header tabel. Hal ini akan membuat tampilannya seperti ini:
| No. | Nama | |
|---|---|---|
| 1 | Toni | Haryanto |
| 2 | Kresna | Galuh |
Kolom ketiga tidak memiliki header, padahal kita ingin header Nama digunakan sebagai header untuk kolom kedua dan ketiga di bawahnya. Untuk itu kita dapat menambahkan atribut
colspan pada elemen headernya.<th colspan="2">Nama</th>
Kita merentangkan sel header ini ke samping sebesar 2 sel kolom. sehingga tampilannya akan menjadi seperti ini:
| No. | Nama | |
|---|---|---|
| 1 | Toni | Haryanto |
| 2 | Kresna | Galuh |
PRAKTEK
- Pada editor terdapat contoh kode table data tanggal beberapa hari besar Nasional. Jalankan kode dan lihat tampilan outputnya.
- Kita ingin agar sel header Tanggal digunakan sebagai header untuk kolom ke-1 dan ke-2 di bawahnya. Oleh karena itu, buatlah agar lebar kolom sel Tanggal berukuran dua kolom.
<tr>
<th colspan="2">Tanggal</th>
<th>Hari Besar</th>
</tr>
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>Tanggal</th>
<th>Hari Besar</th>
</tr>
<tr>
<td>Juni</td>
<td>1</td>
<td>Hari Pancasila</td>
</tr>
<tr>
<td>Juni</td>
<td>8</td>
<td>Hari Laut Sedunia</td>
</tr>
<tr>
<td>Juli</td>
<td>12</td>
<td>Hari Koperasi</td>
</tr>
<tr>
<td>Juli</td>
<td>23</td>
<td>Hari Anak Nasional</td>
</tr>
</table>
</body>
</html>
Hasilnya:
| Tanggal | Hari Besar | |
|---|---|---|
| Juni | 1 | Hari Pancasila |
| Juni | 8 | Hari Laut Sedunia |
| Juli | 12 | Hari Koperasi |
| Juli | 23 | Hari Anak Nasional |
0 Response to "Tutorial Belajar Colspan di HTML"
Post a Comment