Dokumentasi Latihan table Pemrograman Web - week 3
Nama: Geraldo Benjamin Nainggolan
Kelas: Rekayasa Perangkat Lunak
NRP: 5053231014
Pertemuan ini menjelaskan mengenai elemen table dalam HTML.
A. Tabel Mahasiswa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
table{
width: 500px;
height: 170px;
border: black solid 2px;
border-collapse: collapse;
}
thead{
background-color: #086eb1;
}
th, td{
border:1px solid black;
padding-left: 10px;
}
.box {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
<table>
<thead>
<tr>
<th scope="col" rowspan="2">Nama</th>
<th scope="col" colspan="3">Nilai</th>
</tr>
<tr>
<th scope="col">Kimia</th>
<th scope="col">Fisika</th>
<th scope="col">Biologi</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</div>
</body>
</html>
B. Produk Unggulan
Dokumentasi:
<!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>
.box{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
thead{
background-color: yellow;
}
table,th,td{
border: 2px solid black;
}
ul li{
text-align: start;
padding-right: 15px;
}
.image-container {
position: relative;
display: inline-block;
}
.bag {
width: 200px;
display: block;
}
.sword {
width: 60px;
position: absolute;
top: 120px;
right: inherit;
transform: translate(-50%, -50%);
z-index: -1;
}
</style>
</head>
<body>
<div class="box">
<table class="table1">
<thead>
<th scope="col" colspan="3">Produk Unggulan</th>
</thead>
<tbody>
<tr>
<th scope="col" rowspan="3">
<div class="image-container">
<img class="bag" src="Meuble_héraldique_bourse.svg.png" alt="bag" />
<img class="sword" src="./Meuble_Héraldique_épée.svg.png" alt="sword" />
</div>
</th>
<th>Nama</th>
<th style="text-align: left;">Benih Kode</th>
</tr>
<tr>
<th>Harga</th>
<th style="text-align: left;">Rp 192.000</th>
</tr>
<tr>
<th>Fitur</th>
<th>
<ul>
<li>Dilengkapi Dokumentasi</li>
<li>Ukuran: 31MB</li>
<li>Masa Tanam: 6 Bulan</li>
<li>Lisensi: MIT</li>
</ul>
</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Comments
Post a Comment