Cách Tạo Bảng Blogger Trên Bài Viết

 Xin chào tất cả các bạn hôm nay mình sẽ hướng dẫn các bạn tạo bảng blogger đơn giản không thua kém gì với plugin wordpress. Tuy đơn giản nhưng rất hiệu quả.

Cách Tạo Bảng Blogger Trên Bài Viết

1.Chuyển sang chế độ HTLM và dán vào bài viết mình muốn tạo

<table>   <tr>  

<td> Văn bản 1 </td>  

<td> Văn bản 2 </td>

</tr>   <tr>  

 <td> Văn bản A </td>  

<td> Văn bản B </td>

 </tr> </table>

2.Tạo một bảng trong Blogspot với HTML và CSS3

a. Đầu tiên Đăng nhập vào Blogger

b. Ở menu bên trái chọn Chủ đề ⇒ Chọn Chỉnh sửa HTML

c. Thêm mã dưới đây vào trước thẻ ]]></b:skin>


table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;}

table img{width: 100%;height: auto}

table.tr-caption-container{padding:0;border:none}

table td.tr-caption{font-size:12px;font-style:italic;}

table {border-spacing: 0;border-collapse: collapse;}

td, th {padding: 0;} th {text-align: left;}

.table {width: 100%;max-width: 100%;margin-bottom: 20px;}

.table a {text-decoration: none !important;}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,.table > tbody > tr > td, .table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;}

.table > thead > tr > th {background-color:#29958d;color:#fff;vertical-align: bottom;}

.table > thead > tr > th a {color:#fff !important;}

.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td {border-top: 0;} .table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}

table col[class*="col-"] {position: static;display: table-column;float: none;}

table td[class*="col-"], table th[class*="col-"] {position: static;display: table-cell;float: none;}

.table-responsive {min-height: .01%;overflow-x: auto;}

@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 > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {white-space: nowrap;} .table-responsive > .table-bordered {border: 0;} }

d. Lưu chủ đề lại và quay trở lại Bài đăng

e. Tiếp theo Tạo bài đăng mới chuyển sang chế độ soạn thảo HTML copy và dán mã sau vào vị trí muốn hiển thị bảng.

<table class="table">

<thead>

<tr>

<th>Họ Tên</th>

<th>Địa chỉ</th>

<th>Email</th>


</tr>

</thead>

<tbody>

<tr>

<td>Nguyễn Văn A</td>

<td>Bắc Giang, Việt Nam</td>

<td>nguyenvana@gmail.com</td>

</tr>

<tr>

<td>Nguyễn Văn B</td>

<td>Hà Nội, Việt Nam</td>

<td>nguyenvanb@gmail.com</td>

</tr>

<tr>

<td>Nguyễn Văn C</td>

<td>Lạng Sơn, Việt Nam</td>

<td>nguyenvanc@gmail.com</td>

</tr>

</tbody>

</table>

Đơn giản thế là xong, bạn thấy bài này hữu ích chia sẻ để mọi người cùng làm theo nhé. Hiện tại google đang rất ưu tiên hiển thị bảng blogger này đó.

Previous Post
Next Post

post written by: