Pertemuan 2 - Pemrograman Web
Sasmita Wiropati - 5053231016 - RPL - PWEB (M) - GitHub Hosting
Welcome Back
Kali ini, saya diberi penugasan untuk membuat sebuah tabel skor, login form, dan tabel produk menggunakan elemen tabel. Berikut merupkan link dan snapshot dari hasil yang telah saya buat: Link Hasil Website
Ketika menyelesaikan tugas ini, saya mengalami beberapa masalah seperti ini:
- Bagaimana caranya untuk merge row atau pun column?
- Bagaimana caranya menampilkan border sesuai dengan tabel yang diberi dalam soal?
- Bagaimana caranya menaruh teks "Login" pada bagian atas kiri form tanpa kolisi dengan garis border?
- Menggunakan colspan dan rowspan untuk merge dua atau lebih cell.
- Mendeklarasi properti border="1" pada elemen tabel, dan properti css border-collapse: collapse pada tabel, th, dan td.
- Menggunakan properti css pada container teks "Login" yang berada di dalam tabel:
- position: absolute (untuk menaruh teks diatas tabel)
- margin-top: -15px (untuk offset posisi teks)
- background-color: white (untuk menghilangkan garis border tabel)
- max-width: max-content (untuk mencakup lebar teksnya saja)
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pertemuan 2</title>
<link rel="stylesheet" href="./src/style-index-p2.css">
</head>
<body>
<header>
<h1>Tugas Pertemuan 2</h1>
</header>
<main>
<table class="container">
<thead class="table-title">
<th>
<h2 id="score-title">Score Table</h2>
</th>
<th>
<h2 id="login-title">Login Form</h2>
</th>
<th>
<h2 id="product-title">Product Table</h2>
</th>
</thead>
<tbody class="content">
<td class="table1">
<table class="score-table" border="1">
<tr class="heading">
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr class="heading">
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr class="content">
<th>Robby</th>
<th>76</th>
<th>80</th>
<th>81</th>
</tr>
<tr class="content">
<th>Rendi</th>
<th>84</th>
<th>70</th>
<th>75</th>
</tr>
<tr class="content">
<th>Alfian</th>
<th>96</th>
<th>70</th>
<th>71</th>
</tr>
</table>
</td>
<td class="table2">
<table class="login-container">
<tr><td><div class="text-login">Login</div></td></tr>
<tr><td>Username: <input type="text"></td></tr>
<tr><td>Password: <input type="password"></td></tr>
<tr><td><input type="checkbox">Remember me</td></tr>
<tr><td><button>Login</button></td></tr>
</table>
</td>
<td class="table3">
<table class="product-table" border="1">
<tr>
<th colspan="3" class="p-heading">Produk Unggulan</th>
</tr>
<tr>
<td rowspan="3" class="product-image"><img src="./img/p-img.png" alt="p-img" width="150"></image></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>
</td>
</tbody>
</table>
</main>
<footer>
<p> Visit my <a href="../index.html">main website</a>.</p>
</footer>
</body>
</html>
Comments
Post a Comment