Membuat Spesifikasi Data Menggunakan Tabel HTML

Update Terakhir pada

Assalamualaikum Wr. Wb.

Sahabat Webhozz dimanapun berada, gimana kabarnya???

Semoga sehat selalu ya…

Pada kesempatan kali ini kita akan membuat Spesifikasi data.

Tentunya teman-teman pernah belanja di toko online. Saat melihat daftar produk. Lalu klik salah satu produknya. Maka akan dipindahkan ke sebuah halaman.

Yang mana halaman tersebut adalah halaman yang menampilkan deskripsi produk yang tadi kita pilih.

Nah, disitu ada rinciannya, ada foto produknya, harga produknya berserta deskripsi produknya.

Biasanya, tampilan halaman deskripsi produknya adalah berisi foto produk dengan ukuran yang lebih besar dari ukuran foto di halaman daftar produk. Setelah itu, deskripsi beserta harganya akan tampil tepat di sebelah foto produk.

Oke, kali ini kita akan membuatnya menggunakan tabel.

Seperti apa sih cara pembuatannya, yuk langsung aja.

  1. Seperti biasanya siapkan file htmlnya, dan biasa script dasarnya juga
//=======================
<!DOCTYPE html>
<html>
<head>
	<title>Deskripsi Produk</title>
</head>
<body>

</body>
</html>
//=====================

2. Masukkan kode berikut ini pada tag .

//=======================
<h2>Kemeja Keren</h2>

<table>
	<tr>
		<td>
			<!--untuk gambar produk-->
		</td>
		<td>
			<!--untuk deksripsi produk-->
		</td>
	</tr>
</table>
//=======================

3. Nah, siapkan gambar produknya. Simpan gambarnya satu folder dengan file html. Lalu ketikkan kode berikut untuk panggil gambarnya.

//=======================
<img src="kemeja.png" width="265">
//=======================

4. Kode tersebut, diketik pada kolom tabel yang bertuliskan.

<!--untuk gambar produk-->.

5. Kolom pertama sudah diisi gambar. Nah, untuk kolom kedua, kita isi dengan deskripsi. Berikut ini kodenya.

//========================
<h3>Deskripsi Produk:</h3>
<p>Bahan Fleece, enak dipakai, lembut.</p>
<p>Tersedia ukuran S, M, L, XL, XXL</p>
<p>Pengiriman Via JNE, TIKI, J&amp;T</p>
<p>
	<b>Ongkir:</b>
	<ul>
		<li>Pulau Jawa : Rp 10.000,-</li>
		<li>Luar P. Jawa : Rp 50.000,-</li>
	</ul>
</p>

<h3>Harga Rp. 100.000,-</h3>
//========================

6. Maka beginilah kode secara keseluruhannya.

//========================
<!DOCTYPE html>
<html>
<head>
	<title>Deskripsi Produk</title>
</head>
<body>

	<h2>Kemeja Keren</h2>

	<table>
		<tr>
			<td>
				<!--untuk gambar produk-->
				<img src="kemeja.png" width="265">
			</td>
			<td>
				<!--untuk deksripsi produk-->
				<h3>Deskripsi Produk:</h3>
				<p>Bahan Fleece, enak dipakai, lembut.</p>
				<p>Tersedia ukuran S, M, L, XL, XXL</p>
				<p>Pengiriman Via JNE, TIKI, J&amp;T</p>
				<p>
					<b>Ongkir:</b>
					<ul>
						<li>Pulau Jawa : Rp 10.000,-</li>
						<li>Luar P. Jawa : Rp 50.000,-</li>
					</ul>
				</p>

				<h3>Harga Rp. 100.000,-</h3>
			</td>
		</tr>
	</table>

</body>
</html>
//========================

7. Ini adalah hasilnya jika dijalankan pada browser.