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 độ rộng màn hình khác nhau. Các bảng được tạo bằng HTML đơn giản vào thời xa xưa. 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 đã phải vật lộn để theo kịp nhu cầu của các trang web hiện đại. Bởi vì các bảng HTML đơn giản không phản hồi nên văn bản có trong chúng cực kỳ khó đọc trên kích thước màn hình di động, đó là lý do tại sao chúng được sử dụng để phát triển các Bảng phản hồi thích ứng với bố cục của chúng tùy thuộc vào kích thước màn hình mà chúng đang được xem, Truy vấn phương tiện HTML và 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 plugin bả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ác bảng có thể được xây dựng với bố cục dễ đọc trên tất cả các kích thước màn hình cho một tập hợp thông tin 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 nhằm mục đích chứa một lượng dữ liệu đáng kể thì không dễ để tạo 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.
Nếu nhà thiết kế web làm việc với HTML và CSS để tạo một bảng phản hồi trên mọi kích thước màn hình mà không xem xét đến số lượng dữ liệu thì họ có thể gặp phải các vấn đề ảnh hưởng đáng kể đến khả năng đọc 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 vào thực tế khi cố gắng tạo bảng phản hồi theo cách thủ công.
Trong khi giảm kích thước của bảng để phù hợp với màn hình nhỏ hơn, bạn sẽ cần xây dựng nhiều lớp CSS, với mỗi lớp nhắm mục tiêu đến một độ phân giải màn hình cụ thể.
Một giải pháp thay thế mà bạn có thể làm là ẩn các cột cụ thể khỏi 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ể bao gồm cuộn ngang hoặc cuộn dọc trong đầu trang và chân trang của bảng.
Tạo một bảng duy nhất có thể điều chỉnh tỷ lệ để phù hợp với mọi kích thước màn hình và thu phóng bảng để làm cho tài liệu dễ đọc hơn.
Những giải pháp này đòi hỏi nhiều nỗ lực 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 để trình bày cách xây dựng các bảng phản hồi bằng cách sử dụng các tính năng tích hợp của Divi. Kiểm tra nó ở đây. Họ đã thêm khả năng cuộn ngang vào các cột tràn vùng chứa bảng, cho phép bảng phản hồi nhanh hơn với dữ liệu đầu vào của người dùng. Bạn có thể tìm hiểu thêm bằng cách vào trang hướng dẫn:
Giải pháp 2: Sử dụng plugin bảng có chức năng này theo mặc định!
Việc tạo bảng phản hồi cho trang web Divi của bạn không còn là vấn đề nữa nhờ có rất nhiều giải pháp plugin MIỄN PHÍ có sẵn trong kho. Tuy nhiên, hơi khó để tìm thấy plugin bảng có tùy chọn phản hồi tích hợp trên thiết bị di động. plugin phổ 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 tôi xem xét một trong plugin WP Tabe Builder tốt nhất.
WP Table Manager
WP Table Manager là plugin bảng WordPress duy nhất cung cấp toàn bộ giao diện bảng tính để quản lý bảng. Tạo bảng, chọn chủ đề và bắt đầu chỉnh sửa bảng ngay khi bạn tạo xong chúng. Bạn sẽ được hưởng lợi từ một bộ toàn diện các tính năng chỉnh sửa bảng mạnh mẽ, 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 Trang tính và Office 365; nó đơn giản như việc nhấp vào một ô và chỉnh sửa dữ liệu có hoặc không có sự hỗ trợ của trình soạn thảo văn bản trực quan để người dùng cuối thay đổi bảng.
WP Table Manager cho phép bạn thiết kế các bảng hấp dẫn, đáp ứng bằng giao diện trực quan đơn giản. Nó là miễn phí để sử dụng. Khi bạn đã kích hoạt nó, bạn sẽ được chuyển đến hướng dẫn thiết lập. Thực hiện theo các thủ tụ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ể có phép thuật, bạn đã tạo ra một chiếc bàn đẹp hiển thị đẹp mắt trên mọi thiết bị ở mọi kích thước. Sau đó, tất cả những gì bạn phải làm là sao chép mã ngắn và dán nó vào trang mà bạn muốn nó xuất hiện. Trình xây dựng hiện cung cấp bảy thành phần (Văn bản, Hình ảnh, Danh sách, Nút, Xếp hạng theo sao, HTML tùy chỉnh và Mã ngắn) mà bạn có thể kéo và thả vào phần giữ chỗ của 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 định giá, bảng danh sách, v.v.; đây là plugin Bảng mà chúng tôi đã phát hiện ra trong quá trình nghiên cứu là thân thiện với người mới sử dụng nhất. 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ỳ loại chức năng lọc nào khác. Ngoài ra, nếu bạn có ý đị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 loại kịch bản 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ể bao gồm mã ngắn trong mô-đun mã hoặc mô-đun văn bản trong Divi.
Chủ đề DIVI bao gồm WP Table Manager .
plugin WP Table Manager trả lời để quản lý chi tiết khi xử lý bảng;
- Khi tùy chọn bộ lọc được kích hoạt trên bảng của bạn, bạn có thể tìm kiếm dữ liệu từng cột và lọc toàn bộ bảng. Nó cũng hoạt động trên các bảng lớn, bao gồm cả phân trang
- Mũi tên lên xuống hiện trên mỗi cột sẽ sắp xếp dữ liệu bảng của bạn. Thứ tự dữ liệu bảng cũng hoạt động trên các bảng lớn, bao gồm cả phân trang.
- Sau khi đã tạo bảng với tất cả dữ liệu mình cần, 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 đó có thể khá có lợi 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 chạy sau cuộc đua theo thứ tự đến.
- 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 trang web của mình trong khi vẫn duy trì tài nguyên máy chủ của mình. Chọn số lượng hàng đặt trước của bảng, 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 WP Table Manager . Tuy nhiên, bạn chỉ có thể nhập và chuyển đổi dữ liệu Excel dưới dạng bảng HTML có thể chỉnh sửa hoặc nhập tệp Excel với kiểu bao gồm màu sắc, hình nền, kích thước cột, liên kết.
Quản lý bảng Excel của bạn và xuất bản nó trên trang web WordPress của bạn! Bạn có thể tải tệp Excel lên bảng thông qua quản lý phương tiện WordPress hoặc ứng dụng 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 thường xuyên, từ một phút đến một ngày. Độ trễ đồng bộ hóa tự động cũng có thể được xác định để tránh các cập nhật bảng công khai không mong muốn của WordPress 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 được như một plugin ! Bảng tính WordPress.
Mặt khác, sau khi tạo 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 bảng đó dưới dạng tệp Excel thông thường và amp chạy lại bảng Excel đã cập nhật sau đó. Người dùng của bạn hiện có thể xuất bảng dưới dạng trang 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ó sẵn công cụ nhập và xuất tệp OneDrive Excel; tiết kiệm thời gian bằng cách nhập và sửa đổi các tệp của bạn khi đang chạy. Làm việc hiệu quả hơn nữa với tính năng đồng bộ tệp OneDrive! Chọn tệp Office 365 Excel để đồng bộ hóa, điều chỉnh tự động và tệp này 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ừ một tập hợp nội dung cơ sở dữ liệu trang web mà trước đây không có sẵn. Các bảng và cột từ cơ sở dữ liệu được chọn, các bộ lọc có thể định cấu hình được áp dụng và các bảng được quản lý 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 tăng lên! Ngoài ra, bạn có các tùy chọn sắp xếp, lọc, thiết kế tự động và phân trang theo ý mình.
Nếu bạn không phải là nhà phát triển, bạn có thể kết nối trực quan bất kỳ tài liệu cơ sở dữ liệu nào 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 đều được hiển thị khi 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 của bạn; điều này khá có lợi trong một cơ sở dữ liệu rộng lớn. Hơn nữa, trình hướng dẫn sẵn sàng giúp bạn xử lý bảng từ cơ sở dữ liệu theo từng bước.
Ở giai đoạn 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 được chỉ định. Chúng tôi hỗ trợ một số chức năng, như CHỌN, THAY THẾ, ĐỔI TÊN, HIỂN THỊ, GIẢI THÍCH, MÔ TẢ.
Một bảng cơ sở dữ liệu đôi khi có nhiều hàng; do đó, tùy chọn này có thể giúp hiển thị bảng vừa với màn hình của bạn. Ngoài ra, bạn có thể đặt số lượng hàng được xác định trước của bảng, 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.
Kết nối bảng cơ sở dữ liệu WordPress không chỉ giới hạn ở các bảng WordPress. Tất cả các bảng không phải từ 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 số lượng dữ liệu khổng lồ trên bảng của bạn, bạn có thể tạo một số 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ể chơi với các toán tử cơ sở dữ liệu như >, <, THÍCH, IN…
Các bảng từ cơ sở dữ liệu bạn đã tạo có thể được chỉnh sửa 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 hợp lý đó); điều này khá thuận tiện để chỉnh sửa hàng loạt một số dữ liệu cơ sở dữ liệu, chẳng amp như một số ngày sau xuất bản mà lẽ ra sẽ mất một khoảng thời gian nếu thực hiện từng cái một.
Phần kết luận
Bảng là một trong những cách hiệu quả nhất để giới thiệu một tập hợp thông tin. Tuy nhiên, đối với người ít kỹ thuật, việc tạo bảng trên trang web là một thách thức. Bằng cách sử dụng plugin này, bạn có thể dễ dàng tạo các bảng có thể đọc được trên mọi thiết bị chỉ bằng vài bước đơn giản. Hơn nữa, các bảng đáp ứ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.
