Trang trí Bảng (Table) HTML bằng CSS cho Blogger

Customize HTML Tables using CSS

Trong bài này chúng tôi sẽ chia sẻ một mã CSS nhỏ về tùy biến các bảng HTML. Mặc định bảng HTML là rất xấu nhưng bạn có thể dễ dàng tùy chỉnh các bảng xấu xí đó thành những bảng tuyệt đẹp với mã này CSS nhỏ. Nó là rất dễ dàng để hiểu mã này, bạn có thể thay đổi mã theo nhu cầu riêng của bạn.

HTML Tables trước khi chỉnh sửa CSS

Dưới đây là ảnh chụp màn hình của bảng HTML mặc định mà không cần bất kỳ tùy chỉnh CSS nào. Những bảng này trông rất buồn tẻ. Nếu bạn sử dụng các bảng trong trang web chắc chắn sẽ làm hỏng thiết kế của trang web của bạn.

HTML Tables sau khi chỉnh sửa CSS

Dưới đây là ảnh chụp màn hình của bảng HTML sau tùy chỉnh CSS. Bây giờ bạn có thể thấy rõ sự khác biệt giữa các mặc định và tùy chỉnh thiết kế. Bạn có thể dễ dàng thay đổi màu sắc của bảng thiết kế theo sự lựa chọn của riêng bạn.

CSS code

1Để trang trí table đầu tiên bạn hãy vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

/* Post Table */
.post-body table {width:100%;}
.post-body table td,.post-body table caption{background:#fff;border:1px solid rgba(0,0,0,0.05);padding:10px;text-align:left;vertical-align:top}
.post-body table th{background:#e74c3c;color:#fff;border:1px solid rgba(0,0,0,0.05);border-bottom:0;padding:10px;text-align:left;vertical-align:top}
.post-body table.tr-caption-container {border:1px solid rgba(0,0,0,0.14);margin:0;}
.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 #97b28e;}
.post-body th{}
.post-body th:hover{color:#fff;}
.post-body td a{color:#444;}
.post-body td a:hover{color:#cf4d35;}
.post-body table.tr-caption-container td{border:0;padding:8px;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body li {list-style-type:square;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px!important;}
.sr {visibility:hidden;width:0;height:0;}
.clear{clear:both}
html {-webkit-font-smoothing:antialiased;}
::selection {background:#effdca;text-shadow:none;}

HTML code

2Khi viết bài bạn hãy chuyển sang tab HTML và tạo bảng theo cú pháp sau

 <table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table> 

Kết quả:

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by dapinder/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm