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

 cach-tao-bang-trong-bai-viet-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>
Tạo một bảng đơn giản trong Blogspot
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 1Văn bản 2
Văn bản AVă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 ABắc Giang, Việt Namnguyenvana@gmail.com
Nguyễn Văn BHà Nội, Việt Namnguyenvanb@gmail.com
Nguyễn Văn CLạng Sơn, Việt Namnguyenvanc@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. 
Tags:
أحدث أقدم