Tutorial Belajar Rowspan di HTML
Sunday, May 14, 2017
Add Comment
Kita juga dapat merentangkan sebuah sel pada tabel ke bawah, sehingga tingginya setara dengan beberapa baris.
<table border="1"><tr>
<th>Language</th>
<th>Framework</th>
<td>PHP</td>
</tr>
<tr>
<tr>
<td>Laravel</td>
</tr>
<td>CodeIgniter</td>
<td>PHP</td>
</tr>
<tr>
</tr>
<td>Ruby</td>
<td>Ruby on Rails</td>
<tr>
</table>
<td>Ruby</td>
<td>Sinatra</td>
</tr>
Kode table di atas akan ditampilkan seperti ini:
| Language | Framework |
|---|---|
| PHP | Laravel |
| PHP | CodeIgniter |
| Ruby | Ruby on Rails |
| Ruby | Sinatra |
Kita dapat menggabungkan beberapa sel yang memiliki nilai yang sama seperti sel PHP dan Ruby di atas, dengan cara menambahkan atribut
rowspan pada sel yang ingin direntangkan ke bawah:
<table border="1"><tr>
<th>Language</th>
<th>Framework</th>
<td rowspan="2">PHP</td>
</tr>
<tr>
<tr>
<td>Laravel</td>
</tr>
<tr>
<td>CodeIgniter</td>
</tr>
<td>Ruby on Rails</td>
<td rowspan="2">Ruby</td>
</tr>
<tr>
</table>
<td>Sinatra</td>
</tr>
Kode di atas akan tampil seperti ini:
| Language | Framework |
|---|---|
| PHP | Laravel |
| CodeIgniter | |
| Ruby | Ruby on Rails |
| Sinatra |
Perhatikan baris tabel ke-3 dan ke-5, kita tidak perlu lagi mendefinisikan kolom pertama, karena area kolom sudah digunakan oleh kolom di baris di atasnya.
PRAKTEK
- Pada editor terdapat kode table dari praktek sebelumnya. Kita ingin agar baris pada sel yang berisi bulan dibuat menjadi satu sel. Gunakan atribut
rowspanuntuk menggabung baris dari sel bulan yang sama.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">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 Rowspan di HTML"
Post a Comment