Hướng dẫn cài đặt và tạo bảng responsive với plugin TablePress

4
150

Nói đến việc tạo bảng trong blog/ website WordPress, người ta không thể không nhắc tới plugin TablePress. Với gần 2 triệu lượt download và hơn 500.000 site đang active, đây là plugin tạo bảng được sử dụng nhiều nhất tính tới thời điểm hiện tại. Sở dĩ TablePress được nhiều người tin dùng như vậy là bởi vì nó dễ sử dụng, đáp ứng được các nhu cầu từ đơn giản đến phức tạp. Bảng được tạo bởi plugin TablePress có một ưu điểm là không có khả năng responsive.

Cài đặt plugin TablePress

Đầu tiên, bạn hãy tìm và cài đặt plugin TablePress ở thư viện WordPress.Org

Xem thêm: Hướng dẫn tìm và cài đặt plugin WordPress 4.6.1

Cấu hình cho TablePress

Nếu trước đây bạn đã từng sử dụng shortcode của plugin này, thì hãy sửa từ  [table id=123 /] thành  [table id=123 responsive=mode /] .

Thay mode bằng flip, scroll hoặc collapse. Trong đó:

  • flip: thay đổi cách bố trí của bảng (đổi hàng thành cột hoặc ngược lại) và cuộn bảng theo chiều ngang.
  • scroll: cuộn bảng theo chiều ngang.
  • collapse: thu gọn hoặc mở rộng các dữ liệu trong bảng (thông qua nút ẩn/hiện) để phù hợp với kích thước màn hình.

Demo chi tiết của các mode (chế độ) này, các bạn có thể xem tại đây.

Riêng với  flip, các bạn còn có thể thiết lập kích thước màn hình cụ thể khi chế độ này được kích hoạt. Sử dụng cấu trúc shortcode sau đây:

Thay device bằng phone, tablet, desktop, all. Trong đó:

  • phone: kích thước chiều ngang màn hình nhỏ hơn 768 pixels.
  • tablet: kích thước chiều ngang màn hình nhỏ hơn 980 pixels.
  • desktop: kích thước chiều ngang màn hình nhỏ hơn 1200 pixels.
  • all: sử dụng chế độ flip trên tất cả các kích thước màn hình.

Thật đơn giản phải không nào? Hoàn toàn không cần can thiệp gì vào mã nguồn của blog/ website cả. Chúc các bạn thành công!

Hướng dẫn cài đặt và tạo bảng responsive với plugin TablePress
4.5 (90%) 2 votes

Nếu yêu thích LocDang.Com thì hãy đăng ký theo dõi để nhận tin tức mới nhất và đừng quên Like và Follow mình trên Facebook Twitter nhé.
Để lại ý kiến nhận xét tại đây !!

Có 4 bình luận cho bài viết này

    • Xin chào, khách