{"id":21070,"date":"2025-02-03T12:00:33","date_gmt":"2025-02-03T17:00:33","guid":{"rendered":"https:\/\/carleton.ca\/webaccessibility\/?page_id=21070"},"modified":"2026-07-22T09:35:04","modified_gmt":"2026-07-22T13:35:04","slug":"use-of-tables","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/use-of-tables\/","title":{"rendered":"Proper use of tables"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Proper use of tables\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"accessibility\" class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>Properly structured tables allow screen readers to communicate relationships between rows and columns, helping users understand the content.<\/p>\n\n\n\n<p>Tables used to lay out the content of a page are especially inaccessible. Never do this. <\/p>\n\n\n\n<h2 id=\"reason\" class=\"wp-block-heading\">Reason<\/h2>\n\n\n\n<p>Tables are designed to present structured data, but they only work when their structure is clear and meaningful.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Screen readers rely on defined headers and structure to explain how data is related. <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H51.html\">[w3.org]<\/a><\/li>\n\n\n\n<li>If structure is missing or unclear, information may be read in the wrong order or lose its meaning. <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/F34.html\">[w3.org]<\/a><\/li>\n\n\n\n<li>Visually formatted tables (for example, using spacing or layout techniques) do not communicate relationships to assistive technologies.<\/li>\n<\/ul>\n\n\n\n<p>In short, a table must communicate its structure both visually and programmatically to be accessible.<\/p>\n\n\n\n<h2 id=\"best-practice\" class=\"wp-block-heading\">Best practice<\/h2>\n\n\n\n<h3 id=\"copilot-said\" class=\"wp-block-heading\">Copilot said:<\/h3>\n\n\n\n<h3 id=\"use-tables-only-when-appropriate\" class=\"wp-block-heading\">Use tables only when appropriate<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use tables only for data with clear row and column relationships.<\/li>\n\n\n\n<li>Avoid using tables for layout.<\/li>\n\n\n\n<li>Consider whether a list or simple text would be clearer.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"provide-clear-headers\" class=\"wp-block-heading\">Provide clear headers<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Identify row and\/or column headers.<\/li>\n\n\n\n<li>Ensure headers clearly describe the related content.<\/li>\n<\/ul>\n\n\n\n<p>This helps screen reader users understand each data point.<\/p>\n\n\n\n<h3 id=\"keep-tables-simple\" class=\"wp-block-heading\">Keep tables simple<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use a clear structure and reading order.<\/li>\n\n\n\n<li>Avoid merged cells, nested tables, and complex layouts.<\/li>\n<\/ul>\n\n\n\n<p>Simple tables are easier to understand and navigate.<\/p>\n\n\n\n<p>Here is an example of a properly constructed table with a header row and data appropriate to a table.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-left\" data-align=\"left\">Course<\/th><th class=\"has-text-align-left\" data-align=\"left\">Department<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-left\" data-align=\"left\">Math 1001<\/td><td class=\"has-text-align-left\" data-align=\"left\">Math and Statistics<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Statistics 1002<\/td><td class=\"has-text-align-left\" data-align=\"left\">Math and Statistics<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Environmental Studies 2002<\/td><td class=\"has-text-align-left\" data-align=\"left\">Geography and Environmental Studies<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">History of Math 4004<\/td><td class=\"has-text-align-left\" data-align=\"left\">History<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 id=\"add-context-and-description\" class=\"wp-block-heading\">Add context and description<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provide a clear title or caption explaining the table content. <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H39.html\" target=\"_blank\" rel=\"noreferrer noopener\">[w3.org]<\/a><\/li>\n\n\n\n<li>For complex tables, explain the information in surrounding text.<\/li>\n<\/ul>\n\n\n\n<p>Users should understand the table&#8217;s purpose before interacting with it.<\/p>\n\n\n\n<h3 id=\"ensure-completeness-and-readability\" class=\"wp-block-heading\">Ensure completeness and readability<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Do not leave cells empty; use &#8220;0&#8221; or &#8220;no data&#8221; where appropriate.<\/li>\n\n\n\n<li>Follow a logical order from left to right and top to bottom.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"example-of-poor-practice\" class=\"wp-block-heading\">Example of poor practice<\/h2>\n\n\n\n<h3 id=\"using-tables-for-layout\" class=\"wp-block-heading\">Using tables for layout<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A table is used to position images, menus, or page sections<\/li>\n\n\n\n<li>No meaningful relationship exists between rows and columns<\/li>\n\n\n\n<li>Screen readers interpret the content as unrelated data<\/li>\n<\/ul>\n\n\n\n<h3 id=\"missing-headers\" class=\"wp-block-heading\">Missing headers<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A table displays data but does not clearly identify headers<\/li>\n\n\n\n<li>Users cannot tell what each row or column represents<\/li>\n\n\n\n<li>Screen reader users lose important context<\/li>\n<\/ul>\n\n\n\n<h3 id=\"visually-formatted-tables\" class=\"wp-block-heading\">Visually formatted \u201ctables\u201d<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Content is aligned using spaces or line breaks instead of proper table structure<\/li>\n\n\n\n<li>It may look correct visually, but assistive technologies cannot interpret it properly <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/F34.html\">[w3.org]<\/a><\/li>\n<\/ul>\n\n\n\n<h3 id=\"overly-complex-tables\" class=\"wp-block-heading\">Overly complex tables<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Multiple merged cells or nested tables<\/li>\n\n\n\n<li>Irregular layout or inconsistent structure<\/li>\n\n\n\n<li>Difficult to navigate and understand, especially with assistive technology<\/li>\n<\/ul>\n\n\n\n<h2 id=\"additional-benefits\" class=\"wp-block-heading\">Additional benefits<\/h2>\n\n\n\n<h3 id=\"usability\" class=\"wp-block-heading\">Usability<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Makes information easier to scan and compare<\/li>\n\n\n\n<li>Improves clarity for all users<\/li>\n<\/ul>\n\n\n\n<h3 id=\"seo\" class=\"wp-block-heading\">SEO<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Proper structure helps search engines better understand content<\/li>\n\n\n\n<li>Can improve indexing and discoverability<\/li>\n<\/ul>\n\n\n\n<h3 id=\"marketing\" class=\"wp-block-heading\">Marketing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creates a clear and professional presentation<\/li>\n\n\n\n<li>Ensures content is accessible to a wider audience<\/li>\n<\/ul>\n\n\n\n<h2 id=\"what-wcag-says\" class=\"wp-block-heading\">What WCAG says<\/h2>\n\n\n\n<p>From WCAG (Success Criterion 1.3.1 \u2013 Info and Relationships):<\/p>\n\n\n<div class=\"not-prose cu-quote cu-component-spacing\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cInformation, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.\u201d <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H51.html\">[w3.org]<\/a><\/p>\n<\/blockquote>\n<\/div>\n\n\n<p>This means that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The relationships within a table must be clear and detectable by technology<\/li>\n\n\n\n<li>Structure must not rely only on visual formatting<\/li>\n<\/ul>\n\n\n\n<p>Learn more:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H51.html\" target=\"_blank\" rel=\"noreferrer noopener\">W3C Table Technique H51<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H63.html\" target=\"_blank\" rel=\"noreferrer noopener\">W3C Header Associations Technique H63<\/a><\/li>\n<\/ul>\n\n\n\n<h2 id=\"quick-checklist\" class=\"wp-block-heading\">Quick checklist<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Table is used for data (not layout)<\/li>\n\n\n\n<li>Clear headers are identified<\/li>\n\n\n\n<li>Table structure is simple<\/li>\n\n\n\n<li>No merged or nested cells<\/li>\n\n\n\n<li>Table has a clear description or title<\/li>\n\n\n\n<li>No empty cells<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Accessibility Properly structured tables allow screen readers to communicate relationships between rows and columns, helping users understand the content. Tables used to lay out the content of a page are especially inaccessible. Never do this. Reason Tables are designed to present structured data, but they only work when their structure is clear and meaningful. In [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[18,14,21],"class_list":["post-21070","page","type-page","status-publish","hentry","cu_page_type-accessibility","cu_page_type-general","cu_page_type-page-organization"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/comments?post=21070"}],"version-history":[{"count":4,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21070\/revisions"}],"predecessor-version":[{"id":21490,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21070\/revisions\/21490"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=21070"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=21070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}