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

CNTTLS | Chèn bảng vào Blogspot, Làm thế nào để tạo bảng responsive cho Blogspot chỉ với một vài thao tác đơn giản...

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

BÌNH LUẬN

BLOGGER: 5
  1. văn phòng phẩm anlocviet chung cung cấp các loại bảng viết, bảng mic tại anlocviet.vn

    Trả lờiXóa
  2. Vay Tiền Mặt Nhanh. Giải Ngân Trong Ngày. Vay tiền không thế chấp tại https://www.vaynhanh2h.info/

    Trả lờiXóa
  3. Hướng dẫn cách sửa chữa giày dép
    https://keogiaydepsubond.blogspot.com/

    Trả lờiXóa
  4. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  5. thank Ad,
    https://www.nnquocanh.top/

    Trả lờiXóa

Tên

After Effects,1,Blogger,33,blogspot,9,CNTT,30,Code Blog,1,Facebook,3,Google,2,Google Drive,1,Kỹ năng Bootstrap,1,Kỹ năng Dreamweaver,1,Kỹ năng Excel,7,Kỹ năng Google Driver,1,Kỹ năng IELTS,6,Kỹ năng Illustrator,1,Kỹ năng lập trình,1,Kỹ năng lập trình hướng đối tượng Typescript,1,Kỹ năng Lumion 3D,1,Kỹ năng nói tiếng Anh,1,Kỹ năng Powerpoint,1,Kỹ năng thiết kế,1,Kỹ năng TOEIC,1,Kỹ năng Unity3D,1,Kỹ năng Word,1,Kỹ năng xin việc - viết CV,1,Microsoft 365,1,Microsoft Excel,4,Microsoft Powerpoint,1,Microsoft Word,2,SEO,1,Seo Blogger,6,SEO Blogspot,1,tao-blogspot-chuyen-nghiep,1,Template Blogger,6,Template Blogspot,1,Template MagOne,1,Template Wordpress,1,Thủ thuật Blogger,27,Thủ thuật Blogspot,1,Thủ thuật máy tính,1,Thủ thuật Wordpress,1,Tin học văn phòng,9,VIDEO KHÓA HỌC,6,Webmaster,2,Windows,2,Wordpress,2,Youtube,1,
ltr
item
Chia sẻ kiến thức - Thủ thuật máy tính: Cách tạo bảng trong bài viết Blogspot
Cách tạo bảng trong bài viết Blogspot
CNTTLS | Chèn bảng vào Blogspot, Làm thế nào để tạo bảng responsive cho Blogspot chỉ với một vài thao tác đơn giản...
https://1.bp.blogspot.com/-ridInsPO7ok/XoHneROVLNI/AAAAAAAAA6Q/2BsstmSn7TM8xzWU4fvrRUmK79lQz6jAwCLcBGAsYHQ/s1600/cach-tao-bang-trong-bai-viet-blogspot.jpg
https://1.bp.blogspot.com/-ridInsPO7ok/XoHneROVLNI/AAAAAAAAA6Q/2BsstmSn7TM8xzWU4fvrRUmK79lQz6jAwCLcBGAsYHQ/s72-c/cach-tao-bang-trong-bai-viet-blogspot.jpg
Chia sẻ kiến thức - Thủ thuật máy tính
https://blog.vinhls.com/2018/10/cach-tao-bang-trong-bai-viet-blogspot.html
https://blog.vinhls.com/
https://blog.vinhls.com/
https://blog.vinhls.com/2018/10/cach-tao-bang-trong-bai-viet-blogspot.html
true
987137131202951109
UTF-8
Đã tải tất cả bài viết Không tìm thấy bài viết nào Xem tất cả Đọc thêm Trả lời Không trả lời Xóa Bởi Home PAGES POSTS Xem tất cả ĐỀ XUẤT CHO BẠN LABEL ARCHIVE SEARCH TẤT CẢ NHỮNG BÀI VIẾT Không tìm thấy bất kỳ bài viết phù hợp với yêu cầu của bạn Trở lại trang chủ Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec vừa xong 1 phút trước $$1$$ minutes ago 1 giờ trước $$1$$ hours ago Hôm qua $$1$$ days ago $$1$$ weeks ago nhiều hơn 5 tuần trước Người theo dõi Theo dõi THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Sao chép tất cả mã Chọn tất cả mã Tất cả các mã đã được sao chép vào clipboard của bạn Không thể sao chép mã / văn bản, vui lòng nhấn [CTRL] + [C] (hoặc CMD + C với Mac) để sao chép Mục lục