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

Tạo Table trong HTML cho blogspot AMP

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

Publis: 

1 nhận xét

  1. blog ông đây hả? à ông có thể hướng dẫn tạo khung tab comment như blog ông đc ko?
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji