Pertemuan 3
Aisyahra Alhanni Satria
5053231010
Memuat tabel produk dan tabel nilai dengan bahasa HTML
<style>
table {
width: 70%;
border-collapse: collapse;
margin: auto;
border: 1px solid black;
}
th {
background-color: yellow;
text-align: center;
border: 1px solid black;
padding: 5px;
font-weight: bold;
}
td {
border: 1px solid black;
padding: 5px;
}
.img-container {
text-align: center;
padding: 10px;
}
.img-container img {
width: 250px;
height: auto;
}
.fitur-list {
list-style-type: disc;
padding-left: 20px;
}
</style>
<table>
<tr>
<th colspan="3">Produk Unggulan</th>
</tr>
<tr>
<td rowspan="3" class="img-container">
<img src="https://c2c.fp.guinfra.com/file/66c54f275e7df332f4f2622bHpViAci603" alt="Product image">
</td>
<td>Nama</td>
<td>Eidolons Feixiao</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp 3.000.000,00</td>
</tr>
<tr>
<td>Fitur</td>
<td>
<ul class="fitur-list">
<li>Carry overpowered</li>
<li>Ukuran: 31MB</li>
<li>Hiasan layar gadget</li>
<li>Cantik</li>
</ul>
</td>
</tr>
</table>
Hasilnya:
Kemudian adalah kodingan untuk tabel nilai:
<style>
table {
width: 50%;
border-collapse: collapse;
margin: auto;
}
th, td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #0056b3;
color: white;
text-align: center;
}
td {
text-align: left;
}
</style>
<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 align="left" valign="middle">Robby</td>
<td align="left">76</td>
<td align="left">80</td>
<td align="left">81</td>
</tr>
<tr>
<td align="left" valign="middle">Rendi</td>
<td align="left">84</td>
<td align="left">70</td>
<td align="left">75</td>
</tr>
<tr>
<td align="left" valign="middle">Alfian</td>
<td align="left">96</td>
<td align="left">70</td>
<td align="left">71</td>
</tr>
</table>
Dan kemudian ini adalah hasilnya:
Comments
Post a Comment