<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Tabel Data Barang</title>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: auto;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
img {
width: 100px;
}
</style>
</head>
<body>
<h2 style="text-align:center;">Tabel Data Barang</h2>
<table>
<tr>
<th>Kode Barang</th>
<th>Nama Barang</th>
<th>Harga</th>
<th>Gambar</th>
</tr>
<tr>
<td>B001</td>
<td>Laptop</td>
<td>Rp 8.000.000</td>
<td>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/MacBook_Pro_16-inch.png" alt="Laptop">
</td>
</tr>
<tr>
<td>B002</td>
<td>Handphone</td>
<td>Rp 3.000.000</td>
<td>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f1/IPhone_14_Pro.png" alt="Handphone">
</td>
</tr>
<tr>
<td>B003</td>
<td>Mouse</td>
<td>Rp 150.000</td>
<td>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Computer_mouse.jpg" alt="Mouse">
</td>
</tr>
</table>
</body>
</html>
Versi full HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Tabel Data Barang</title>
</head>
<body>
<h2 align="center">Tabel Data Barang</h2>
<table border="1" width="80%" align="center" cellpadding="10" cellspacing="0">
<tr>
<th>Kode Barang</th>
<th>Nama Barang</th>
<th>Harga</th>
<th>Gambar</th>
</tr>
<tr>
<td align="center">B001</td>
<td align="center">Laptop</td>
<td align="center">Rp 8.000.000</td>
<td align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/MacBook_Pro_16-inch.png" width="100" alt="Laptop">
</td>
</tr>
<tr>
<td align="center">B002</td>
<td align="center">Handphone</td>
<td align="center">Rp 3.000.000</td>
<td align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f1/IPhone_14_Pro.png" width="100" alt="Handphone">
</td>
</tr>
<tr>
<td align="center">B003</td>
<td align="center">Mouse</td>
<td align="center">Rp 150.000</td>
<td align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Computer_mouse.jpg" width="100" alt="Mouse">
</td>
</tr>
</table>
</body>
</html>
Yang lain lagi
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Tabel Data Barang</title>
</head>
<body>
<h2 align="center">Tabel Data Barang</h2>
<table border="1" width="80%" align="center" cellpadding="10" cellspacing="0">
<tr bgcolor="blue">
<th><font color="white">Kode Barang</font></th>
<th><font color="white">Nama Barang</font></th>
<th><font color="white">Harga</font></th>
<th><font color="white">Gambar</font></th>
</tr>
<tr>
<td align="center">B001</td>
<td align="center">Laptop</td>
<td align="center">Rp 8.000.000</td>
<td align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/MacBook_Pro_16-inch.png" width="100">
</td>
</tr>
<tr>
<td align="center">B002</td>
<td align="center">Handphone</td>
<td align="center">Rp 3.000.000</td>
<td align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f1/IPhone_14_Pro.png" width="100">
</td>
</tr>
<tr>
<td align="center">B003</td>
<td align="center">Mouse</td>
<td align="center">Rp 150.000</td>
<td align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Computer_mouse.jpg" width="100">
</td>
</tr>
</table>
</body>
</html>
Tidak ada komentar:
Posting Komentar