Bảng

Bảng HTML được dùng để hiển thị dữ liệu dạng bảng có hàng và cột. Quyết định sử dụng <table> sẽ dựa trên nội dung bạn đang trình bày và liên quan đến nội dung đó. Nếu dữ liệu được trình bày, so sánh, sắp xếp, được tính toán hoặc tham chiếu chéo, thì <table> có lẽ là lựa chọn phù hợp. Nếu bạn chỉ muốn sắp xếp gọn gàng nội dung không ở dạng bảng, chẳng hạn như một nhóm lớn hình thu nhỏ, bảng biểu không phù hợp: thay vào đó, hãy tạo một danh sách hình ảnh và tạo kiểu cho lưới bằng CSS.

Trong phần này, chúng ta sẽ thảo luận về tất cả các thành phần tạo nên bảng này, cùng với một số tính năng hỗ trợ tiếp cận và khả năng hữu dụng mà bạn nên cân nhắc khi trình bày dữ liệu dạng bảng. Mặc dù về cơ bản, Tìm hiểu HTML không phải là về CSS và có cả một khóa học dành riêng cho để tìm hiểu về CSS, chúng ta sẽ đề cập đến một số thuộc tính CSS dành riêng cho từng bảng.

Các phần tử của bảng theo thứ tự

Thẻ <table> gói nội dung trong bảng, bao gồm tất cả các phần tử của bảng. Vai trò ARIA ngầm ẩn của <table> là table; công nghệ hỗ trợ biết phần tử này là một cấu trúc bảng chứa dữ liệu được sắp xếp theo hàng và cột. Nếu bảng duy trì trạng thái lựa chọn, điều hướng hai chiều hoặc cho phép người dùng sắp xếp lại thứ tự ô, hãy đặt role="grid". Nếu bạn có thể mở rộng và thu gọn các hàng của grid, hãy sử dụng role="treegrid".

Bên trong <table>, bạn sẽ tìm thấy các tiêu đề bảng (<thead>), phần nội dung bảng (<tbody>) và chân trang bảng (<tfoot>) (không bắt buộc). Mỗi chỉ số này được tạo thành từ các hàng trong bảng (<tr>). Hàng chứa các ô tiêu đề bảng (<th>) và các ô dữ liệu bảng (<td>) mà lần lượt chứa tất cả dữ liệu. Trong DOM, trước bất kỳ tính năng nào trong số này, bạn có thể thấy hai tính năng bổ sung: chú thích trong bảng (<caption>) và nhóm cột (<colgroup>). Tuỳ thuộc vào về việc <colgroup> có thuộc tính span hay không, thuộc tính này có thể chứa các phần tử cột trong bảng lồng (<col>).

Các phần tử con của bảng theo thứ tự:

1. Phần tử <caption>
2. Phần tử <colgroup>
3. Phần tử <thead>
4. Phần tử <tbody>
5. Phần tử <tfoot>

Chúng ta sẽ tìm hiểu về các phần tử <table> thành phần con, tất cả đều là không bắt buộc nhưng nên dùng, sau đó hãy xem các hàng, ô tiêu đề của bảng và các ô dữ liệu trong bảng. <colgroup> sẽ được đề cập lần cuối.

Chú thích bảng

Là một phần tử gốc có ngữ nghĩa, <caption> là phần tử ưu tiên phương thức đặt tên cho bảng. <caption> cung cấp một tiêu đề bảng mang tính mô tả, được liên kết theo phương thức lập trình. Đó là hiển thị và được cung cấp cho tất cả người dùng theo mặc định.

Phần tử <caption> phải là phần tử đầu tiên được lồng trong phần tử <table>. Việc thêm mẫu này cho phép tất cả người dùng biết mục đích của bảng ngay lập tức mà không cần phải đọc văn bản xung quanh. Ngoài ra, bạn có thể dùng aria-label hoặc aria-labelledby trên <table> để cung cấp tên thành phần hỗ trợ tiếp cận làm phụ đề. Phần tử <caption> không có thuộc tính riêng.

Chú thích sẽ xuất hiện bên ngoài bảng. Bạn có thể đặt vị trí của phụ đề bằng thuộc tính CSS caption-side, vốn là tốt hơn so với việc sử dụng thuộc tính align không dùng nữa. Thao tác này có thể đặt phụ đề lên trên cùng và xuống dưới cùng. Bên trái và bên phải vị trí bên cạnh, với inline-start và inline-end, chưa được hỗ trợ đầy đủ. Trên cùng là bản trình bày mặc định của trình duyệt.

Tốt nhất là bảng dữ liệu phải có tiêu đề và chú thích rõ ràng, đồng thời phải đủ đơn giản để gần như dễ hiểu. Xin lưu ý rằng không phải tất cả người dùng đều có khả năng nhận thức giống nhau. Khi bảng đề ra đang "đưa ra ý kiến" hoặc cần được diễn giải, hãy cung cấp một bản tóm tắt ngắn gọn về điểm hoặc chức năng chính của bảng. Vị trí đặt bản tóm tắt đó tuỳ thuộc vào độ dài và độ phức tạp của bản tóm tắt đó. Nếu ngắn gọn, hãy sử dụng văn bản đó làm văn bản bên trong của phụ đề. Nếu dài hơn, hãy tóm tắt nội dung đó trong chú thích và cung cấp bản tóm tắt trong phần đoạn trước bảng, liên kết hai đoạn trên với aria-describedby . Việc đặt bảng trong <figure> và đặt phần tóm tắt vào <figcaption> là một lựa chọn khác.

Phân mục dữ liệu

Nội dung của bảng bao gồm tối đa 3 phần: không có hoặc nhiều tiêu đề bảng (<thead>) , phần nội dung của bảng (<tbody>), và chân trang của bảng (<tfoot>). Tất cả đều không bắt buộc, trong đó không có hoặc có nhiều giá trị được hỗ trợ.

Các phần tử này không giúp hoặc cản trở khả năng tiếp cận của bảng, nhưng hữu ích về mặt khả năng hữu dụng. Chúng mang lại hook tạo kiểu. Ví dụ: nội dung tiêu đề có thể được tạo cố định, còn nội dung <tbody> có thể cuộn được. Các hàng không được lồng vào một trong 3 phần tử này sẽ được ngầm ẩn được bao bọc trong một <tbody>. Cả 3 đều có cùng vai trò ngầm ẩn rowgroup. Không có phần tử nào trong số ba phần tử này có thuộc tính riêng của từng phần tử.

Những gì chúng tôi có cho đến thời điểm này:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

Ban đầu, phần tử <tfoot> được chỉ định nằm ngay sau <thead> và trước <tbody> vì lý do hỗ trợ tiếp cận, đó là lý do tại sao bạn có thể gặp thứ tự nguồn không trực quan này trong các cơ sở mã cũ.

Nội dung bảng

Các bảng có thể được chia thành tiêu đề, phần nội dung và chân trang của bảng, nhưng không có mục nào trong số này thực sự có tác dụng nếu các bảng không chứa hàng, ô và nội dung của bảng. Mỗi hàng trong bảng, <tr> chứa một hoặc nhiều ô. Nếu ô là ô tiêu đề, hãy sử dụng <th>. Nếu không, hãy sử dụng <td>.

Biểu định kiểu tác nhân người dùng thường hiển thị nội dung trong ô tiêu đề bảng <th> ở dạng căn giữa và in đậm. Các kiểu mặc định này, và tất cả các kiểu đều được kiểm soát tốt nhất bằng CSS thay vì các thuộc tính không dùng nữa trước đây có sẵn trên từng ô, hàng và thậm chí cả <table>.

Có các thuộc tính để thêm khoảng đệm giữa các ô và trong ô, cho đường viền và để căn chỉnh văn bản. Khoảng đệm ô và tốc độ ô, mã xác định khoảng cách giữa nội dung của một ô và đường viền của ô đó cũng như giữa đường viền của các ô liền kề phải được đặt với CSS đường biên giới-thu gọn và border-spacing các thuộc tính tương ứng. Border-spacing sẽ không có hiệu lực nếu bạn đặt border-collapse: collapse. Nếu border-collapse: separate; được đặt, bạn có thể ẩn hoàn toàn các ô trống bằng empty-cells: hide;. Sau đây là một cách để tìm hiểu thêm về cách tạo kiểu cho bảng bản trình bày tương tác về các kiểu CSS liên quan đến bảng.

Trong ví dụ, chúng tôi đã thêm đường viền trên bảng và mỗi ô riêng lẻ có CSS để làm cho một số tính năng rõ ràng hơn:

Trong ví dụ này, chúng ta có chú thích, tiêu đề bảng và nội dung bảng. Tiêu đề có một hàng chứa 3 ô <th> tiêu đề, do đó tạo ra 3 cột. Phần nội dung chứa ba hàng dữ liệu: ô đầu tiên là ô tiêu đề của hàng, vì vậy chúng ta sử dụng <th> thay vì <td>.

Ô <th> có ý nghĩa ngữ nghĩa, với vai trò ARIA ngầm ẩn của tiêu đề cột hoặc tiêu đề hàng. Phương thức này xác định ô là tiêu đề của cột hoặc hàng của ô của bảng, tuỳ thuộc vào giá trị của thuộc tính scope được liệt kê. Trình duyệt sẽ mặc định là col hoặc row nếu bạn không đặt scope một cách rõ ràng. Vì chúng ta đã sử dụng mã đánh dấu ngữ nghĩa, nên ô 1956 có 2 tiêu đề: Năm và Lou Minious. Mối liên kết này cho chúng tôi biết rằng "1956" là "năm" tốt nghiệp cho "Lou Minious". Trong ví dụ này, như chúng ta có thể thấy toàn bộ bảng, mối liên kết rất rõ ràng. Việc sử dụng <th> sẽ cung cấp mối liên kết ngay cả khi người dùng cuộn ra khỏi chế độ xem cột hoặc hàng tiêu đề. Chúng ta có thể đã đặt rõ ràng <th scope="col">Year</th> và <th scope="row">Lou Minious</th> nhưng với một bảng đơn giản như thế này, các giá trị mặc định được liệt kê sẽ hoạt động. Các giá trị khác của scope bao gồm rowgroup và colgroup, rất hữu ích với các bảng phức tạp.

Hợp nhất ô

Tương tự như MS Excel, Google Trang tính và Số, bạn có thể kết hợp nhiều ô thành một ô duy nhất. Việc này được thực hiện với HTML! Thuộc tính colspan dùng để hợp nhất hai hoặc nhiều ô liền kề nhau trong một hàng. Thuộc tính rowspan dùng để hợp nhất các ô trên các hàng được đặt trên ô ở hàng trên cùng.

Trong ví dụ này, tiêu đề bảng chứa hai hàng. Hàng tiêu đề đầu tiên chứa 3 ô trong 4 cột: ô ở giữa có colspan="2". Thao tác này sẽ hợp nhất 2 ô liền kề. Ô đầu tiên và ô cuối cùng bao gồm rowspan="2". Thao tác này sẽ hợp nhất ô với ô ở hàng bên cạnh, ngay bên dưới nó.

Hàng thứ hai trong tiêu đề bảng chứa 2 ô; đây là các ô dành cho cột thứ hai và thứ ba trong hàng thứ hai. Không có ô nào được khai báo cho cột đầu tiên hoặc cột cuối cùng vì ô trong cột đầu tiên và cột cuối cùng của hàng đầu tiên kéo dài hai hàng.

Trong trường hợp một ô được xác định bởi nhiều ô tiêu đề có các mối liên kết mà chỉ các thuộc tính scope không thể thiết lập, thêm thuộc tính headers kèm theo danh sách tiêu đề liên kết được phân tách bằng dấu cách. Vì ví dụ này là một bảng phức tạp hơn, nên chúng tôi xác định rõ ràng phạm vi của các tiêu đề có thuộc tính scope. Để rõ ràng hơn nữa, chúng ta đã thêm thuộc tính headers vào mỗi ô.

Các thuộc tính headers có thể không cần thiết trong trường hợp sử dụng đơn giản như vậy, nhưng điều quan trọng là bạn phải có chúng trong thanh công cụ của mình dưới dạng các bảng của bạn ngày càng phức tạp hơn. Bảng có cấu trúc phức tạp, chẳng hạn như bảng trong đó tiêu đề hoặc ô được hợp nhất hoặc có thêm hơn hai cấp tiêu đề cột hoặc hàng, yêu cầu xác định rõ ràng các ô tiêu đề được liên kết. Trong các bảng phức tạp như vậy, hãy thể hiện rõ ràng liên kết từng ô dữ liệu với từng ô tiêu đề tương ứng với một danh sách giá trị id được phân tách bằng dấu cách của tất cả tiêu đề liên kết làm giá trị của thuộc tính headers.

Thuộc tính headers thường thấy trên các phần tử <td>, nhưng cũng hợp lệ trên <th>.

Tuy nhiên, cấu trúc bảng phức tạp có thể khiến tất cả người dùng, không chỉ người dùng trình đọc màn hình, khó hiểu. Về mặt nhận thức và về khả năng hỗ trợ trình đọc màn hình, các bảng đơn giản hơn, có ít hoặc không có ô được mở rộng, ngay cả khi không thêm phạm vi và tiêu đề, sẽ dễ dàng hơn đã hiểu. Việc này cũng dễ quản lý hơn!

Tạo kiểu bảng

Có 2 thành phần tương đối ít người biết mà được đề cập ngắn gọn: nhóm cột, <colgroup>, thành phần và thành phần con duy nhất là phần tử cột <col> trống. Chiến lược phát hành đĩa đơn Phần tử <colgroup> dùng để xác định các nhóm cột hoặc phần tử <col> trong bảng.

Nếu được sử dụng, nhóm cột phải được lồng trong <table>, ngay sau <caption> và trước bất kỳ dữ liệu nào trong bảng. Nếu các cột đó nằm trên nhiều cột, hãy sử dụng thuộc tính span.

Thứ tự đường viền nội dung của bảng thường như sau, trong đó <table> và <caption> là hai phần tử phải được bao gồm:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

Cả <colgroup> và <col> đều không có ý nghĩa ngữ nghĩa khi xét đến việc giúp bảng dễ truy cập hơn, nhưng chúng cho phép để giới hạn định kiểu cột, bao gồm cả việc đặt chiều rộng cho cột bằng CSS.

Kiểu <col> sẽ tạo kiểu cho một cột miễn là không có kiểu <td> hoặc <th> nào ghi đè kiểu đó. Ví dụ: khi <colspan> được dùng để hợp nhất các ô trong một số hàng của bảng chứ không phải tất cả, bạn không thể chắc chắn rằng một bộ chọn như tr > *:nth-child(8), Thao tác này chọn phần tử con thứ 8 của mỗi hàng, sẽ đánh dấu toàn bộ cột thứ 8 hoặc đánh dấu cột thứ 8 trong một số hàng, nhưng chỉ có một vài ô cột thứ 9 và thứ 10, tùy thuộc vào việc ô hàng hoặc cột nào được hợp nhất.

Rất tiếc, chỉ có một vài thuộc tính được hỗ trợ, các kiểu không được kế thừa vào các ô và là cách duy nhất để sử dụng <col> phần tử trong các ô nhắm mục tiêu có một bộ chọn phức tạp bao gồm bộ chọn quan hệ :has().

Nếu cả <table> và <colgroup> đều có màu nền, thì background-color của <colgroup> sẽ nằm ở trên cùng. Thứ tự vẽ là: bảng, nhóm cột, cột, nhóm hàng, hàng, trong đó các ô ở cuối và trên cùng, như minh hoạ trong giản đồ bảng các lớp. Các phần tử <td> và <th> không phải là thành phần con của các phần tử <colgroup> hoặc <col> và không kế thừa kiểu của các phần tử này.

Để tạo sọc trên bảng, bộ chọn cấu trúc CSS sẽ rất hữu ích. Ví dụ: tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} sẽ thêm màu đen mờ vào mỗi hàng lẻ trong phần nội dung của bảng để cho phép hiển thị mọi hiệu ứng nền đã đặt trên <colgroup>.

Theo mặc định, bảng không phản hồi. Thay vào đó, các quảng cáo này được định kích thước theo nội dung theo mặc định. Cần thực hiện thêm các biện pháp để có được bàn định kiểu bố cục để hoạt động hiệu quả trên nhiều thiết bị. Nếu bạn đang thay đổi thuộc tính hiển thị CSS cho các phần tử bảng, thêm các thuộc tính ARIA role. Mặc dù điều này có vẻ không cần thiết, nhưng thuộc tính displayCSS có thể ảnh hưởng đến cây hỗ trợ tiếp cận trong một số trình duyệt.

Đang trình bày dữ liệu

Các phần tử trong bảng có ý nghĩa ngữ nghĩa mà các công nghệ hỗ trợ sử dụng để cho phép di chuyển qua các hàng và cột mà không bị 'bị lạc'. Không nên dùng phần tử <table> để trình bày. Nếu bạn cần có tiêu đề nằm trên một danh sách, hãy sử dụng tiêu đề và một danh sách. Nếu bạn muốn bố trí nội dung trong nhiều cột, hãy sử dụng bố cục nhiều cột. Nếu bạn muốn bố trí nội dung trong lưới, hãy sử dụng lưới CSS. Chỉ sử dụng bảng cho dữ liệu. Hãy nghĩ theo cách này: nếu dữ liệu của bạn cần có bảng tính để trình bày trong cuộc họp, hãy sử dụng <table>. Nếu muốn dùng các tính năng có trong phần mềm trình bày như Keynote hoặc PowerPoint, bạn có thể cần có một danh sách nội dung mô tả.

Mặc dù việc sắp xếp các cột trong bảng là mục đích của JavaScript, nhưng việc đánh dấu tiêu đề của bạn để cho người dùng biết cột có thể sắp xếp là mục đích của HTML. Hãy cho người dùng biết các cột trong bảng có thể sắp xếp theo biểu tượng hiển thị theo thứ tự tăng dần, giảm dần hoặc chưa được sắp xếp. Cột hiện được sắp xếp phải bao gồm thuộc tính aria-sort có giá trị được liệt kê của hướng sắp xếp. <caption> có thể thông báo thông tin cập nhật một cách lịch sự đối với thứ tự sắp xếp qua aria-live và span được cập nhật động và hiển thị cho người dùng trình đọc màn hình. Vì có thể sắp xếp cột bằng cách nhấp vào nội dung tiêu đề, nên nội dung tiêu đề phải là <button>.

Nếu bạn hiện không trình bày dữ liệu dạng bảng, đừng sử dụng <table>. Nếu bạn dùng bảng để trình bày, hãy đặt role="none".

Nhiều nhà phát triển sử dụng bảng để bố trí biểu mẫu nhưng không nhất thiết phải làm như vậy. Tuy nhiên, bạn cần biết về biểu mẫu HTML, nên chúng ta sẽ đề cập đến vấn đề đó trong phần tiếp theo.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về bảng.