{"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-14T08:23:51","modified_gmt":"2026-07-14T12:23:51","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>Tables must be used carefully so that all users\u2014including those using screen readers\u2014can understand how information is organized.<\/p>\n\n\n\n<p>When a table is structured properly, assistive technologies can communicate how data is related across rows and columns. This ensures that users can interpret the content accurately, even if they cannot see the visual layout.<\/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=\"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 that has clear relationships (rows and columns).<\/li>\n\n\n\n<li>Avoid using tables for layout or positioning content on a page.<\/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 column headers and\/or row headers. <\/li>\n\n\n\n<li>Make sure headers clearly describe the content beneath or beside them.<\/li>\n<\/ul>\n\n\n\n<p>This helps screen reader users understand what each data point refers to.<\/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 straightforward structure with a clear reading order.<\/li>\n\n\n\n<li>Avoid:\n<ul class=\"wp-block-list\">\n<li>Merged cells<\/li>\n\n\n\n<li>Nested tables<\/li>\n\n\n\n<li>Complex layouts <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Simple tables are easier for everyone to understand and navigate.<\/p>\n\n\n\n<p>Here is an example of a properly constructed table with a header row, containing 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 that explains what the table contains. <a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H39.html\">[w3.org]<\/a><\/li>\n\n\n\n<li>If the table is complex, explain the information in the surrounding text. <\/li>\n<\/ul>\n\n\n\n<p>Users should understand the purpose of the table 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\u2014use \u201c0\u201d or \u201cno data\u201d where appropriate. <\/li>\n\n\n\n<li>Ensure the table content follows 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 Tables must be used carefully so that all users\u2014including those using screen readers\u2014can understand how information is organized. When a table is structured properly, assistive technologies can communicate how data is related across rows and columns. This ensures that users can interpret the content accurately, even if they cannot see the visual layout. Reason [&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":5,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21070\/revisions"}],"predecessor-version":[{"id":21450,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21070\/revisions\/21450"}],"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}]}}