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
Bước 1
Thêm CSS sau vào phần <style amp-custom='amp-custom'> trong mẫu.
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
- tg-bf chữ đậm
- tg-it chữ nghiêng
- tg-left sang trái
- tg-right sang phải
- tg-center giữa
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'>Trong đó:
<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>
- 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
Tags:
Blogspot-AMP