Tạo Table trong HTML cho blogspot AMP

Dưới đây là hướng dẫn tạo Table trong phần trình bầy bài viết của các mẫu AMP của blogspot mà không bị lỗi khi kiểm tra AMP bằng công cụ của Google.

Muốn tạo được table như nói ở trên các bạn cần thực hiện các bước như sau

DEMO

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

Bước 1
Thêm CSS sau vào phần <style amp-custom='amp-custom'> trong mẫu.

.table-responsive{min-height:.01%;overflow-x:auto} .table{width:100%;border-collapse:collapse;border-spacing:0} .table td,.table th{background-color:#F3F5EF;border:1px solid #bbb;color:#333;font-family:sans-serif;font-size:100%;padding:10px;vertical-align:top} .table tr:nth-child(even) td{background-color:#F0F0E5} .table th{background-color:#EAE2CF;color:#333;font-size:110%} .table tr.even:hover td,.table tr:hover td{color:#222;background-color:#FFFBEF} .tg-bf{font-weight:700} .tg-it{font-style:italic} .tg-left{text-align:left} .tg-right{text-align:right} .tg-center{text-align:center} @media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar} .table-responsive>.table{margin-bottom:0} .table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap} }

Bước 2
Khi viết bài bạn check bên HTML của phần soạn thảo và sử dụng code sau

<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>

Trong đó:
- tg-bf chữ đậm
- tg-it chữ nghiêng
- tg-left sang trái
- tg-right sang phải
- tg-center giữa

Nguồn:AMP-Blogger