Tables with multi-level headers have multiple header cells associated per data cell: For tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way, use id and headers attributes to associate header and data cells explicitly.Ĭaption & Summary : A caption identifies the overall topic of a table and is useful in most situations. Tables with irregular headers have header cells that span multiple columns and/or rows: For these tables, define column and row groups and set the range of the header cells using the colgroup and rowgroup values of the scope attribute. Tables with two headers have a simple row header and a simple column header: For tables with unclear header directions, define the direction of each header by setting the scope attribute to col or row. Tables with one header for rows or columns: For tables with content that is easy to distinguish, mark up header cells with and data cells with elements.
#Display tabular data without tables how to#
This tutorial shows you how to apply appropriate structural markup to tables. For more complex tables, explicit associations may be needed using scope, id, and headers attributes. Header cells must be marked up with, and data cells with to make tables accessible. Assistive technologies use this information to provide context to users.
Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Data tables are used to organize data with a logical relationship in grids.
0 kommentar(er)
