Cách tạo bảng trong bài viết Blogspot

 

Chúng ta có thể tạo bảng trong bài viết Blogspot bằng cách sử dụng mã html và tùy chỉnh bảng trông đẹp mắt hơn bằng cách sử dụng mã CSS, để làm được mời các bạn xem hướng dẫn dưới đây

Tạo một bảng đơn giản trong Blogspot bằng cách sử dụng HTML

Để tạo một bảng đơn giản, chúng tôi chỉ cần một vài mã html, cụ thể là:

<table> và </table>
<tr> và </tr>
<td> và </td>

Ví dụ: chúng tôi muốn tạo bảng có hai cột dọc và hai cột ngang. chúng ta có thể viết mã html bảng như sau:
<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>

Văn bản 1	Văn bản 2
Văn bản A	Văn bản B

Trên đây là một ví dụ đơn giản về cách tạo ra một bảng đơn giản bằng HTML

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

1. Đầu tiên Đăng nhập vào Blogger
2. Ở menu bên trái chọn Chủ đề ⇒ Chọn Chỉnh sửa HTML
3. Thêm mã dưới đây vào trước thẻ ]]></b:skin>

Sao chép tất cả mã

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;} }

4. Lưu chủ đề lại và quay trở lại Bài đăng
5. 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.

Sao chép tất cả mã

<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>

6.  Xuất bản  và xem kết quả

Họ Tên	Địa chỉ	Email
Nguyễn Văn A	Bắc Giang, Việt Nam	nguyenvana@gmail.com
Nguyễn Văn B	Hà Nội, Việt Nam	nguyenvanb@gmail.com
Nguyễn Văn C	Lạng Sơn, Việt Nam	nguyenvanc@gmail.com

Lời kết

Chỉ với vài thao tác đơn giản như trên là bạn đã có thể tự  tạo bảng trong bài viết Blogspot rồi đúng không. Nếu bạn thấy bài viết hữu ích hãy chia sẻ cho bạn bè, người thân của bạn.