Trischan Mahdy Arangga
Kelas: Pemrograman Web (M)
NRP: 5053231024
Di post ini, saya akan memberi dokumentasi tugas Pemrograman Web #03 yaitu membuat dua table dengan tampilan berbeda, untuk yang pertama:
Dan untuk tabel yang kedua:
Dan ini source html dan css dari kedua tabel:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="tugas2.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<table class="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>Andi</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>
</div>
<div class="containerlogin">
<form action="" method="post">
<fieldset>
<legend>Login</legend>
<label for="usn">Username:</label>
<input type="text" id="usn" name="usn"><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"><br>
<input type="checkbox" id="chkbx" name="chkbx">
<label for="remember">Remember Me</label><br>
<input type="button" value="Login">
</fieldset>
</form>
</div>
<div class="containerproduk">
<table>
<tr>
<thead>
<th colspan="3">Produk Unggulan</th>
</thead>
</tr>
<tr>
<td rowspan="3"><img src="gambar/benihkode.png" alt=""></td>
<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>
</div>
</body>
</html>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
margin: auto;
}
th {
color: rgb(255, 255, 255);
background-color: rgb(35, 110, 207);
padding-top: 10px;
padding-bottom: 10px;
padding-inline: 50px;
}
td {
padding: 10px;
}
.containerlogin{
display: flex;
margin: auto;
justify-content: center;
width: 50%;
}
.containerlogin fieldset{
width: fit-content;
}
.containerlogin form{
padding: 5%;
}
.containerlogin label,input{
margin-block: 3%;
}
.containerproduk {
padding: 10px;
}
.containerproduk table{
width: fit-content;
border-collapse: separate;
height: fit-content;
}
.containerproduk table, th, td{
border: 1px solid black;
}
.containerproduk th{
background-color: yellow;
color: black;
}
dari kedua tugas tersebut, saya mempelajari banyak tentang tabel mulai dari header, row, column dan akhirnya data-data per-row nya. Saya juga mempelajari tentang merge dengan column dan juga merge dengan row, menggunakan colspan dan juga rowspan.
Tugas dalam page website:
No comments:
Post a Comment