Tôi có nên sử dụng bảng HTML vào năm 2022 không?

Bảng là một cách tuyệt vời để trình bày dữ liệu, nhưng chỉ khi chúng được thực hiện đúng cách. Dưới đây là 10 mẹo để đảm bảo các bảng HTML của bạn ngang bằng

Elenor Vandenberg

Xuất bản ngày 14 tháng 12 năm 2022

Các bảng HTML là một phần quan trọng trong quá trình phát triển web, nhưng chúng có thể khó sử dụng đúng. Nếu bạn không quen thuộc với các bảng HTML, bạn rất dễ mắc lỗi có thể dẫn đến hiệu suất kém, các vấn đề về khả năng truy cập và trải nghiệm người dùng kém

Để giúp bạn tạo các bảng HTML tốt nhất có thể, chúng tôi đã tổng hợp danh sách 10 phương pháp hay nhất về bảng HTML. Bằng cách làm theo các phương pháp hay nhất này, bạn có thể đảm bảo rằng các bảng của mình có cấu trúc tốt, dễ truy cập và hoạt động hiệu quả

1. Sử dụng phần tử để đặt tiêu đề cho bảng

Phần tử được sử dụng để cung cấp tiêu đề cho bảng HTML. Nó phải được đặt ngay sau thẻ mở và trước bất kỳ nội dung nào khác trong bảng, chẳng hạn như hàng hoặc cột. Điều này đảm bảo rằng chú thích sẽ luôn xuất hiện ở đầu bảng, giúp người dùng dễ hiểu nội dung của bảng hơn

Sử dụng phần tử cũng giúp với khả năng truy cập. Trình đọc màn hình có thể sử dụng chú thích để nhanh chóng xác định mục đích của bảng, điều này giúp những người khiếm thị điều hướng trang dễ dàng hơn. Ngoài ra, các công cụ tìm kiếm có thể sử dụng chú thích để hiểu rõ hơn về ngữ cảnh của bảng, điều này có thể giúp cải thiện thứ hạng SEO

Khi sử dụng phần tử, điều quan trọng là phải đảm bảo rằng văn bản mang tính mô tả và ngắn gọn. Chú thích phải giải thích rõ ràng nội dung của bảng mà không quá dài hoặc dài dòng. Điều này sẽ đảm bảo rằng người dùng có thể dễ dàng hiểu nội dung của bảng trong nháy mắt

2. Đảm bảo mỗi bảng có một tên có thể truy cập

Mục đích của tên có thể truy cập là để cung cấp mô tả ngắn gọn về nội dung của bảng. Điều này giúp những người khuyết tật, chẳng hạn như những người mù hoặc có thị lực kém, hiểu được thông tin nào có trong bảng. Nó cũng giúp những người khác nhanh chóng quét và hiểu dữ liệu được trình bày dễ dàng hơn

Để đảm bảo mỗi bảng có tên có thể truy cập, nhà phát triển nên sử dụng phần tử. Chú thích phải được đặt ngay sau thẻ mở và trước bất kỳ thành phần nào khác trong bảng. Văn bản bên trong chú thích phải mô tả chính xác nội dung của bảng. Ví dụ: nếu bảng chứa số liệu bán hàng cho các sản phẩm khác nhau, chú thích có thể là “Số liệu bán hàng theo sản phẩm”

Các nhà phát triển cũng có thể sử dụng thuộc tính tiêu đề trên

yếu tố để cung cấp một tên có thể truy cập. Tuy nhiên, phương pháp này không được khuyến nghị vì trình đọc màn hình có thể bỏ qua nó. Ngoài ra, một số trình duyệt không hỗ trợ thuộc tính tiêu đề

Điều quan trọng cần lưu ý là tên có thể truy cập không được chứa bất kỳ thuật ngữ kỹ thuật hoặc từ viết tắt nào. Thay vào đó, nó nên được viết bằng ngôn ngữ đơn giản để tất cả người dùng có thể dễ dàng hiểu được

3. Sử dụng thuộc tính phạm vi cho tiêu đề

Thuộc tính phạm vi được sử dụng để xác định mối quan hệ giữa ô tiêu đề và ô dữ liệu mà nó liên quan. Nó có thể được áp dụng cho cả hai

Việc sử dụng thuộc tính phạm vi giúp người dùng sử dụng các công nghệ hỗ trợ như trình đọc màn hình dễ truy cập bảng hơn. Trình đọc màn hình có thể diễn giải thuộc tính phạm vi và sử dụng nó để hiểu rõ hơn về cấu trúc của bảng và cách mỗi ô liên quan đến nhau. Điều này giúp người dùng khiếm thị dễ dàng điều hướng và hiểu các bảng phức tạp hơn

Khi sử dụng thuộc tính phạm vi, có hai giá trị chính nên được sử dụng. hàng và cột. Giá trị hàng cho biết rằng ô tiêu đề áp dụng cho tất cả các ô trong cùng một hàng, trong khi giá trị cột cho biết rằng ô tiêu đề áp dụng cho tất cả các ô trong cùng một cột. Ví dụ: nếu bạn có một bảng có ba cột và bốn hàng, bạn cần chỉ định thuộc tính phạm vi cho từng ô trong số ba ô tiêu đề, đặt giá trị thành “hàng” hoặc “cột”

Cũng cần lưu ý rằng khi sử dụng thuộc tính phạm vi, bạn phải luôn bao gồm thuộc tính id để ô tiêu đề có thể được liên kết với các ô dữ liệu tương ứng của nó. Điều này đảm bảo rằng các mối quan hệ giữa tiêu đề và các ô dữ liệu được xác định và hiểu đúng bởi các công nghệ hỗ trợ

4. Tránh sử dụng bảng cho mục đích bố cục

Sử dụng bảng cho mục đích bố trí không đúng về mặt ngữ nghĩa. HTML được thiết kế để trở thành một ngôn ngữ ngữ nghĩa, nghĩa là nó nên được sử dụng để mô tả nội dung của một trang và cấu trúc của nó. Bảng dùng để hiển thị dữ liệu dạng bảng, chẳng hạn như thông tin tài chính hoặc kết quả khoa học, không phải để tạo bố cục trực quan

Khi sử dụng các bảng cho mục đích bố trí, nó có thể làm cho mã khó đọc và khó bảo trì hơn. Điều này là do các thành phần bảng sẽ cần được lồng vào nhau để đạt được bố cục mong muốn, bố cục này có thể nhanh chóng trở nên khó hiểu và khó theo dõi. Ngoài ra, nếu cần thay đổi bố cục, có thể khó xác định mã liên quan

Các bảng cũng có xu hướng kém linh hoạt hơn các phương pháp tạo bố cục khác. Ví dụ: nếu kích thước của cửa sổ trình duyệt bị thay đổi, bảng có thể không điều chỉnh cho phù hợp, dẫn đến bố cục trông khó xử. Ngoài ra, các bảng có thể gây ra sự cố trợ năng vì trình đọc màn hình có thể gặp khó khăn khi điều hướng qua chúng

Sử dụng CSS thay vì bảng cho mục đích bố cục sẽ tốt hơn nhiều từ cả quan điểm ngữ nghĩa và thực tế. CSS cho phép linh hoạt hơn khi tạo bố cục, cũng như làm cho mã dễ đọc và dễ bảo trì hơn. Nó cũng đảm bảo rằng bố cục sẽ nhất quán trên các trình duyệt và thiết bị khác nhau

5. Không lồng các bảng một cách không cần thiết

Các bảng lồng nhau có thể dẫn đến một cấu trúc phức tạp và khó hiểu, gây khó khăn cho việc đọc và bảo trì. Khi lồng các bảng, mỗi bảng phải được đóng đúng cách bằng

(tiêu đề bảng) và (dữ liệu bảng), nhưng nó được sử dụng phổ biến nhất trên tiêu đề bảng. gắn thẻ trước khi mở một cái khác. Nếu điều này không được thực hiện chính xác, nó có thể gây ra lỗi trong mã của bạn hoặc thậm chí phá vỡ bố cục trang của bạn. Ngoài ra, các bảng lồng nhau có thể khiến việc gỡ lỗi bất kỳ vấn đề nào có thể phát sinh trở nên khó khăn hơn, cũng như khiến việc cập nhật bảng trong tương lai trở nên khó khăn hơn

Để tránh lồng bảng không cần thiết, bạn nên sử dụng các phần tử HTML như

, và

thay vì tạo nhiều bảng trong một bảng. Điều này sẽ giúp giữ cho các bảng HTML của bạn có tổ chức và dễ đọc. Nó cũng làm giảm số lượng mã cần được xử lý, điều này có thể cải thiện hiệu suất trang web của bạn. Hơn nữa, việc sử dụng các phần tử HTML khác này cho phép linh hoạt hơn khi tạo kiểu cho bảng của bạn, vì chúng dễ nhắm mục tiêu hơn với bộ chọn CSS

6. Sử dụng đúng các thuộc tính colspan và rowspan

Các thuộc tính colspan và rowspan được sử dụng để xác định số lượng cột hoặc hàng mà một ô sẽ trải dài. Điều này hữu ích khi bạn muốn tạo bố cục bảng phức tạp, chẳng hạn như hợp nhất nhiều ô thành một ô lớn hơn. Ví dụ: nếu bạn có một bảng có ba cột và hai hàng, bạn có thể sử dụng thuộc tính colspan để hợp nhất hai cột đầu tiên thành một cột lớn. Tương tự, bạn có thể sử dụng thuộc tính rowspan để hợp nhất hai hàng đầu tiên thành một hàng lớn

Việc sử dụng các thuộc tính này một cách chính xác cũng giúp đảm bảo rằng các bảng của bạn có thể truy cập được đối với những người dùng dựa vào trình đọc màn hình. Trình đọc màn hình cần có khả năng diễn giải cấu trúc của bảng để đọc thành tiếng chính xác. Nếu bạn không sử dụng đúng các thuộc tính colspan và rowspan thì trình đọc màn hình có thể không diễn giải chính xác cấu trúc của bảng

Điều quan trọng cần lưu ý là khi sử dụng các thuộc tính colspan và rowspan, bạn phải đảm bảo rằng tất cả các ô trong vùng được kéo dài đều trống. Nếu không, trình duyệt sẽ không hiển thị bảng chính xác. Ngoài ra, bạn phải luôn chỉ định chính xác số lượng cột hoặc hàng mà ô sẽ mở rộng. Nếu bạn không chỉ định một con số chính xác thì trình duyệt có thể mặc định chỉ mở rộng trên một cột hoặc một hàng

7. Sử dụng các yếu tố thay vì cho tiêu đề

Phần tử được sử dụng để biểu thị tiêu đề bảng và nó có một số ưu điểm so với phần tử. Thứ nhất, nó cho phép khả năng truy cập tốt hơn vì trình đọc màn hình có thể xác định tiêu đề dễ dàng hơn khi chúng được đánh dấu bằng thẻ. Thứ hai, các trình duyệt sẽ tự động áp dụng kiểu dáng đậm cho các thành phần, làm cho chúng nổi bật so với các ô khác trong bảng. Điều này làm cho các bảng dễ đọc và dễ hiểu hơn trong nháy mắt

Sử dụng các yếu tố thay vì cũng giúp ích cho SEO. Các công cụ tìm kiếm sử dụng thông tin chứa trong các thẻ HTML để xác định cấu trúc nội dung trên một trang. Bằng cách sử dụng đánh dấu chính xác, trình thu thập thông tin của công cụ tìm kiếm có thể hiểu rõ hơn ngữ cảnh của dữ liệu được trình bày trong bảng, điều này có thể giúp cải thiện thứ hạng của bảng trong kết quả tìm kiếm

Khi tạo bảng HTML, điều quan trọng cần nhớ là tất cả các phần tử phải được đặt bên trong phần tử, trong khi tất cả các phần tử phải được đặt bên trong phần tử. Điều này đảm bảo rằng trình duyệt biết phần tử nào là tiêu đề và phần nào là ô bảng thông thường. Ngoài ra, mỗi hàng phải có cùng số lượng và phần tử để bảng hiển thị chính xác

8. Nhóm dữ liệu liên quan với , và thẻ

thẻ được sử dụng để nhóm hàng tiêu đề hoặc các hàng của bảng. Điều này rất quan trọng vì nó cho phép trình đọc màn hình và các công nghệ hỗ trợ khác xác định thông tin tiêu đề cho từng cột, giúp người dùng hiểu dữ liệu trong bảng. Nó cũng giúp các nhà phát triển dễ dàng tạo kiểu riêng cho các phần tử tiêu đề với phần còn lại của bảng

các thẻ được sử dụng để nhóm nội dung cơ thể của một bảng. Điều này rất quan trọng vì nó cho phép nhà phát triển dễ dàng nhắm mục tiêu các phần cụ thể của bảng bằng bộ chọn CSS. Ví dụ: nếu bạn muốn áp dụng kiểu dáng khác cho hàng đầu tiên và hàng thứ hai của bảng, bạn có thể sử dụng. bộ chọn con thứ n trên thẻ để nhắm mục tiêu cụ thể hai hàng đó

các thẻ được sử dụng để nhóm các hàng chân trang hoặc các hàng của bảng. Điều này rất quan trọng vì nó cho phép các nhà phát triển tách nội dung chân trang khỏi phần chính của bảng, giúp dễ dàng tạo kiểu cho các phần tử chân trang khác với phần còn lại của bảng. Ngoài ra, nó có thể giúp cải thiện khả năng truy cập bằng cách cho phép trình đọc màn hình phân biệt giữa nội dung chân trang và nội dung chính của bảng

9. Sử dụng các thuộc tính tóm tắt cho các bảng phức tạp

Mục đích của các thuộc tính tóm tắt là cung cấp một mô tả ngắn gọn về cấu trúc và nội dung của bảng. Điều này giúp người dùng bị khiếm thị hoặc sử dụng công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình, hiểu thông tin nào có trong bảng. Nó cũng cung cấp ngữ cảnh cho những người có thể không quen thuộc với dữ liệu được trình bày

Để sử dụng các thuộc tính tóm tắt một cách hiệu quả, điều quan trọng là phải giữ cho chúng ngắn gọn và mang tính mô tả. Tóm tắt phải bao gồm tổng quan về nội dung của bảng, bao gồm mọi mối quan hệ giữa các cột và hàng. Ví dụ: nếu có nhiều cột chứa dữ liệu số, bạn có thể đề cập đến điều này trong thuộc tính tóm tắt. Ngoài ra, nếu có bất kỳ tính năng đặc biệt nào của bảng, chẳng hạn như khả năng sắp xếp, chúng cũng nên được đề cập

Khi thêm thuộc tính tóm tắt vào bảng HTML, chúng nên được đặt trong

nhãn. Điều này đảm bảo rằng tất cả người dùng sẽ có quyền truy cập vào bản tóm tắt bất kể thiết bị hoặc trình duyệt của họ. Ngoài ra, điều quan trọng là đảm bảo rằng bản tóm tắt phản ánh chính xác nội dung của bảng. Nếu bảng thay đổi theo thời gian, phần tóm tắt sẽ được cập nhật cho phù hợp

10. Dán nhãn hàng và cột rõ ràng

Khi gắn nhãn hàng và cột, điều quan trọng là sử dụng nhãn mô tả mô tả chính xác nội dung của từng hàng hoặc cột. Điều này giúp người dùng hiểu thông tin nào đang được trình bày trong bảng cũng như cách tổ chức dữ liệu. Ví dụ: nếu một bảng chứa số liệu bán hàng cho các sản phẩm khác nhau, cột đầu tiên có thể được gắn nhãn “Tên sản phẩm” và cột thứ hai có thể được gắn nhãn “Số liệu bán hàng”

Sử dụng nhãn rõ ràng cũng giúp trình đọc màn hình diễn giải bảng dễ dàng hơn. Trình đọc màn hình được người khiếm thị sử dụng để truy cập nội dung web và họ dựa vào nhãn để hiểu cấu trúc của bảng. Nếu các nhãn không đủ mô tả, người dùng có thể không hiểu được nội dung của bảng

Để gắn nhãn hàng và cột rõ ràng, HTML cung cấp hai yếu tố

(table header) and(table data). Theelement should be used for the headings of each column, while theelement should be used for the data in each cell. It is also important to include an id attribute for eachelement so that it can be referenced from other parts of the page. This will make it easier for screen readers to navigate the table. Additionally, using CSS styles such as font-weight and text-align can help make the labels more visible and readable.

Trước

10 phương pháp hay nhất về React-Redux

Quay lại Thông tin chi tiết

Kế tiếp

10 Thực tiễn Tốt nhất về Tự động hóa

Elenor Vandenberg

Elenor Vandenberg là một nhà phát triển web có niềm đam mê tạo ra các trang web hiện đại và thân thiện với người dùng. Cô ấy có sở trường giải quyết vấn đề và thích cập nhật các công nghệ web mới nhất. Thông qua nghiên cứu và thử nghiệm của mình, Elenor đã trở thành bậc thầy trong việc tạo ra các trang web tuyệt đẹp vừa đẹp mắt vừa có chức năng. Cô ấy có tài năng bẩm sinh trong việc hiểu các ngôn ngữ lập trình phức tạp và thích chia sẻ kiến ​​thức của mình với người khác. Elenor tận tâm giúp khách hàng của mình tạo trang web hoàn hảo để đáp ứng nhu cầu của họ

Bảng HTML có còn phù hợp không?

Các bảng HTML có bị phản đối không?

Tôi có thể sử dụng cái gì thay cho bảng trong HTML?

Các bảng vẫn được sử dụng trong thiết kế web?