Các bảng trong hệ thống quản lý nội dung Hiện diện Kỹ thuật số Đơn [SDP] có thể được xây dựng bằng cách sử dụng thành phần nội dung Nội dung văn bản Cơ bản
Vì lý do trợ năng, bạn phải luôn có các tiêu đề bảng được gắn thẻ chính xác dưới dạng hàng tiêu đề và chú thích bảng nếu có [thường nên có]
NămTổng số tiền [$]201923,100202019,870202121,100
Đặt căn chỉnh
Hầu hết, các bảng nên được căn trái vì chúng ta đọc từ trái sang phải. Tuy nhiên, các bảng số liệu tài chính nên có các cột có số được đặt thành căn phải
Để đặt căn chỉnh, bạn cần vào mã nguồn và chỉnh sửa HTML. Các tùy chọn mã bạn cần sao chép là
- căn chỉnh = "trái"
- căn chỉnh = "đúng"
- align="center" [lưu ý cách viết của Hoa Kỳ]
- căn chỉnh = "căn chỉnh"
Hãy nhớ thêm khoảng cách giữa th hoặc td và đoạn mã căn chỉnh, để nó trông như thế này
Cách thêm mã
Nhấp vào nút Nguồn
Bạn sẽ thấy một số mã như thế này
Các ô tiêu đề được mã hóa bằng
Các ô còn lại được mã hóa
Để căn lề phải cho cột thứ 2 trong ví dụ, bạn cần thêm đoạn mã vào và tất cả các thẻ tương ứng
Đây là một ví dụ, sử dụng mã ở trên với phần căn chỉnh được thêm vào
Đây là cách bảng sẽ hiển thị với căn lề phải được đặt trên cột thứ hai
NămTổng số tiền [$]201923,100202019,870202121,100
Đặt chiều rộng cột
Bạn có thể đặt chiều rộng cột chỉ trong hàng tiêu đề và hướng dẫn đó sẽ kiểm soát toàn bộ cột. [Điều này khác với căn chỉnh mà bạn phải thiết lập trong mọi ô. ]
Tại sao bạn có thể muốn đặt chiều rộng cột
Một lý do khiến bạn có thể muốn làm điều này khi bạn có một trang có nhiều bảng giống nhau và do độ dài nội dung khác nhau nên chúng hiển thị với độ rộng cột khác nhau. Trong trường hợp này, chỉ đặt chiều rộng của cột đầu tiên sẽ làm cho nội dung trang trông đẹp hơn
Cách đặt độ rộng cột theo cách thủ công
Chiều rộng được kiểm soát bởi CSS của chúng tôi [một biểu định kiểu kiểm soát giao diện của các trang web]
Trong CSS cho vic. chính phủ. au chúng tôi đã đặt trước 12 chiều rộng cố định tương ứng với tỷ lệ phần trăm của vùng văn bản trên màn hình [với các chiều rộng khác nhau cho các thiết bị khác nhau. máy tính để bàn, máy tính bảng hoặc thiết bị di động]
Nếu chúng ta lấy bảng trên làm ví dụ thì bạn thêm đoạn code như sau
Bạn thường không cần đặt chiều rộng của tất cả các cột. Trên trang này, tôi chỉ đặt chiều rộng của cột đầu tiên trong mỗi bảng
Dưới đây là 12 đoạn mã và bao nhiêu phần trăm chúng sẽ được áp dụng
NămTổng số tiền [$]Đoạn mãPhần trăm của widthclass="rpl-table--col-1"8. 33%class="rpl-table--col-2"16. 67%class="rpl-table--col-3"25%class="rpl-table--col-4"33. 32%class="rpl-table--col-5"41. 65%class="rpl-table--col-6"50%class="rpl-table--col-7"58. 3%class="rpl-table--col-8"66. 65%class="rpl-table--col-9"75%class="rpl-table--col-10"83. 3%class="rpl-table--col-11"91. 63%class="rpl-table--col-12"100%Ví dụ về cách hiển thị độ rộng cột khác nhau
Thường thì bạn chỉ muốn đặt cột đầu tiên và để chiều rộng của các cột khác tự động hiển thị theo nội dung
Bảng này có cột đầu tiên được đặt để hiển thị ở 17% chiều rộng của bảng
W2Col 2Col 3Col 4Col 517%texttexttexttextthintexttexttexttext
Bảng này có cột đầu tiên được đặt để hiển thị ở 33% chiều rộng của bảng
Chiều rộng 4Col 2Col 3Col 4Col 533%texttexttexttexttexttexttexttexttext
Bảng này có cột đầu tiên được đặt để hiển thị ở 50% chiều rộng của bảng. Cột thứ năm có một số văn bản dài hơn và điều này ảnh hưởng đến cách các cột 2, 3, 4 và 5 hiển thị trong mối quan hệ với nhau
Độ rộng cột 6 = 50%Col 2Col 3Col 4Col 5texttexttexttextTrong 2 bảng trên, tất cả các ô đều có văn bản có kích thước bằng nhau, vì vậy các cột hiển thị có độ rộng bằng nhau. texttexttexttextCột này có văn bản dài hơn trong đó ảnh hưởng đến chiều rộng hiển thị của cột này so với các cột khác
Bảng này có cột đầu tiên được đặt để hiển thị ở 75% chiều rộng của bảng. Điều đó không để lại nhiều không gian để hiển thị nội dung trong các cột khác
Độ rộng cột 9 = 75%Col 2Col 3Col 4Col 5texttexttexttexttexttext text text text texttexttexttexttexttext
Hợp nhất các ô trong hàng hoặc cột
Đôi khi, bạn có thể muốn hợp nhất một số ô trong hàng tiêu đề của bảng
Điều này không lý tưởng cho khả năng truy cập - đảm bảo bạn đã đọc ghi chú bên dưới
Để hợp nhất các ô của bảng, bạn thực hiện thông qua mã nguồn
Sử dụng mã colspan
Nếu bạn đang hợp nhất các ô trong một cột [chẳng hạn như tiêu đề], bạn sẽ chèn mã và loại bỏ các ô thừa liên quan đến việc mở rộng
Bảng này có hàng đầu tiên được thiết lập làm hàng tiêu đề
Trong ví dụ này, bảng có 5 cột. Chúng tôi đã hợp nhất các ô tiêu đề trong cột 1,2 và 3 và xóa đoạn mã tiêu đề cho cột 2 và 3. Phần còn lại của bảng có 5 ô mỗi hàng
Đây là những gì đoạn mã trên trông giống như
Đầu 1,2,3Đầu 4Đầu 5blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah
Sử dụng mã rowspan
Nếu bạn đã thiết lập một bảng và chọn cột đầu tiên làm hàng tiêu đề, bạn sẽ nhận thấy mã trông khác với mã ở trên. Không có thẻ, thay vào đó, ô đầu tiên trong mỗi hàng có biểu thị đó là tiêu đề. Đây là một ví dụ
Đây là những gì đoạn mã trên trông giống như
Dữ liệu đầu 1dữ liệuĐầu 2dữ liệudữ liệuĐầu 3dữ liệudữ liệuđầu 4dữ liệu
Để hợp nhất các ô hàng, bạn chèn mã và loại bỏ các ô thừa liên quan đến việc mở rộng
Trong ví dụ này, bảng có 3 cột. Chúng tôi đã hợp nhất các ô tiêu đề trong cột 1, hàng 1 và 2. Ô có thẻ ở hàng thứ hai đã bị xóa
Đây là cách bảng này hiển thị
Đầu 1 & 2dữ liệudữ liệudữ liệuĐầu 3dữ liệudữ liệu
Trợ năng và các ô bảng được hợp nhất
Không lạm dụng các ô đã hợp nhất trong bảng, chúng có thể gây khó khăn cho trình đọc màn hình, đặc biệt là trong các bảng dữ liệu phức tạp
Ví dụ: một ứng dụng đọc màn hình phổ biến, miễn phí - NVDA - không thông báo khi một ô kéo dài qua nhiều hàng hoặc cột. [Nguồn. truy cập-nhà phát triển-hướng dẫn. com]
Một số người dùng có thể thấy dễ dàng hơn khi làm việc với một số bảng đơn giản hơn là một bảng phức tạp hơn. Tác giả nên xem xét liệu họ có thể chuyển đổi các bảng phức tạp thành một hoặc nhiều bảng đơn giản hay không. [Nguồn. w3. tổ chức]