Hướng dẫn thêm Table vào Post và Page trong WordPress (ko cần code)

Bạn đang muốn chèn table và trong bài viết hoặc trang trên WordPress?

Table là một cách tuyệt vời để hiện thị số liệu một cách trực quan.

Bình thường thì bạn sẽ cần sử dụng plugin hoặc HTLM để tạo bảng.

Còn trong bài viết này, Diều Hâu sẽ hướng dẫn bạn không cần dùng HTML hay plugin nào.

Ngoài ra mình sẽ hướng dẫn thêm cả filter, và một số tính năng cao cấp cho table.

Tạo Table trong WordPress bằng Block Editor

Với trình soạn thảo Block Editor mới, việc thêm các table là rất đơn giản.

Chỉ cần bạn chọn tích vào dấu + và thêm block Table.

add-table-block

gõ luôn ở ô tìm kiếm cho dễ.

Tiếp theo bạn sẽ lựa chọn số cột và số dòng bạn muốn hiển thị.

column-row-count

mặc định là 2 cột và 2 dòng.

Bạn có thể thay đổi số lượng cột vào dòng sau khi nếu bạn chưa vừa ý.

Ở đây ví dụ mình sẽ chọn 3 cột và 4 dòng.

Table-in-wordpress

Bạn có thể gõ text trực tiếp vào các ô này, nó tự resize kích cỡ cho phù hợp.

Nếu bạn muốn cố định kích thước các ô, bạn có thể lựa chọn ở bên tay phải.

Nhưng theo mình thì không nên fix cứng kích thước các ô vào cột lại.

Vì nó có thể bị bể trên các thiết bị khác nhau ( ví dụ trên mobile sẽ bị lệch khung).

Ở bên phải bạn có thể tùy chọn thêm như:

  • Header section: thêm khu vực header cho table
  • Footer section: thêm khu vực footer
  • Background color: chọn màu nền

Còn nếu bạn muốn thêm ô hoặc cột trên bảng sẵn có, cũng rất dễ.

Click chuột vào ô bạn muốn thêm, sau đó chọn vào biểu tượng như ở dưới ảnh.

add-column-after

Một thành công cụ hiện lên cho phép: Add Column After/Before.

Xóa cột hay dòng cũng tương tự với: Delete Row/Column.

Block Table cũng hỗ trợ căn lề văn bản trong. Click vào và chọn Align Left/Center/Right.

Ví dụ ở đây, mình sẽ căn hết các đoạn text ra giữa.

align-column-center

mặc định sẽ luôn căn lề ở bên trái.

Hoặc bạn có thể định dạng luôn cả table bằng cách chọn ô ở dưới.

align-table

Lưu ý: Việc sử dụng đinh dạng này có thể khiến cho table của bạn bị tràn ra ngoài khung văn bản, hoặc bị xô lệch. Cho nên nhớ kiểm tra thật kỹ trước đăng bài viết nhé.

Như ở ảnh dưới này, mình chọn full width thì table sẽ tràn ra ngoài cả khung văn bản.

preview-table

Với công cụ có sẵn trong Gutenberg khiến việc thêm table không còn phức tạp như trước.

Nó cũng đầy đủ các tính năng cơ bản, đủ để bạn thể hiện các số liệu thống kê.

Mặc dù vậy, nó vẫn thiếu các tính năng như: bộ lọc, sắp xếp theo thứ tự…

Việc sử dụng lại các table này cũng không hỗ trợ ( phải copy paste).

Nếu bạn muốn tạo một table chuyên nghiệp với nhiều tính năng hơn.

Hãy sử dụng plugin TablePress.

Tạo Table với plugin TablePress

TablePress là một plugin giúp tạo bảng trên WordPress rất nổi tiếng.

Nó miễn phí 100% trên WordPress.org, với 800.000 lượt cài đặt, 3770 lượt vote 5*.

install-TablePress-plugin

Bạn có thể edit table hoặc thêm hàng loạt các dòng mà không cần truy cập vào bài viết.

Hoặc có thể chèn vào bất kỳ đâu trên website với shortcode.

Tính năng này rất tiện cho các bạn phải update số liệu thường xuyên.

Nó lại càng thích hợp cho mấy anh em thích dùng trình soạn thảo cũ Classic Editor.

Đầu tiền là bạn cài đặt TablePress và activate plugin này lên.

Nếu chưa biế cách cài đặt, hãy xem hướng dẫn cài đặt plugin WordPress.

Ngay menu ben trái trong dashboard bạn sẽ thấy chữ TablePress.

Chọn TablePress » AddNew để tiến hành tạo bảng mới.

TablePress-Add-New

Bạn sẽ cần điền tên cho table, chọn số column và row.

Sau bạn vẫn có thể thay đổi được số cột và hàng nên yên tâm nhé.

Mình sẽ ví dụ một table 3 cột và 4 hàng.

Sau khi điền đủ các thông tin table name, description ( nên đặt chính xác để dễ quản lý)

Bấm Add Table để tiếp tục.

Một bảng thông tin bao gồm: table ID, shortcode, descriptions

Table-information

 

Phía dưới sẽ là Table Content, đây là phần bạn nhập dữ liệu bạn muốn.

Để sắp xếp theo thứ tự bạn chỉ cần bấm vào các mũi tên ở mỗi cột.

Table-Content

Phía dưới có các tính năng nâng cao trong tab Table Manipulation gồm:

  • Table-Manipulation
  • Thêm, xóa, gộp, insert link/ảnh…

Trong Table Options bạn có thể thêm header/footer, một số hiệu ứng như hover.

Table-Options

Và tùy chọn vị trí hiển thị tên, mô tả của table.

Cuối cùng là các tùy biến khác với “Features of the DataTables Javascript library”.

Feature-of-the-DataTables-JavaScript-library

Gồm các tính năng nâng cao như: bô lọc, tìm kiếm, sắp xếp…

Sau khi lựa chọn nhớ bấm Save Changes.

Bạn có thể dễ dàng chèn table vào bất kỳ post và page nào với shortcode.

Hoặc sử dụng shortcode block trên Gutenberg.

Shortcode-block

Còn nếu dùng trình soạn thảo cũ thì chỉ cần chèn shortcode như dưới là được.

classic-editor-table-shortcode

Sau này nếu bạn muốn thay đổi thông tin trên table, bạn chỉ cần vào TablePress để thay đổi.

Nó sẽ tự động cập nhậ trên post và page, mà bạn không cần vào từng post để edit.

TablePress cũng cho phép bạn import dữ liệu từ spreadsheets và CSV file.

Đơn giản bạn có thể xuất dữ liệu từ TablePress thành đinh dạng CSV, và mở nó trên Excel hoặc Google Sheet.

Vậy là Diều Hâu đã hướng dẫn xong cách chèn table vào trong WordPress, mà không cần sử dụng HTML.

Nếu muốn tạo các table, chart tinh tế hơn bạn có thể tham khảo wpDataTables nhé.

Nếu có bất kỳ câu hỏi nào hãy comment ở dưới nhé, còn thấy hữu ích hãy like và share bài viết nhé.

0 0 vote
Article Rating
Đăng ký
Thông báo về
guest
0 Bình Luận
Inline Feedbacks
View all comments

Pin It on Pinterest

Shares