Nah disini kita bakal mempelajari materi selanjutnya yaitu roswpan dan cellspan, kurang lebih hal yang bakal sekali sering ditemuin di excel dan spreadsheet buatan microsoft dan google ya, tapi ini versi html nya beserta script code nya. Nah tapi sebelum itu kita mari kita mengenal secara singkat apa fungsi dari 2 hal tersebut.
Nah atribut roswpan itu untuk menggabungkan baris pada tabel sedangkan colspan untuk menggabungkan kolom pada tabel
Kalau begitu harusnya bisa dapat gambaran lah kan ya harusnya bakal kayak gimana, meskipun hal yang rumit kalo harus diketik semuanya dalam bentuk coding tapi merupakan sesuatu hal juga untuk belajar hal baru di HTML.
Langsung aja kali ya ke contoh dari 2 hal tersebut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table HTML Milik Justin</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="5">Data Penjualan</th>
<th>Tanggal</th>
<th>Nama Produk</th>
<th>Harga Produk</th>
<th>Kuantitas Produk</th>
<th>Total Harga</th>
</tr>
<tr>
<td>Senin, 8 Agustus 2022</td>
<td>Buku Tulis</td>
<td>3.500</td>
<td>10</td>
<td>35.000</td>
</tr>
<tr>
<td>Selasa, 9 Agustus 2022</td>
<td>Pensil</td>
<td>1.500</td>
<td>5</td>
<td>7.500</td>
</tr>
<tr>
<td>Rabu, 10 Agustus 2022</td>
<td>Penggaris</td>
<td>5.500</td>
<td>3</td>
<td>16.500</td>
</tr>
<tr>
<td>Kamis, 11 Agustus 2022</td>
<td>Penghapus</td>
<td>500</td>
<td>4</td>
<td>2.000</td>
</tr>
<tr>
<td colspan="4" style="text-align: right;">Total Bayar</td>
<td>64.000</td>
</tr>
</table>
</body>
</html>
| Data Penjualan | Tanggal | Nama Produk | Harga Produk | Kuantitas Produk | Total Harga |
|---|---|---|---|---|---|
| Senin, 8 Agustus 2022 | Buku Tulis | 3.500 | 10 | 35.000 | |
| Selasa, 9 Agustus 2022 | Pensil | 1.500 | 5 | 7.500 | |
| Rabu, 10 Agustus 2022 | Penggaris | 5.500 | 3 | 16.500 | |
| Kamis, 11 Agustus 2022 | Penghapus | 500 | 4 | 2.000 | |
| Total Bayar | 64.000 | ||||
Tags:
HTML
