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. Các bảng được tạo bằng HTML thuần túy trong những ngày 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, văn bản trong chúng cực kỳ khó đọc trên kích thước màn hình thiết bị di động, đó là lý do tại sao chúng được sử dụng để phát triển các Bảng đáp ứng điều chỉnh 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 Các 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 các plugin bảng bao gồm 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 tạo với bố cục có thể đọc đượ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 với các phương pháp tiếp cận 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ể, thì việc tạo bố cục có thể đọc được trên thiết bị di động hoặc màn hình có chiều rộng nhỏ hơn 786 pixel là điều không dễ dàng.
Nếu nhà thiết kế web làm việc với HTML và CSS để tạo một bảng đáp ứng trên tất cả các kích thước màn hình mà không xem xét số lượng dữ liệu, 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 khi cố gắng tạo các bảng đáp ứng 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 phải tạo nhiều lớp CSS, với mỗi lớp nhắm mục tiêu 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ể được thu nhỏ để phù hợp với tất cả các 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.
Các giải pháp này đòi hỏi một lượng nỗ lự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 để trình bày cách tạo các bảng đáp ứng bằng cách sử dụng các tính năng được tích hợp sẵn của Divi. Kiểm tra nó ra ở đây. Họ đã thêm khả năng cuộn ngang cho các cột làm tràn vùng chứa bảng, cho phép bảng phản hồi nhanh hơn với thông tin nhập 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 các plugin bảng bao gồm chức năng này theo mặc định!
Tạo một bảng đáp ứng cho trang web Divi của bạn 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 repo. Tuy nhiên, sẽ hơi khó khăn khi tìm các plugin bảng có các tùy chọn phản hồi dành cho thiết bị di động được tích hợp sẵn. Các 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 coi một trong những 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 sau khi bạn 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 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 quy trình và thực hiện các điều chỉnh cần thiết theo ý muốn của bạn. Như thể bằng phép thuật, bạn đã tạo ra một chiếc bàn tuyệt đẹ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 shortcode và dán nó vào trang mà bạn muốn nó xuất hiện. Trình tạo hiện 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 chỗ dành sẵn trong bảng bằng cách sử dụ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á cả, bảng danh sách, v.v.; đây là plugin Table mà chúng tôi đã phát hiện ra trong quá trình điều tra để 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 đị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ể đưa mã ngắn vào 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 đáp cho việc quản lý chi tiết khi nói đến việc xử lý các 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 và xuống được trình bày trên mỗi cột sẽ sắp xếp dữ liệu bảng của bạn. Sắp xếp 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.
- Khi bạn đã xây dựng bảng của mình với tất cả dữ liệu bạn 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 một 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 người 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 người dùng trang web của mình trong khi vẫn duy trì tài nguyên máy chủ của bạn. Chọn một lượng đặt trước của các hàng trong 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 của 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 của nó 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ậ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 giống 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 nó dưới dạng tệp Excel thông thường và, đối với ex amp le, hãy chạy lại trang tính Excel được 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ông cụ nhập và xuất tệp OneDrive Excel có sẵn; tiết kiệm thời gian bằng cách nhập và sửa đổi tệp của bạn khi đang chạy. Thậm chí còn năng suất hơn với đồng bộ hóa tệp OneDrive! Chọn một tệp Office 365 Excel để đồng bộ hóa, điều chỉnh tự động và tệp này xuất hiện trên trang web của bạn.
WP Table Manager giúp bạn xây dựng và nhập các tab từ cơ sở dữ liệu; nó bây giờ bao gồm một công cụ để tạo bảng từ một lựa chọn 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 trình 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 ý của 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 được trình bày trong khi tạo một 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 một 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, một trình hướng dẫn ở đây để giúp bạn với bảng từ cơ sở dữ liệu từng bước.
Trong 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ư SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
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ị một bảng vừa với màn hình của bạn. Bên cạnh đó, bạn có thể đặt số lượng hàng của bảng, mỗi trang được xác định trước. 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ố 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ể chơi với các toán tử cơ sở dữ liệu như>, <, LIKE, 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ý đó) (nếu người dùng có quyền truy cập vào tính năng thực tế đó); đ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 như, đối với ex amp le, một số ngày sau khi xuất bản sẽ mất một lúc 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 một người ít kỹ thuật thì việc tạo các bảng trên một trang web là một thách thức. Sử dụng các 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ỉ trong 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ử cái này 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.
