Tugas 2 - Membuat Tabel HTML
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>
<link rel="stylesheet" href="./main.css" />
</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>
CSS
--------------------------------------
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
margin: 4rem 8rem;
}
th,
td {
padding: 10px;
}
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>
<link rel="stylesheet" href="./main.css" />
</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>
CSS
--------------------------------------
body {
flex-direction: column;
align-items: center;
gap: 4rem;
margin: 4rem 8rem;
}
th,
td {
padding: 10px;
}
.grade {
border-collapse: collapse;
width: 75%;
}
table,
th,
td {
border: 1px solid black;
}
3. Login
HTML
--------------------------------------
CSS
--------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<form>
<h1>Login</h1>
<table class="login">
<tr>
<td style="font-weight: bold">Username:</td>
<td>
<input type="text" name="Username" size="20" />
</td>
</tr>
<tr>
<td style="font-weight: bold">Password:</td>
<td><input type="text" name="Password" size="20" /></td>
</tr>
</table>
<div class="check">
<input type="checkbox" />
<span>Remember me</span>
</div>
<input type="submit" value="Login" />
</form>
</body>
</html>
CSS
--------------------------------------
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
margin: 4rem 8rem;
}
th,
td {
padding: 5px;
}
.login {
border-collapse: collapse;
width: 75%;
}
.login td,
.login {
border: none;
}
table,
th,
td {
border: 1px solid black;
}
form h1 {
margin: 0;
}
body > form {
display: flex;
flex-direction: column;
align-items: start;
gap: 1rem;
width: 40%;
padding: 1rem 1rem;
border: 1px solid black;
}
.check {
display: flex;
}
Komentar
Posting Komentar