Skip to main content

Contoh Posting Table AMP HTML

Bokingan Hari Biasa
Jenis Kamar Harga Jumlah Kamar Jumlah
Ekonomi Rp. 150.000 5 kamar Rp. 750.000
Standar Rp. 200.000 5 kamar Rp. 1.000.000
Standar AC Rp. 300.000 4 kamar Rp. 1.200.000
VIP/Family Rp. 350.000 1 kamar Rp. 350.000

Tuliskan dalam tampilan HTML

<div class='table-responsive'>
  <table class="table">
    <tr>
      <th colspan="4" class="tg-center tg-bf">Bokingan Hari Biasa</th>
    </tr>
    <tr>
      <td>Jenis Kamar</td>
      <td>Harga</td>
      <td>Jumlah Kamar</td>
      <td>Jumlah</td>
    </tr>
    <tr>
      <td>Ekonomi</td>
      <td>Rp. 150.000</td>
      <td>5 kamar</td>
      <td>Rp. 750.000</td>
    </tr>
    <tr>
      <td>Standar</td>
      <td>Rp. 200.000</td>
      <td>5 kamar</td>
      <td>Rp. 1.000.000</td>
    </tr>
    <tr>
      <td>Standar AC</td>
      <td>Rp. 300.000</td>
      <td>4 kamar</td>
      <td>Rp. 1.200.000</td>
    </tr>
    <tr>
      <td>VIP/Family</td>
      <td>Rp. 350.000</td>
      <td>1 kamar</td>
      <td>Rp. 350.000</td>
    </tr>
  </table>
</div>
Untuk kode class="tg-center tg-bf" silahkan sesuai dengan keperluan untuk mengatur letak header table.

Keterangan: 
tg-bf untuk huruf tebal 
tg-it untuk huruf miring 
tg-left untuk rata kiri 
tg-right untuk rata kanan 
tg-center untuk rata tengah

Atau cara kedua dengan Copy-Paste dari aplikasi Exel yaitu:

Langkah Pertama 
Buatlah table sesuai keinginan dengan aplikasi Excel. Setelah table-nya selesai dibuat, silahkan copy table-nya. 

Langkah Kedua 
Silahkan masuk ke https://www.tablesgenerator.com/html_tables lalu klik menu File dan pilih Paste table data, silahkan paste table yang dicopy dari Excel tadi di kotak yang muncul, lalu klik Load. Kemudian silahkan klik tombol Generate dan centang option Do not generate CSS, lalu klik tombol Copy to clipboard

Langkah Ketiga
Selanjutnya masuk ke editor postingan yang sedang Anda buat lalu paste kode table yang tadi dicopy dari Table Generator di mode HTML. Kemudian silahkan ganti kode <table>
dengan kode berikut:

<div class='table-responsive'>
<table class="table">
Dan jangan lupa tambahkan penutup </div> di bawah penutup </table>

Selesai 

Contohnya sebagai berikut:

Pada metode/tampilan HTML ditulis
<div class="table-responsive">
  <table class="table">
<thead>
  <tr>
    <th colspan="9">Laporan Belanja Material di TB. Sumber Cahaya Waru</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Hari, Tanggal</td>
    <td>Transaksi</td>
    <td>Banyaknya</td>
    <td>Harga</td>
    <td>Debit</td>
    <td>Kredit</td>
    <td>Saldo</td>
    <td>Nama Toko</td>
    <td>Keterangan</td>
  </tr>
  <tr>
    <td>Rabu, 19 Mei&nbsp;&nbsp;&nbsp;2021</td>
    <td>Kas</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td>0</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td>Benang Wol</td>
    <td>1 Pak</td>
    <td>18000</td>
    <td> </td>
    <td>18000</td>
    <td>-18000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Pacul Jowo</td>
    <td>2</td>
    <td>52000</td>
    <td> </td>
    <td>104000</td>
    <td>-122000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Ember Sedang</td>
    <td>8</td>
    <td>9500</td>
    <td> </td>
    <td>76000</td>
    <td>-198000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Ember Kecil</td>
    <td>10</td>
    <td>8000</td>
    <td> </td>
    <td>80000</td>
    <td>-278000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Paku 7 cm</td>
    <td>3 Kg</td>
    <td>16000</td>
    <td> </td>
    <td>48000</td>
    <td>-326000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Paku 5 cm</td>
    <td>3 Kg</td>
    <td>16000</td>
    <td> </td>
    <td>48000</td>
    <td>-374000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td>Sabtu, 22 Mei&nbsp;&nbsp;&nbsp;2021</td>
    <td>Semen</td>
    <td>25</td>
    <td>43000</td>
    <td> </td>
    <td>1075000</td>
    <td>-1449000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Bendrat</td>
    <td>5 Kg</td>
    <td>18000</td>
    <td> </td>
    <td>90000</td>
    <td>-1539000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Sekop Pasir</td>
    <td>1</td>
    <td>50000</td>
    <td> </td>
    <td>50000</td>
    <td>-1589000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Betel</td>
    <td>2</td>
    <td>23000</td>
    <td> </td>
    <td>46000</td>
    <td>-1635000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Triplek 9 mm</td>
    <td>6</td>
    <td>85000</td>
    <td> </td>
    <td>510000</td>
    <td>-2145000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Kayu Usuk 3/5 x 3&nbsp;&nbsp;&nbsp;meter</td>
    <td>15</td>
    <td>33000</td>
    <td> </td>
    <td>495000</td>
    <td>-2640000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Gergaji Kayu</td>
    <td>1</td>
    <td>45000</td>
    <td> </td>
    <td>45000</td>
    <td>-2685000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
  <tr>
    <td> </td>
    <td>Kikir</td>
    <td>1</td>
    <td>15000</td>
    <td> </td>
    <td>15000</td>
    <td>-2700000</td>
    <td>TB. Sumber Cahaya&nbsp;&nbsp;&nbsp;Waru</td>
    <td>Bon (LUNAS)</td>
  </tr>
</tbody>
  </table></div>
Hasilnya sebagai berikut:

Laporan Belanja Material di TB. Sumber Cahaya Waru
Hari, Tanggal Transaksi Banyaknya Harga Debit Kredit Saldo Nama Toko Keterangan
Rabu, 19 Mei   2021 Kas 0
Benang Wol 1 Pak 18000 18000 -18000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Pacul Jowo 2 52000 104000 -122000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Ember Sedang 8 9500 76000 -198000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Ember Kecil 10 8000 80000 -278000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Paku 7 cm 3 Kg 16000 48000 -326000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Paku 5 cm 3 Kg 16000 48000 -374000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Sabtu, 22 Mei   2021 Semen 25 43000 1075000 -1449000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Bendrat 5 Kg 18000 90000 -1539000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Sekop Pasir 1 50000 50000 -1589000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Betel 2 23000 46000 -1635000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Triplek 9 mm 6 85000 510000 -2145000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Kayu Usuk 3/5 x 3   meter 15 33000 495000 -2640000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Gergaji Kayu 1 45000 45000 -2685000 TB. Sumber Cahaya   Waru Bon (LUNAS)
Kikir 1 15000 15000 -2700000 TB. Sumber Cahaya   Waru Bon (LUNAS)
author-photo
" Servant of Allah "
Buka Komentar