Quản trị website – Hướng dẫn cách Reponsive Bảng (table) với công cụ soạn thảo văn bản (CKEditor)

CKEditor là gì?

CKEditor là công cụ soạn thảo văn bản cho phép Nhà quản trị website tùy biến nội dung dữ liệu trình bày định dạng markup HTML (in đậm, in nghiêng, v.v…) như trong mô tả sản phẩm, mô tả dữ liệu các bài tin tức. Để trình bày một cách có khoa học và thuận tiện cho việc cung cấp thông tin đến khách hàng thì Nhà quản trị sẽ sử dụng tính năng tạo Bảng có sẵn trong CKEditor.

Vì ai cũng đã biết khái niệm về bảng và cách sử dụng chúng nên sẽ không bàn luận trong vấn đề này mà sẽ trực tiếp đi vào vấn đề làm sao để bảng có thể tự động Reponsive.

Vậy thì Bảng tại sao cần Reponsive?

Khi thêm bảng Đối với các thông tin ngắn gọn như thông tin sản phẩm, xuất xứ,.. thì có thể không cần vì số lượng cột sử dụng không nhiều. Đối với các thông tin có số lượng nhiều hơn 3 cột thì sẽ là một vấn đề. Khi thực hiện đăng tải với số lượng nhiều mà màn hình của thiết bị di động quá nhỏ bé thì không thể chứa được các thành phần.

Khách hàng thường nhầm lẫn trong việc đưa bảng lên web. Khi thực hiện thường chỉ kiểm tra nhanh ở màn hình máy tính chứ không kiểm tra trên thiết bị di động, Web sẽ không tự động phân giải theo màn hình, nên để có thể thực hiện đưa nhiều cột vào trang thì Quý khách xem tiếp phần sau. 

Thực hiện Reponsive Bảng trên Web30s

Cách thức thực hiện cũng sẽ giống như thông thường. Quý khách thực hiện tạo bảng bằng công cụ CKEditor cung cấp sẵn. 

Lưu ý: Quý khách hàng thực hiện sử dụng cách làm này sẽ cần thực hiện đúng để cho ra kết quả tốt nhất.

Bước 1: Chọn chức năng tạo bảng như hình ảnh dưới đây. 

Bước 2: Nhập số lượng cột và dòng Quý khách muốn. Sau đó chuyển qua Tab mở rộng tiếp túc thực hiện.

Bước 3: Quý khách thực hiện thêm dòng dưới đây vào ô Kiểu.

border-collapse: collapse; width: 100%; border: 1px solid #ddd; min-width: xxx px

Thông tin thêm. Trong đó:

• Border-collapse:collapse sẽ loại bỏ Khoảng trống giữa các đường viền (border) của Bảng bị loại bỏ, chỉ còn đường viền duy nhất.
• width: 100% : sẽ tăng chiều rộng của bảng thành 100% theo kích thước màn hình.
• border: 1px solid #ddd là viền của bảng, có độ dày 1 pixel và mã màu viền là #ddd
• min-width: xxx px : kích thước chiều rộng tối thiểu của bảng. Phần màu đỏ là thông số kích thước của bảng nên tùy vào số lượng cột bảng Quý khách có thể đưa ra các thông số cho bảng hiển thị đẹp nhất. 

Sau khi thực hiện thêm dòng dữ liệu Kiểu, Quý khách nhấn nút Đồng ý.

Bước 4: Quý khách chọn mã HTML (phần màu đỏ) trên phần công cụ và thực hiện thêm đoạn văn sau trên đoạn mã của table.

Quý khách thêm đoạn văn này vào phần xanh dương. Quý khách phải để trước Table. 

<div style=”overflow-x:auto;”>…</div>

Đoạn này Quý khách để dưới cùng của Table sao cho kết quả đạt được có dạng.

<div style=”overflow-x:auto;”>
    <table>
             …….
    </table>
</div>

Thông tin thêm cho đoạn mã quý khách vừa thực hiện. Overflow sẽ điều khiển khi nội dung phần tử vượt quá kích thước của một khu vực.

Khi đã bảo đúng yêu cầu trên Quý khách có thể ấn nút Lưu dữ liệu và kiểm tra lại trang. 

Trong trường hợp không thực hiện được Quý khách có thể liên hệ với Kỹ thuật để kỹ thuật hỗ trợ hướng dẫn. Nếu có câu hỏi khác Quý khách có thể liên hệ tổng đài PA Vietnam 1900 9477 nhánh 2 hoặc gửi yêu cầu đến Kỹ thuật thông qua email kythuat@pavietnam.vn

Quý khách có thể tìm hiểu thêm cho mình nhiều chương trình khuyến mãi của P.A Việt Nam tại đây.

Thông tin kiến thức cơ bản Web30s tại: https://kb.pavietnam.vn/category/web30s
Thông tin kiến thức cơ bản Hosting tại: https://kb.pavietnam.vn/category/hosting
Đăng ký dịch vụ do P.A Việt Nam cung cấp tại: https://www.pavietnam.vn/
Tham khảo thông tin & bảng giá dịch vụ Ads30s tại: https://ads30s.vn/
Tham khảo thông tin & bảng giá dịch vụ Web30s tại: https://web30s.vn/
Tham khảo thông tin & bảng giá dịch vụ Hosting tại: https://www.pavietnam.vn/vn/hosting.html
Tham khảo các Ưu đãi hiện có tại: https://www.pavietnam.vn/vn/tin-khuyen-mai/
Facebook: https://www.facebook.com/pavietnam.com.vn

P.A Việt Nam – Web30s