Tugas 3 - Latihan Membuat Tabel
Tugas 2
Membuat Tabel HTML
Muammar Bahalwan | 5053231020 | RPL
1. Tabel Produk
 |
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
margin: 4rem 8rem;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3" bgcolor="yellow">Produk Unggulan</th>
</tr>
<tr>
<td rowspan="4">
<img
src="https://png.pngtree.com/png-clipart/20231230/original/pngtree
-illustration-of-sprouting-seeds-vector-png-image_13975569.png"
width="200"
/>
</td>
</tr>
<tr>
<td>Nama</td>
<td>Benih Kode</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp 192.000</td>
</tr>
<tr>
<td>Fitur</td>
<td>
<ul>
<li>Dilengkapi Dokumentasi</li>
<li>Ukuran: 31MB</li>
<li>Masa Tanam: 6 Bulan</li>
<li>Lisensi: MIT</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
2. Tabel Penilaian
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
margin: 4rem 8rem;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<table class="grade">
<tr bgcolor="#136eaa" style="color: white">
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr bgcolor="#136eaa" style="color: white">
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Robby</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
</body>
</html>
Komentar
Posting Komentar