Pertemuan 2 - Membuat Tabel Harga Barang

Cara Membuat Tabel Harga Barang

1. Masukan Kode HTML Berikut ini ke dalam Aplikasi Visual Studio Code, CodeLobster dll

<center><html>
<head>
 <title>Pertemuan -2</title>
 <link rel="stylesheet" text type="text/css" href="../Pertemuan 2/style.css"/>
</head>
<body>

  <center><text><b>* LATIHAN MEMBUAT TABEL <br /> SMK NEGERI 4 JAKARTA *</b></text></center>
  <table border="2">
  <tr>
   <td>NO.</td>
   <td>KODE BARANG</td>
   <td>NAMA BARANG</td>
   <td>QTY</td>
   <td>HARGA SATUAN</td>
   <td>TOTAL</td>
  </tr>
  <tr>
   <td>1.</td>
   <td>KD 001</td>
   <td>PASIR</td>
   <td>1</td>
   <td>RP. 150.000,-</td>
   <td>RP. 150.000,-</td>
  </tr>
  <tr>
   <td>2.</td>
   <td>KD 005</td>
   <td>RUJAK</td>
   <td>2</td>
   <td>RP. 10.000,-</td>
   <td>RP. 20.000,-</td>
  </tr>
  <tr>
   <td>3.</td>
   <td>KD 035</td>
   <td>KUE PASIR</td>
   <td>10</td>
   <td>RP. 1000,-</td>
   <td>RP. 10.000,-</td>
  </tr>
  <tr>
   <td colspan="5" align="right"><b>TOTAL PRICE</b></td>
   <td>RP. 270.000,-</td>
  </tr>
  <tr>
   <td colspan="5" align="right"><b>PPH 2%</b></td>
   <td>RP. 5.400,-</td>
  </tr>
  <tr>
   <td colspan="5" align="right"><b>TOTAL</b></td>
   <td>RP. 275.400,-</td>
  </tr>
 </table>
</body>
</center>
</html>

<br />
<br />
<br />

<html>
<head>
<center> 
<title>Pertemuan 3</title>
 <link rel="stylesheet" text type="text/css" href="../Pertemuan 2/style.css"/>
</head>
<body>

  <table border="2">
  <tr class="form-username">
   <td align="center">NO.</td>
   <td align="center">KODE BARANG</td>
   <td align="center">NAMA BARANG</td>
   <td align="center">QTY</td>
   <td align="center">HARGA SATUAN</td>
   <td align="center">TOTAL</td>
  </tr>
  
  <tr class="form-username">
   <td align="center">1.</td>
   <td align="center">KD 001</td>
   <td align="center">PASIR</td>
   <td align="center">1</td>
   <td align="center">RP. 150.000,-</td>
   <td align="center">RP. 150.000,-</td>
  </tr>
  
  
  <tr class="form-username">
   <td align="center">2.</td>
   <td align="center">KD 005</td>
   <td align="center">RUJAK</td>
   <td align="center">2</td>
   <td align="center">RP. 10.000,-</td>
   <td align="center">RP. 20.000,-</td>
  </tr>
  
  
  <tr class="form-username">
   <td align="center">3.</td>
   <td align="center">KD 035</td>
   <td align="center">KUE PASIR</td>
   <td align="center">10</td>
   <td align="center">RP. 1000,-</td>
   <td align="center">RP. 10.000,-</td>
  </tr>
  
  
  <tr class="form-username">
   <td colspan="5" align="right"><b>TOTAL PRICE</b></td>
   <td align="center">RP. 270.000,-</td>
  </tr>
  
  <tr class="form-username">
   <td colspan="5" align="right"><b>PPH 2%</b></td>
   <td align="center">RP. 5.400,-</td>
  </tr>
  
  
  <tr class="form-username">
   <td colspan="5" align="right"><b>TOTAL</b></td>
   <td align="center">RP. 275.400,-</td>
  </tr>
 </table>
</body>
</center>
</html>

2. Buatlah New File - CSS - Lalu Letakkan File HTML dan CSS dalam satu Folder.

.nomor{
 width: 20px;
 height: 50px;
 margin-left: 8px;
 padding:6px 12px;
   font-size:14px;
 line-height:1.42857143;
 color:#555;
 background-color:#fff;
 background-image:none;
 border:1px solid #ccc;
 border-radius:1px;
 font-size: 18px;
}

.form-nama{
 width: 150px;
 height: 35px;
 margin-left: 8px;
 padding:6px 12px;
   font-size:14px;
 line-height:1.42857143;
 color:#555;
 background-color:#fff;
 background-image:none;
 border:1px solid #ccc;
 border-radius:1px;
 font-size: 18px;
}

.form-username{
 width: 150px;
 height: 50px;
 margin-left: 8px;
 padding:6px 12px;
   font-size:14px;
 line-height:1.42857143;
 color:#555;
 background-color:#fff;
 background-image:none;
 border:1px solid #ccc;
 border-radius:1px;
 font-size: 18px;
}

.price{
 width: 150px;
 height: 50px;
 margin-left: 8px;
 padding:6px 12px;
   font-size:14px;
 line-height:1.42857143;
 color:#555;
 background-color:#fff;
 background-image:none;
 border:1px solid #ccc;
 border-radius:1px;
 font-size: 18px;
}

Pertemuan -2

Screenshoot:

Membuat Tabel Harga Barang ( -CSS )

NO.	KODE BARANG	NAMA BARANG	QTY	HARGA SATUAN	TOTAL
1.	KD 001	PASIR	1	RP. 150.000,-	RP. 150.000,-
2.	KD 005	RUJAK	2	RP. 10.000,-	RP. 20.000,-
3.	KD 035	KUE PASIR	10	RP. 1000,-	RP. 10.000,-
TOTAL PRICE					RP. 270.000,-
PPH 2%					RP. 5.400,-
TOTAL					RP. 275.400,-

Membuat Tabel Harga Barang ( + CSS )

Pertemuan 3

NO.	KODE BARANG	NAMA BARANG	QTY	HARGA SATUAN	TOTAL
1.	KD 001	PASIR	1	RP. 150.000,-	RP. 150.000,-
2.	KD 005	RUJAK	2	RP. 10.000,-	RP. 20.000,-
3.	KD 035	KUE PASIR	10	RP. 1000,-	RP. 10.000,-
TOTAL PRICE					RP. 270.000,-
PPH 2%					RP. 5.400,-
TOTAL					RP. 275.400,-

Share this with short URL: Get Short URL

Pertemuan 2 - Membuat Tabel Harga Barang

Tambahkan Komentar

Popular Posts