Tất cả các trang web hiện đại đều được thiết kế để hoạt động chính xác trên nhiều kích thước màn hình khác nhau. Trước đây, bảng được tạo bằng HTML đơn giản. Khi thiết kế web linh hoạt trở thành tiêu chuẩn mới, các bảng HTML cơ bản đã gặp khó khăn trong việc đáp ứng nhu cầu của các trang web hiện đại. Vì các bảng HTML đơn giản không có khả năng thích ứng, văn bản bên trong chúng rất khó đọc trên màn hình điện thoại di động, đó là lý do tại sao chúng được sử dụng để phát triển các bảng thích ứng, tự điều chỉnh bố cục tùy thuộc vào kích thước màn hình đang hiển thị. HTML và các truy vấn phương tiện CSS phải được sử dụng kết hợp với nhau.
- Giải pháp 1: Có thể tạo bảng bằng Divi Builder.
- Giải pháp 2: Sử dụng pluginbảng có chức năng này theo mặc định!
- WP Table Manager
- Giao diện cho WP Table Manager
- Phần kết luận
Có thể xây dựng bảng với bố cục dễ đọc trên mọi kích thước màn hình cho một tập hợp thông tin duy nhất không quá lớn hoặc đa dạng, và điều này có thể được thực hiện bằng các phương pháp HTML và CSS cơ bản. Tuy nhiên, nếu bảng được thiết kế để chứa một lượng dữ liệu đáng kể, việc xây dựng bố cục dễ đọc trên thiết bị di động hoặc màn hình có chiều rộng nhỏ hơn 786 pixel sẽ không dễ dàng.
Nếu nhà thiết kế web sử dụng HTML và CSS để tạo bảng hiển thị phù hợp trên mọi kích thước màn hình mà không xem xét đến lượng dữ liệu, họ rất có thể sẽ gặp phải các vấn đề ảnh hưởng đáng kể đến khả năng đọc hiểu nội dung của trang web. Dưới đây là một số gợi ý mà bạn, với tư cách là nhà thiết kế trang web Divi, có thể áp dụng khi cố gắng tạo bảng hiển thị phù hợp theo cách thủ công.
Khi thu nhỏ kích thước bảng để phù hợp với màn hình nhỏ hơn, bạn cần tạo nhiều lớp CSS khác nhau, mỗi lớp nhắm đến một độ phân giải màn hình cụ thể.
Một giải pháp khác mà bạn có thể áp dụng là ẩn các cột cụ thể trong bảng khi kích thước màn hình nhỏ hơn.
Đối với màn hình nhỏ hơn, bạn có thể thêm thanh cuộn ngang hoặc dọc vào tiêu đề và chân trang của bảng.
Tạo một bảng duy nhất có thể điều chỉnh kích thước để phù hợp với mọi kích thước màn hình, và phóng to bảng để giúp nội dung dễ đọc hơn.
Những giải pháp này đòi hỏi một lượng công sức đáng kể, và các yêu cầu có thể khác nhau tùy thuộc vào nội dung và kích thước màn hình.
Giải pháp 1: Có thể tạo bảng bằng Divi Builder.
Elegant Themes đã tạo ra một hướng dẫn để minh họa cách xây dựng bảng đáp ứng bằng cách sử dụng các tính năng tích hợp sẵn của Divi. Bạn có thể xem hướng dẫn tại đây. Họ đã thêm khả năng cuộn ngang cho các cột tràn ra ngoài vùng chứa bảng, cho phép bảng phản hồi tốt hơn với thao tác nhập liệu của người dùng. Bạn có thể tìm hiểu thêm bằng cách truy cập trang hướng dẫn:
Giải pháp 2: Sử dụng pluginbảng có chức năng này theo mặc định!
Việc tạo bảng tương thích với thiết bị di động cho trang web Divi của bạn giờ đây không còn là vấn đề nữa, nhờ vào sự phong phú của các giải pháp plugin MIỄN PHÍ có sẵn trong kho lưu trữ. Tuy nhiên, việc tìm kiếm pluginbảng có tích hợp tùy chọn tương thích với thiết bị di động lại hơi khó khăn. pluginphổ biến như wpDataTables không có tính năng này như một tùy chọn miễn phí.
Trong bài viết này, chúng ta sẽ xem xét một trong plugintốt nhất dành cho WP Table Builder.
WP Table Manager
WP Table Manager là plugin lý bảng duy nhất cho WordPress cung cấp giao diện bảng tính hoàn chỉnh để quản lý bảng. Tạo bảng, chọn chủ đề và bắt đầu chỉnh sửa bảng ngay sau khi tạo xong. Bạn sẽ được hưởng lợi từ bộ tính năng chỉnh sửa bảng mạnh mẽ toàn diện, bao gồm chỉnh sửa ô HTML, sao chép bảng, tính toán và đồng bộ hóa với Excel, Google Sheets và Office 365; việc chỉnh sửa bảng đơn giản như nhấp chuột vào một ô và chỉnh sửa dữ liệu có hoặc không cần sự hỗ trợ của trình soạn thảo văn bản trực quan.
WP Table Manager cho phép bạn thiết kế các bảng đẹp mắt, đáp ứng tốt trên mọi thiết bị với giao diện trực quan đơn giản. Ứng dụng này hoàn toàn miễn phí. Sau khi kích hoạt, bạn sẽ được chuyển đến hướng dẫn thiết lập. Hãy làm theo các bước và thực hiện các điều chỉnh cần thiết theo ý thích của bạn. Như thể bằng phép thuật, bạn đã tạo ra một bảng đẹp mắt hiển thị tốt trên mọi thiết bị với mọi kích thước. Sau đó, tất cả những gì bạn cần làm là sao chép mã ngắn và dán vào trang mà bạn muốn bảng xuất hiện. Hiện tại, trình tạo bảng cung cấp bảy phần tử (Văn bản, Hình ảnh, Danh sách, Nút, Xếp hạng sao, HTML tùy chỉnh và Mã ngắn) mà bạn có thể kéo và thả vào các vị trí đặt bảng bằng tính năng kéo và thả. Chúng có thể được sử dụng để xây dựng nhiều loại bảng khác nhau, chẳng hạn như bảng so sánh sản phẩm, bảng giá, bảng danh sách, v.v.; đây là plugin bảng mà chúng tôi nhận thấy thân thiện nhất với người mới bắt đầu trong quá trình nghiên cứu. Xin lưu ý rằng phiên bản hiện tại không có trường tìm kiếm hoặc bất kỳ chức năng lọc nào khác. Ngoài ra, nếu bạn dự định nhập hoặc quản lý nhiều tập dữ liệu, đây có thể không phải là lựa chọn lý tưởng. Đối với trường hợp sử dụng này, Visualizer hoặc Tablepress đều là những lựa chọn tuyệt vời.
Giao diện cho WP Table Manager
Bạn có thể chèn shortcode vào mô-đun mã hoặc mô-đun văn bản trong Divi.
Giao diện DIVI bao gồm WP Table Manager.
plugin WP Table Manager giải quyết vấn đề quản lý chi tiết khi xử lý bảng biểu;
- Sau khi kích hoạt tùy chọn lọc trên bảng của bạn, bạn có thể tìm kiếm dữ liệu trong từng cột và lọc toàn bộ bảng. Chức năng này cũng hoạt động hiệu quả với các bảng lớn, bao gồm cả bảng phân trang
- Mũi tên lên và xuống trên mỗi cột sẽ giúp sắp xếp dữ liệu trong bảng. Chức năng sắp xếp dữ liệu bảng cũng hoạt động với các bảng lớn, bao gồm cả phân trang.
- Sau khi đã xây dựng bảng với tất cả dữ liệu cần thiết, bạn có thể cho phép người dùng sắp xếp, nhưng bạn cũng có thể thiết lập thứ tự mặc định. Điều này có thể khá hữu ích khi thông tin thay đổi theo thời gian, vì bạn có thể sắp xếp các vận động viên sau cuộc đua theo thứ tự về đích.
- Phân trang là cần thiết nếu bạn muốn hiển thị một bảng lớn trên giao diện người dùng của trang web mà vẫn đảm bảo tài nguyên máy chủ. Chọn số lượng hàng đã được thiết lập sẵn cho mỗi trang.
Ngoài ra, còn có một cách mở để quản lý tài liệu Excel thông qua trình nhập tệp Excel của WP Table Manager . Tuy nhiên, bạn chỉ có thể nhập và chuyển đổi dữ liệu Excel thành bảng HTML có thể chỉnh sửa hoặc nhập tệp Excel với kiểu dáng riêng bao gồm màu sắc, hình nền, kích thước cột và liên kết.
Quản lý bảng Excel của bạn và xuất bản lên trang web WordPress! Bạn có thể tải tệp Excel lên bảng thông qua trình quản lý phương tiện của WordPress hoặc trình khách FTP. Sau đó, chọn tệp Excel của bạn và bắt đầu đồng bộ hóa từ cài đặt bảng.
Việc đồng bộ hóa giữa bảng WordPress của bạn và tệp Excel có thể được thực hiện định kỳ, từ một phút đến một ngày. Bạn cũng có thể thiết lập độ trễ đồng bộ hóa tự động để tránh các cập nhật bảng công khai WordPress không mong muốn hoặc để tiết kiệm tài nguyên máy chủ cho một bảng lớn.
Sau khi nhập bảng, tất cả dữ liệu có thể được cập nhật; đây chỉ là một bảng HTML thông thường có thể chỉnh sửa như một plugin! Bảng tính WordPress.
Mặt khác, sau khi xây dựng một bảng gọn gàng với tất cả dữ liệu bạn muốn, bạn có thể xuất nó dưới dạng tệp Excel thông thường và,amp, chạy lại bảng tính Excel đã cập nhật sau đó. Người dùng của bạn giờ đây có thể xuất bảng dưới dạng bảng tính Excel trên giao diện người dùng WordPress.
WP Table Manager cũng đồng bộ hóa với Office 365 thông qua OneDrive.
Công cụ nhập và xuất tệp Excel của OneDrive đã có sẵn; tiết kiệm thời gian bằng cách nhập và chỉnh sửa tệp của bạn mọi lúc mọi nơi. Nâng cao hiệu quả làm việc hơn nữa với tính năng đồng bộ hóa tệp OneDrive! Chọn một tệp Excel Office 365 để đồng bộ hóa, tự động điều chỉnh và tệp đó sẽ hiển thị trực tiếp trên trang web của bạn.
WP Table Manager giúp bạn xây dựng và nhập bảng từ cơ sở dữ liệu; giờ đây nó đã bao gồm một công cụ tạo bảng từ nội dung cơ sở dữ liệu của trang web, điều mà trước đây không có. Bạn có thể chọn bảng và cột từ cơ sở dữ liệu, áp dụng các bộ lọc có thể cấu hình và quản lý bảng thông qua giao diện WP Table manager . Khi cơ sở dữ liệu được cập nhật, bảng của bạn sẽ tự động được tăng lên! Ngoài ra, bạn còn có các tùy chọn sắp xếp, lọc, thiết kế tự động và phân trang.
Nếu bạn không phải là nhà phát triển, bạn có thể trực quan hóa việc kết nối bất kỳ dữ liệu nào từ cơ sở dữ liệu với bảng HTML của mình. Tất cả các bảng trong cơ sở dữ liệu của bạn sẽ được hiển thị trong quá trình tạo bảng mới từ nội dung cơ sở dữ liệu.
Cơ sở dữ liệu trang web của bạn có thể thực hiện tìm kiếm đơn giản và chọn các bảng và cột; điều này khá hữu ích trong một cơ sở dữ liệu lớn. Hơn nữa, trình hướng dẫn sẽ giúp bạn từng bước thao tác với bảng từ cơ sở dữ liệu.
Ở bước cuối cùng, trước khi xem trước bảng từ cơ sở dữ liệu, bạn có thể viết truy vấn tùy chỉnh của mình trên các bảng cơ sở dữ liệu đã chỉ định. Chúng tôi hỗ trợ một số hàm như SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
Một bảng trong cơ sở dữ liệu đôi khi có rất nhiều hàng; do đó, tùy chọn này có thể giúp hiển thị bảng sao cho phù hợp với màn hình của bạn. Ngoài ra, bạn có thể thiết lập trước số lượng hàng của bảng trên mỗi trang. Hơn nữa, bạn cũng có thể chọn một cột để sắp xếp toàn bộ bảng theo mặc định.
Việc kết nối bảng cơ sở dữ liệu WordPress không chỉ giới hạn ở các bảng của WordPress. Tất cả các bảng không thuộc WordPress nhưng được cài đặt trên cùng một cơ sở dữ liệu đều có thể được kết nối.
Trong khối lượng dữ liệu khổng lồ trên bảng của bạn, bạn có thể tạo một vài quy tắc tùy chỉnh để tập trung vào một đối tượng cụ thể. Nếu bạn quen thuộc với nó, bạn có thể sử dụng các toán tử cơ sở dữ liệu như >, <, LIKE, IN…
Bạn có thể chỉnh sửa các bảng trong cơ sở dữ liệu đã tạo giống như bất kỳ bảng nào khác (nếu người dùng có quyền truy cập vào tính năng đó); điều này khá tiện lợi để chỉnh sửa hàng loạt dữ liệu trong cơampdữ liệu, ví dụ như nhiều ngày xuất bản sau đó, mà nếu làm từng cái một sẽ mất khá nhiều thời gian.
Phần kết luận
Bảng là một trong những cách hiệu quả nhất để trình bày thông tin. Tuy nhiên, đối với người không rành về kỹ thuật, việc tạo bảng trên trang web là một thách thức. Sử dụng pluginnày, bạn có thể dễ dàng tạo ra các bảng có thể đọc được trên mọi thiết bị chỉ với vài bước đơn giản. Hơn nữa, các bảng có khả năng thích ứng chắc chắn sẽ mang lại trải nghiệm tổng thể tích cực cho khách truy cập trang web của bạn. Vì vậy, hãy thử và cho chúng tôi biết trải nghiệm của bạn trong phần bình luận bên dưới nhé.
