• WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và Domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Tối ưu WordPress
    • Cài theme Paradise
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

  • Bắt đầu
  • Thủ thuật WordPress
  • WordPress plugins
  • WordPress themes
  • Hosting và Domain
  • Thông báo
Trang chủ » WordPress » Thủ thuật WordPress » Tạo bảng responsive cho WordPress với plugin TablePress

Tạo bảng responsive cho WordPress với plugin TablePress

04/02/2017 04/02/2017 Trung Hiếu 26 Bình luận

Mục lục

  • Tạo bảng responsive với plugin TablePress

Tạo bảng responsive cho WordPress với plugin TablePress.

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. Tuy nhiên, bảng được tạo bởi plugin TablePress có một nhược điểm là không có khả năng responsive.

Tham khảo thêm:

  • Top 7 plugins tạo bảng tốt nhất trong WordPress
  • Top 6 plugins tạo bảng đăng nhập/đăng ký tốt nhất cho WordPress

Điều này đồng nghĩa với việc sẽ xuất hiện tình trạng tràn bảng ra khỏi giới hạn chiều ngang của giao diện khi blog/ website hiển thị trên các màn hình có kích thước nhỏ và số lượng cột trong bảng quá nhiều. Vậy làm thế nào để khắc phục tình trạng kể trên? Bài viết hôm nay sẽ hướng dẫn các bạn cách để làm điều đó.

Tạo bảng responsive với plugin TablePress

Có vẻ nhóm tác giả của TablePress cũng đã nhận ra được vấn đề này và phát triển thêm một tiện ích mở rộng mang tên Responsive Tables.

1. Tất cả những gì các bạn cần làm là download tiện ích đó tại đây, cài đặt (thông qua việc upload) và kích hoạt giống như những plugin bình thường khác.

2. Tiếp theo, mở trình soạn thảo của những trang hoặc bài viết mà bạn đã chèn shortcode của plugin TablePress trước đó. Shortcode của nó có dạng như thế này:

Hãy sửa nó thành dạng:

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!

Bạn đang sử dụng plugin nào để tạo bảng responsive trong WordPress? Hãy chia sẻ nó với chúng tôi trong khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: Plugins tạo bảng, TablePress

dich-vu-cai-dat-website-wordpress-mien-phi

Tác giả: Trung Hiếu

"Cảm thấy blog quá nhỏ? Nếu bạn chỉ có một độc giả và blog của bạn làm thay đổi cuộc sống của họ thì nó là đủ lớn".

Previous Post: « Theme Paradise v4.1 ra mắt, giảm giá lì xì đầu năm
Next Post: Khắc phục lỗi number_format_thousands_sep trong WordPress »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. Vy Spirit đã bình luận:

    04/02/2017 lúc 11:58

    Cái này có làm được bảng trên giao diện AMP ko nhỉ :D

    Trả lời
    • Trung Hiếu đã bình luận:

      04/02/2017 lúc 12:06

      Không bạn ạ. :P

      Trả lời
      • Vy Spirit đã bình luận:

        05/02/2017 lúc 11:11

        Tiếc nhỉ, trên giao diện AMP nhìn cái bảng nó rối nùi hết lên :(

        Trả lời
        • Trung Hiếu đã bình luận:

          06/02/2017 lúc 08:57

          Chắc phải tự custom CSS cho AMP thôi. Chứ giờ hình như không có plugin nào hỗ trợ sẵn thì phải. :)

          Trả lời
          • Vy Spirit đã bình luận:

            06/02/2017 lúc 20:11

            Tự làm thì hơi khó :D chắc chờ sau này kiểu gì cũng có :D

  2. Thích rẻ đã bình luận:

    05/02/2017 lúc 13:43

    Đang xài plugin này thấy rất tốt

    Trả lời
  3. Thái Tài đã bình luận:

    11/02/2017 lúc 07:45

    Vấn đề này trước đây tìm nát trên mạng vẫn ko có hướng giải quyết. Làm phải thiết kế cái bảng giá thành file hình ảnh rùi up lên luôn. Mỗi lần edit bảng giá cực trần thân

    Trả lời
  4. Đào Văn tiến đã bình luận:

    16/02/2017 lúc 14:15

    anh ơi em hỏi chút được không ạ. Em có lập 1blog wordpress miễn phí nhưng thấy cũng gân 2 tháng rùi mà không thấy có backlink nào về site chính của em cả index khác chậm không biết a có cách nào để wp index nhah hơn không ạ. Em cám ơn anh nhiều

    Trả lời
    • Trung Hiếu đã bình luận:

      17/02/2017 lúc 08:21

      Bạn có đi bình luận trên các site có thứ hạng cao không? Đã khai báo với Google Search Console chưa? Kiểm tra xem file robots.txt như thế nào? :P

      Trả lời
  5. LONGdaica đã bình luận:

    17/02/2017 lúc 13:24

    Là một Plugin đầy hữu ích. Thank for share

    Trả lời
  6. Đạo Nguyễn đã bình luận:

    17/03/2017 lúc 15:52

    Nhưng nó vẫn không hỗ trợ AMP :(

    Trả lời
    • Trung Hiếu đã bình luận:

      17/03/2017 lúc 16:04

      Tạm thời TablePress vẫn chưa hỗ trợ AMP. :(

      Trả lời
  7. TTU đã bình luận:

    23/08/2017 lúc 09:33

    Bác nào cần chức năng search mà highlight text của Tablepress thì pm mình gửi nhé

    Trả lời
    • Trung Hiếu đã bình luận:

      23/08/2017 lúc 10:04

      Cái này hả bạn: https://tablepress.org/downloads/extensions/tablepress-datatables-search-highlight.zip :)

      Trả lời
      • TTU đã bình luận:

        23/08/2017 lúc 10:06

        Yep đúng rồi Bác, tại ko thấy show trên Extensions nên share cho ae cần

        Trả lời
        • Trung Hiếu đã bình luận:

          23/08/2017 lúc 14:31

          Cảm ơn bạn đã chia sẻ. :D

          Trả lời
  8. Hồ đã bình luận:

    09/09/2017 lúc 09:15

    Không được bạn ơi,
    Bạn chỉ cụ thể đoạn code đó để ở đâu vậy?
    mình để css, code văn bản mà không được
    Cảm ơn bạn

    Trả lời
    • Trung Hiếu đã bình luận:

      09/09/2017 lúc 15:13

      Code đó dùng trong trình soạn thảo chứ đâu bạn. Bạn chèn ở chế độ Visual hay Text đều như nhau. Nó là shortcode thôi mà. :P

      Trả lời
      • trang đã bình luận:

        17/09/2017 lúc 20:28

        Bạn chỉ rõ chèn shortcode đó như thế nào vào bài viết cho mình rõ đi.
        Mình không biết chèn chỗ nào, bảng vẫn không responsive được.

        Cảm ơn bạn nhiều

        Trả lời
        • Trung Hiếu đã bình luận:

          17/09/2017 lúc 20:41

          Đọc kỹ lại bước 2 đi bạn. Mình đã viết rất rõ ràng rồi. Nó khó hiểu đến vậy sao?

          Trả lời
  9. Hai Nam đã bình luận:

    08/03/2018 lúc 08:19

    em có dùng Plugin này cho wp nhưng khi tạo post xem trên điện thoại thì giao diện toàn thiếu ấy ạ xem trên máy tính màn hình full thì đủ chứ trên điện thoại toàn bị cắt mất 1 phần. Có cách nào cho table này tự động ứng với màn hình của thiết bị không a.

    Trả lời
    • Trung Hiếu đã bình luận:

      08/03/2018 lúc 08:29

      Bạn dùng kết hợp plugin TablePress với extension Responsive Tables (xem hướng chi tiết trong bài viết) là sẽ khắc phục được tình trạng kể trên nhé. :P

      Trả lời
      • Hai Nam đã bình luận:

        08/03/2018 lúc 17:05

        Vậy mà em muốn nó sử dụng tự động co dãn cùng màn hình thiết bị thì chỉ cần .
        1. Download folder về
        Tải lên trang => rồi khi cài table thì sử dụng
        [table id=123 responsive=flip responsive_breakpoint=device /] -> thay device bằng all đúng ko ạ

        Trả lời
        • Trung Hiếu đã bình luận:

          08/03/2018 lúc 22:47

          Đúng rồi bạn. Nhớ thay table id=123 cho đúng với ID của bảng bạn muốn chèn. :P

          Trả lời
  10. Gia Khánh đã bình luận:

    16/07/2018 lúc 12:24

    Mình cài plugin này vô có cần cấu hình gì ko bác ?

    Trả lời
    • Trung Hiếu đã bình luận:

      16/07/2018 lúc 12:33

      Không bạn ạ.

      Trả lời

Primary Sidebar

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Lỗi gia hạn tự động Let’s Encrypt và cách khắc phục 19/02/2019
  • Thay thế hình ảnh trong WordPress giữ nguyên tên 16/01/2019
  • Cài đặt lại toàn bộ plugin trên website WordPress 02/01/2019
  • Hướng dẫn nâng cấp PHP 7.3 cho website WordPress 27/12/2018
  • Gỡ bỏ Gutenberg stylesheet khỏi website WordPress 24/12/2018
  • Điểm Google PageSpeed Insights liệu có còn đáng tin? 20/12/2018

Hỗ trợ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Trung Hiếu trong Mừng WP Căn bản tròn 5 tuổi, giảm giá sốc theme Paradise
  • Nguyễn Đình trong Mừng WP Căn bản tròn 5 tuổi, giảm giá sốc theme Paradise
  • Trung Hiếu trong Mừng WP Căn bản tròn 5 tuổi, giảm giá sốc theme Paradise
  • Nguyen Huy trong Mừng WP Căn bản tròn 5 tuổi, giảm giá sốc theme Paradise

Bình luận nhiều nhất (tháng)

  1. Nguyen Huy (4)
  2. tuyenab (4)
  3. Chiến (3)
  4. nghiep (3)
  5. Ngô Văn Cương (3)
  6. Đoàn Thái Hưng (2)

Liên kết và Đối tác

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung
  • Canh Me

Thống kê WP Căn bản

10 Chuyên mục - 913 Bài viết - 31900 Bình luận

Bản quyền © 2014 - 2019 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting · Bảo vệ bởi CloudFlare Pro