Tugas PWeb 2
Tugas 2 Tabel HTML
Nama : Muhammad Tabah Pristiawan
NRP : 5053231019
Rekayasa Perangkat Lunak
Github : code
- Tabel
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 50%;
border-collapse: collapse;
margin: auto;
}
th, td {
padding: 8px 12px;
border: 1px solid #000;
}
th {
background-color: #0059b9;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<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>
2. Login
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Login</title>
<style>
body {
font-family: Arial, sans-serif;
}
.login-box {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
margin: 50px auto;
}
.login-box h2 {
margin-bottom: 20px;
}
.login-box label {
display: block;
margin-bottom: 5px;
}
.login-box input[type="text"],
.login-box input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-box input[type="checkbox"] {
margin-right: 5px;
}
.login-box input[type="submit"] {
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.login-box input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form action="/login" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="petanikode" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" value="password" required>
<input type="checkbox" id="remember" name="remember">
<label for="remember">Remember me</label><br><br>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
3. Tabel Produk
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 400px;
border-collapse: collapse;
margin: 20px auto;
border: 1px solid #000;
}
th {
background-color: yellow;
text-align: center;
padding: 8px;
font-size: 18px;
}
td {
border: 1px solid #000;
padding: 10px;
vertical-align: top;
}
.fitur ul {
list-style-type: disc;
padding-left: 20px;
}
.gambar {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Produk Unggulan</th>
</tr>
<tr>
<td class="gambar">
<img src="kantong.jpg">
</td>
<td>
<table>
<tr>
<td>Nama</td>
<td>Benih Kode</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp 192.000</td>
</tr>
<tr>
<td>Fitur</td>
<td class="fitur">
<ul>
<li>Dilengkapi Dokumentasi</li>
<li>Ukuran: 31MB</li>
<li>Masa Tanam: 6 Bulan</li>
<li>Lisensi: MIT</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Komentar
Posting Komentar