Tạo Bảng - Table đa màu sắc Responsive bằng Blogger Shortcode

Create Shortcode For Responsive HTML Tables!

Bảng HTML là một trong những thành phần quan trọng trong thiết kế giúp bạn sắp xếp nội dung thành các hàng và cột. Cú pháp để thiết kế thường khá rối rắm với các thẻ table, td, tr... và thường không có responsive khi bạn xem bằng di động hoặc máy tính bảng sẽ bị vỡ bố cục. Nhằm khắc phục những nhược điểm trên hôm nay Iris Tips sẽ giới thiệu cho các bạn một plugin khác của Blogger Shortcode đó là HTML Table Shortcode. Chỉ với một vài dòng code đơn giản và có hỗ trợ responsive HTML Table Shortcode đáng là plugin để bạn sử dụng.

• DEMO

1. Cài đặt Plugin Blogger Shortcode

Để sử dụng Shortcode này trước tiên bạn phải cài đặt Plugin Shortcode cho Blogger của bạn bằng cách làm theo các bước được chia sẻ qua bài viết dưới đây:

Giới thiệu Plugin Blogger Shortcode

2. Sự khác nhau giữa Table HTML thường và HTML Table Shortcode

Phần tử	Diễn giải
Row - Hàng	Trong HTML syntax chúng ta gọi nó là thẻ <tr> nhưng trong Shortcode chúng tôi đã đổi tên thành [row]
Column - Cột	Trong HTML DOM nó được hiểu là <td> - cũng là nơi chứa dữ liệu. Chúng ta có thể thêm văn bản, hình ảnh, danh sách, một bảng khác, một Shortcode... Trong Shortcode chúng tôi đơn giản gọi nó là [col]
Heading - Tiêu đề	Thẻ này được viết là <th>. Trong Shortcode bạn sẽ gọi nó là [heading] - nghe rất thực tế phải không nào :D

3. Thêm chủ đề cho Shortcode

Chúng ta có 4 chủ đề để tùy biến, đó là:
1theme1 - Màu đen (mặc định).
2theme2 - Màu xanh dương.
3theme3 - Màu xanh lá.
4theme4 - Màu đỏ.

Để thêm các chủ đề này bạn cần vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

/*----------HTML Table Iris Shortcode--------*/ 
#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}
/*Iris 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} 
/*Iris 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} 
/*Iris 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;}}

4. Cú pháp sử dụng Shortcode

- Hình ảnh trên thể hiện Bảng Responsive với 7 hàng và 3 cột.
- Mỗi hàng có thể chứa 3 cột.
- Cột nằm thẳng đứng, hàng là nằm ngang.

Đầu tiên để tạo tiêu đề các bạn sử dụng

[heading]Tiêu đề - Title[/heading]

Dữ liệu sẽ được chứa trong các ô và cú pháp khi sử dụng Shortcode là

[col]Ô - Cell[/col]

Code đầy đủ:

[table color="theme3"]  
[row] [heading]Title 1[/heading] [heading]Title 2[/heading] [/row]  
[row] [col]Cell 1[/col] [col]Cell 2[/col] [/row] 
[/table]   

Shortcode sẽ tạo ra một bảng với màu xanh lá với 2 hàng và 2 cột như hình bên dưới.

Để đổi màu khác bạn hãy thay theme3 thành theme2 hoặc theme4
Nếu muốn sử dụng màu mặc định (màu đen) bạn chỉ cần sử dụng [table], không cần phải thiết lập các thuộc tính màu sắc.

Một ví dụ khác, để tạo Bảng với 3 hàng và 2 cột

[table color="theme3"] 
[row] [heading]Title 1[/heading] [heading]Title 2[/heading] [/row] 
[row] [col]Cell 1[/col] [col]Cell 2[/col] [/row] 
[row] [col]Cell 3[/col] [col]Cell 4[/col] [/row] 
[row] [col]Cell 5[/col] [col]Cell 6[/col] [/row] 
[/table]

Kết quả:

Hoặc 3 hàng, 3 cột

[table color="theme3"]  
[row] [heading]Title 1[/heading] [heading]Title 2[/heading] [heading]Title 3[/heading] [/row]  
[row] [col]Cell 1[/col] [col]Cell 2[/col] [col]Cell 3[/col] [/row]  
[row] [col]Cell 4[/col] [col]Cell 5[/col] [col]Cell 6[/col] [/row] 
[row] [col]Cell 7[/col] [col]Cell 8[/col] [col]Cell 9[/col] [/row] 
[/table]

Kết quả:

Thật là đơn giản phải không nào ^^

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by mbt/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm