Tạo bảng responsive với shortcode cho blogspot

Bạn muốn tạo bảng trên blogspot nhưng template lại không hỗ trợ, bảng tạo không đẹp,code rắc rối…Với Blogger shortcode Plugin bạn có thể tạo 1 bảng với nhiều cột một cách nhanh chóng, đơn giản và đặc biệt là nó còn responsive rất tiện lợi.

Tạo bảng responsive với shortcode cho blogspot

CÀI ĐẶT SHORTCODE PLUGIN BLOGSPOT

Để sử dụng Tables shortcode trước tiên bạn phải cài đặt Plugin shortcode cho Blogspot tại link dưới đây:

 Nếu bạn đã thêm nó vào template blogger của bạn thì bỏ qua bước này.

THÊM CSS SHORTCODE TABLES

– Có 4 màu cho các bạn lựa chọn:
       • theme1 – Default Đen
       • theme2 – Blue
       • theme3 – Green
       • theme4 – Red

– Thêm CSS vào template (Chèn đoạn css sau trên ]]></b:skin>)
#theme1, #theme2,#theme3,#theme4{width:100%;font-family:sans-serif,arial; block;border-spacing: 0;} 
#theme1, #theme2,#theme3,#theme4,#theme1 th, #theme2 th,#theme3 th,#theme4 th,#theme1 td, #theme2 td,#theme3 td,#theme4 td{border:1px solid #ddd;border-collapse:collapse} 
#theme1 td, #theme2 td,#theme3 td,#theme4 td{padding:10px} 
#theme1 th, #theme2 th,#theme3 th,#theme4 th{padding:12px 10px;text-align:left;font-family:oswald;font-weight:400; font-size: 17px;} 
#theme1 tr:nth-child(odd){background-color:#f1f1f1} 
#theme1 tr:nth-child(even),#theme2 tr:nth-child(even),#theme3 tr:nth-child(even),#theme4 tr:nth-child(even){background-color:#fff} 
#theme1 th{background-color:#333;color:#fff;border:1px solid #333} 
#theme1 th:nth-child(even){background-color:#555}
/*Blue*/ 
#theme2 tr:nth-child(odd){background-color:#d3ecf2} 
#theme2 th{background-color:#42b0c9;color:#fff;border:1px solid #42b0c9} 
#theme2 th:nth-child(even){background-color:#4bbad3} 
/*Green*/ 
#theme3 tr:nth-child(odd){background-color:#e2f2d3} 
#theme3 th{background-color:#a3e264;color:#fff;border:1px solid #a3e264} 
#theme3 th:nth-child(even){background-color:#85c942} 
/*Red*/ 
#theme4 tr:nth-child(odd){background-color:#efddda;} 
#theme4 th{background-color:#ef4832;color:#fff;border:1px solid #ef4832} 
#theme4 th:nth-child(even){background-color:#de1f05}
@media only screen and (max-width:768px) {#theme1,#theme2,#theme3,#theme4 {overflow-x: auto;display: block;}}

HTML HIỂN THỊ

– Code hiển thị bảng gồm 2 cột và 1 dòng:

[table color="theme3"]  
[row] [heading]Tiêu đề 1[/heading] [heading]Tiêu đề 2[/heading] [/row]  [row] [col]Ct 1[/col] [col]Ct 2[/col] [/row] [/table]  
Code hiển thị bảng gồm 2 cột và 1 dòng

– Code hiển thị bảng gồm 3 cột và 4 dòng:

[table color="theme3"]  
[row] [heading]Tiêu đề 1[/heading] [heading]Tiêu đề 2[/heading] [heading]Tiêu đề 3[/heading] [/row]  
[row] [col]Ct 1[/col] [col]Ct 2[/col] [col]Ct 3[/col] [/row]  
[row] [col]Ct 4[/col] [col]Ct 5[/col] [col]Ct 6[/col] [/row] 
[row] [col]Ct 7[/col] [col]Ct 8[/col] [col]Ct 9[/col] [/row] 
[/table]
Code hiển thị bảng gồm 3 cột và 4 dòng

– Bạn cũng có thể tùy chỉnh nhiều hơn 🙂

TÙY CHỈNH TABLES

Element Definition
Row Trong HTML là <tr>, còn trong Shortcode là [row]
Column Trong HTML là <td>, còn trong Shortcode là [col]
Heading Trong HTML là <th>, còn trong Shortcode là [heading]

Gửi bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Scroll to Top