Tạo Bảng Responsive 3 Cột Cho Blogger.
Dưới đây mình sẽ share cho các bạn đoạn code tạo bảng số liệu phân chia 3 cột dành cho Blogspot, nếu bạn chuyên về một blog kinh doanh hay tin tức... thì bảng này không thể thiếu trong bài viết của bạn được, nếu bạn thích mẫu này thì các bạn đem về dùng nhé hoặc tự edit CSS lại nha.
Cách sử dụng cũng khá đơn giản:
Bước 1: Chèn Đoạn CSS Này Trên ]]></b:skin> Hoặc Trong Thẻ <style>
.post-body table td, .post-body table caption{border:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #157fca;padding:10px;text-align:left;vertical-align:top;background: linear-gradient(to right, #15CAC9,#1571ca);} .post-body table.tr-caption-container {border:1px solid #eee;} .post-body th{font-weight:700;} .post-body table caption{border:none;font-style:italic;} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;} .post-body td:hover{background:#fefefe;} .post-body th{background:#f50057;color:#fff;} .post-body th:hover{background:#f73278;} .post-body td a{color:#434c5b;} .post-body td a:hover{color:#2196F3;} .post-body table.tr-caption-container td {border:none;padding:8px;} .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;} .post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;} img {max-width:100%;height:auto;border:none;} table {max-width:100%;width:100%;margin:1.5em auto;} table.section-columns td.first.columns-cell{border-left:none} table.section-columns{border:none;table-layout:fixed;width:100%;position:relative} table.columns-2 td.columns-cell{width:50%} table.columns-3 td.columns-cell{width:33.33%} table.columns-4 td.columns-cell{width:25%} table.section-columns td.columns-cell{vertical-align:top} table.tr-caption-container{padding:4px;margin-bottom:.5em} td.tr-caption{font-size:80%} .widget ul {padding:0;}
<table cellpadding="0" cellspacing="0" style="text-align: left;"> Bước 2: Khi Viết Bài Bạn Chuyển Qua Tab HTML Chèn Đoạn Code Phía Dưới Vào Và Edit Text.
<tbody> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> <tr> <td>Text</td> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> <td>Text</td> </tr> <tr> <td> Text</td> <td>Text</td> <td>Text</td> </tr> </tbody> </table>
Bước 3: Lưu Bài Viết Và Hưởng Thụ Thôi.
Table Header 1 | Table Header 2 | Table Header 3 |
---|---|---|
Text | Text | Text |
Text | Text | Text |
Text | Text | Text |
Nhận xét
Đăng nhận xét