CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Wikipedia:Manual of Style/Accessibility/Data tables tutorial - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"cb843e7a-ce6c-4a3d-8da2-8cb4809eec02","wgCanonicalNamespace":"Project","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":4,"wgPageName":"Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial","wgTitle":"Manual of Style/Accessibility/Data tables tutorial","wgCurRevisionId":1260471858,"wgRevisionId":1260471858,"wgArticleId":28621810,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Wikipedia how-to","Wikipedia Manual of Style (accessibility)","Wikipedia essays and information pages about the Manual of Style","Wikipedia tables"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial","wgRelevantArticleId":28621810,"wgIsProbablyEditable":true, "wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgRedirectedFrom":"MOS:DTT","wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":40000,"wgInternalRedirectTargetUrl":"/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial","wgRelatedArticlesCompat":[],"wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false}, "wgDiscussionToolsFallbackEditMode":"source","wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.inputBox.styles":"ready","ext.cite.styles":"ready","ext.pygments":"ready","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready", "skins.vector.icons":"ready","jquery.tablesorter.styles":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect","ext.cite.ux-enhancements","ext.pygments.view","site","mediawiki.page.ready","jquery.tablesorter","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.discussionTools.init.styles%7Cext.inputBox.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cjquery.tablesorter.styles%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.6"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Wikipedia:Manual of Style/Accessibility/Data tables tutorial - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="login.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-4 ns-subject mw-editable page-Wikipedia_Manual_of_Style_Accessibility_Data_tables_tutorial rootpage-Wikipedia_Manual_of_Style skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=en.wikipedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Wikipedia%3AManual+of+Style%2FAccessibility%2FData+tables+tutorial" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Wikipedia%3AManual+of+Style%2FAccessibility%2FData+tables+tutorial" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Wikipedia%3AManual+of+Style%2FAccessibility%2FData+tables+tutorial" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Wikipedia%3AManual+of+Style%2FAccessibility%2FData+tables+tutorial" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-Overview_of_basics" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Overview_of_basics"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Overview of basics</span> </div> </a> <button aria-controls="toc-Overview_of_basics-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Overview of basics subsection</span> </button> <ul id="toc-Overview_of_basics-sublist" class="vector-toc-list"> <li id="toc-Layout_of_table_headers" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Layout_of_table_headers"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>Layout of table headers</span> </div> </a> <ul id="toc-Layout_of_table_headers-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Proper_table_captions_and_summaries" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Proper_table_captions_and_summaries"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Proper table captions and summaries</span> </div> </a> <button aria-controls="toc-Proper_table_captions_and_summaries-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Proper table captions and summaries subsection</span> </button> <ul id="toc-Proper_table_captions_and_summaries-sublist" class="vector-toc-list"> <li id="toc-Caption" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Caption"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>Caption</span> </div> </a> <ul id="toc-Caption-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Avoiding_column_headers_in_the_middle_of_the_table" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Avoiding_column_headers_in_the_middle_of_the_table"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Avoiding column headers in the middle of the table</span> </div> </a> <button aria-controls="toc-Avoiding_column_headers_in_the_middle_of_the_table-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Avoiding column headers in the middle of the table subsection</span> </button> <ul id="toc-Avoiding_column_headers_in_the_middle_of_the_table-sublist" class="vector-toc-list"> <li id="toc-Column_headers:_bad_example" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Column_headers:_bad_example"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1</span> <span>Column headers: bad example</span> </div> </a> <ul id="toc-Column_headers:_bad_example-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Column_headers:_good_example_1" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Column_headers:_good_example_1"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.2</span> <span>Column headers: good example 1</span> </div> </a> <ul id="toc-Column_headers:_good_example_1-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Column_headers:_good_example_2" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Column_headers:_good_example_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.3</span> <span>Column headers: good example 2</span> </div> </a> <ul id="toc-Column_headers:_good_example_2-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Complex_tables" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Complex_tables"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Complex tables</span> </div> </a> <ul id="toc-Complex_tables-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Images_and_color" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Images_and_color"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Images and color</span> </div> </a> <button aria-controls="toc-Images_and_color-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Images and color subsection</span> </button> <ul id="toc-Images_and_color-sublist" class="vector-toc-list"> <li id="toc-Images" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Images"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.1</span> <span>Images</span> </div> </a> <ul id="toc-Images-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Color" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Color"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2</span> <span>Color</span> </div> </a> <ul id="toc-Color-sublist" class="vector-toc-list"> <li id="toc-Bad_uses_of_color" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Bad_uses_of_color"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2.1</span> <span>Bad uses of color</span> </div> </a> <ul id="toc-Bad_uses_of_color-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Good_uses_of_color" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Good_uses_of_color"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2.2</span> <span>Good uses of color</span> </div> </a> <ul id="toc-Good_uses_of_color-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Nested_data_tables" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Nested_data_tables"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Nested data tables</span> </div> </a> <ul id="toc-Nested_data_tables-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Resources" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Resources"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>Resources</span> </div> </a> <ul id="toc-Resources-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Notes" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Notes"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>Notes</span> </div> </a> <ul id="toc-Notes-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">9</span> <span>References</span> </div> </a> <button aria-controls="toc-References-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle References subsection</span> </button> <ul id="toc-References-sublist" class="vector-toc-list"> <li id="toc-WCAG_references" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#WCAG_references"> <div class="vector-toc-text"> <span class="vector-toc-numb">9.1</span> <span>WCAG references</span> </div> </a> <ul id="toc-WCAG_references-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-namespace">Wikipedia</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Manual of Style/Accessibility/Data tables tutorial</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 1 language" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-1" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">1 language</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/Wikipedia:%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB_(%E8%A1%A8)" title="Wikipedia:スタイルマニュアル (表) – Japanese" lang="ja" hreflang="ja" data-title="Wikipedia:スタイルマニュアル (表)" data-language-autonym="日本語" data-language-local-name="Japanese" class="interlanguage-link-target"><span>日本語</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=enwiki&page=Wikipedia%3AManual+of+Style%2FAccessibility%2FData+tables+tutorial" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-project" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial" title="View the project page [c]" accesskey="c"><span>Project page</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Wikipedia_talk:Manual_of_Style/Accessibility/Data_tables_tutorial" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&oldid=1260471858" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlQ%C4%B1sald%C4%B1c%C4%B1s%C4%B1&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FWikipedia%3AManual_of_Style%2FAccessibility%2FData_tables_tutorial"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrKodu&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FWikipedia%3AManual_of_Style%2FAccessibility%2FData_tables_tutorial"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Wikipedia%3AManual_of_Style%2FAccessibility%2FData_tables_tutorial&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><div class="subpages">< <bdi dir="ltr"><a href="/wiki/Wikipedia:Manual_of_Style" title="Wikipedia:Manual of Style">Wikipedia:Manual of Style</a></bdi> | <bdi dir="ltr"><a href="/wiki/Wikipedia:Manual_of_Style/Accessibility" title="Wikipedia:Manual of Style/Accessibility">Accessibility</a></bdi></div><span class="mw-redirectedfrom">(Redirected from <a href="/w/index.php?title=MOS:DTT&redirect=no" class="mw-redirect" title="MOS:DTT">MOS:DTT</a>)</span></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r1238436933">.mw-parser-output .ombox{margin:4px 0;border-collapse:collapse;border:1px solid #a2a9b1;background-color:var(--background-color-neutral-subtle,#f8f9fa);box-sizing:border-box;color:var(--color-base,#202122)}.mw-parser-output .ombox.mbox-small{font-size:88%;line-height:1.25em}.mw-parser-output .ombox-speedy{border:2px solid #b32424;background-color:#fee7e6}.mw-parser-output .ombox-delete{border:2px solid #b32424}.mw-parser-output .ombox-content{border:1px solid #f28500}.mw-parser-output .ombox-style{border:1px solid #fc3}.mw-parser-output .ombox-move{border:1px solid #9932cc}.mw-parser-output .ombox-protection{border:2px solid #a2a9b1}.mw-parser-output .ombox .mbox-text{border:none;padding:0.25em 0.9em;width:100%}.mw-parser-output .ombox .mbox-image{border:none;padding:2px 0 2px 0.9em;text-align:center}.mw-parser-output .ombox .mbox-imageright{border:none;padding:2px 0.9em 2px 0;text-align:center}.mw-parser-output .ombox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ombox .mbox-invalid-type{text-align:center}@media(min-width:720px){.mw-parser-output .ombox{margin:4px 10%}.mw-parser-output .ombox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;width:238px}}body.skin--responsive .mw-parser-output table.ombox img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .ombox-speedy{background-color:#310402}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .ombox-speedy{background-color:#310402}}</style><table class="plainlinks ombox ombox-notice" role="presentation"><tbody><tr><td class="mbox-image"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Twemoji_1f527.svg/30px-Twemoji_1f527.svg.png" decoding="async" width="30" height="30" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Twemoji_1f527.svg/45px-Twemoji_1f527.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Twemoji_1f527.svg/60px-Twemoji_1f527.svg.png 2x" data-file-width="512" data-file-height="512"/></span></span></td><td class="mbox-text"><div style="padding-top: 6px; padding-bottom: 5px;"><b>This help page is a <a href="/wiki/Wikipedia:Project_namespace#Wikipedia_how-to_and_information_pages" title="Wikipedia:Project namespace">how-to guide</a>.</b><br/><div style="font-size: 90%;">It explains concepts or processes used <a href="/wiki/Wikipedia:Manual_of_Style/Accessibility" title="Wikipedia:Manual of Style/Accessibility">Wikipedia:Manual of Style/Accessibility</a> It is not one of <a href="/wiki/Wikipedia:Policies_and_guidelines" title="Wikipedia:Policies and guidelines">Wikipedia's policies or guidelines</a>, and may reflect varying levels of <a href="/wiki/Wikipedia:Consensus" title="Wikipedia:Consensus">consensus</a>.</div></div></td><td class="mbox-imageright"><style data-mw-deduplicate="TemplateStyles:r1252059228">.mw-parser-output .module-shortcutboxplain{float:right;margin:0 0 0 1em;border:1px solid var(--border-color-base,#a2a9b1);background-color:var(--background-color-base,#fff);padding:0.3em 0.6em 0.2em 0.6em;text-align:center;font-size:85%}.mw-parser-output .module-shortcutboxleft{float:left;margin:0 1em 0 0}.mw-parser-output .module-shortcutlist{display:inline-block;border-bottom:1px solid var(--border-color-base,#a2a9b1);margin-bottom:0.2em}.mw-parser-output .module-shortcutboxplain ul{font-weight:bold}.mw-parser-output .module-shortcutanchordiv{position:relative;top:-3em}.mw-parser-output li .module-shortcutanchordiv{float:right}.mw-parser-output .mbox-imageright .module-shortcutboxplain{padding:0.4em 1em 0.4em 1em;line-height:1.3;margin:0}</style><div class="module-shortcutanchordiv"><span id="WP:DTT"></span><span id="MOS:DTT"></span><span id="WP:DTABTUT"></span><span id="MOS:DTABTUT"></span></div><div class="module-shortcutboxplain noprint" role="note"><div class="module-shortcutlist"><a href="/wiki/Wikipedia:Shortcut" title="Wikipedia:Shortcut">Shortcuts</a></div><style data-mw-deduplicate="TemplateStyles:r1126788409">.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}</style><div class="plainlist"><ul><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:DTT&redirect=no">WP:DTT</a></span></li><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=MOS:DTT&redirect=no">MOS:DTT</a></span></li><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:DTABTUT&redirect=no">WP:DTABTUT</a></span></li><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=MOS:DTABTUT&redirect=no">MOS:DTABTUT</a></span></li></ul></div></div></td></tr></tbody></table> <style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r1246091330">.mw-parser-output .sidebar{width:22em;float:right;clear:right;margin:0.5em 0 1em 1em;background:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);padding:0.2em;text-align:center;line-height:1.4em;font-size:88%;border-collapse:collapse;display:table}body.skin-minerva .mw-parser-output .sidebar{display:table!important;float:right!important;margin:0.5em 0 1em 1em!important}.mw-parser-output .sidebar-subgroup{width:100%;margin:0;border-spacing:0}.mw-parser-output .sidebar-left{float:left;clear:left;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-none{float:none;clear:both;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-outer-title{padding:0 0.4em 0.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .sidebar-top-image{padding:0.4em}.mw-parser-output .sidebar-top-caption,.mw-parser-output .sidebar-pretitle-with-top-image,.mw-parser-output .sidebar-caption{padding:0.2em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-pretitle{padding:0.4em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-title,.mw-parser-output .sidebar-title-with-pretitle{padding:0.2em 0.8em;font-size:145%;line-height:1.2em}.mw-parser-output .sidebar-title-with-pretitle{padding:0.1em 0.4em}.mw-parser-output .sidebar-image{padding:0.2em 0.4em 0.4em}.mw-parser-output .sidebar-heading{padding:0.1em 0.4em}.mw-parser-output .sidebar-content{padding:0 0.5em 0.4em}.mw-parser-output .sidebar-content-with-subgroup{padding:0.1em 0.4em 0.2em}.mw-parser-output .sidebar-above,.mw-parser-output .sidebar-below{padding:0.3em 0.8em;font-weight:bold}.mw-parser-output .sidebar-collapse .sidebar-above,.mw-parser-output .sidebar-collapse .sidebar-below{border-top:1px solid #aaa;border-bottom:1px solid #aaa}.mw-parser-output .sidebar-navbar{text-align:right;font-size:115%;padding:0 0.4em 0.4em}.mw-parser-output .sidebar-list-title{padding:0 0.4em;text-align:left;font-weight:bold;line-height:1.6em;font-size:105%}.mw-parser-output .sidebar-list-title-c{padding:0 0.4em;text-align:center;margin:0 3.3em}@media(max-width:640px){body.mediawiki .mw-parser-output .sidebar{width:100%!important;clear:both;float:none!important;margin-left:0!important;margin-right:0!important}}body.skin--responsive .mw-parser-output .sidebar a>img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media print{body.ns-0 .mw-parser-output .sidebar{display:none!important}}</style><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1246091330"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1246091330"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1246091330"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1246091330"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1246091330"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1246091330"><table class="sidebar sidebar-collapse nomobile nowraplinks hlist"><tbody><tr><th class="sidebar-title"><a href="/wiki/Wikipedia:Manual_of_Style" title="Wikipedia:Manual of Style">Manual of Style (MoS)</a></th></tr><tr><td class="sidebar-image"><div class="mw-inputbox-centered" style=""><form name="searchbox" class="searchbox mw-inputbox-form" action="/wiki/Special:Search" id="style-searchbox"><div class="cdx-text-input"><input class="mw-inputbox-input mw-searchInput searchboxInput cdx-text-input__input" name="search" placeholder="" size="25" dir="ltr"/></div><input type="hidden" value="Wikipedia:Manual of Style" name="prefix"/><br/><input type="submit" name="fulltext" value="Search the MoS" class="cdx-button"/><input type="hidden" value="Search" name="fulltext"/></form></div></td></tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(content)" title="Category:Wikipedia Manual of Style (content)">Content</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Accessibility" title="Wikipedia:Manual of Style/Accessibility">Accessibility</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Biography" title="Wikipedia:Manual of Style/Biography">Biography</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Disambiguation_pages" title="Wikipedia:Manual of Style/Disambiguation pages">Disambiguation pages</a> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Organizing_disambiguation_pages_by_subject_area" title="Wikipedia:Manual of Style/Organizing disambiguation pages by subject area">Organizing by subject</a></li></ul></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Gender_identity" title="Wikipedia:Manual of Style/Gender identity">Gender identity</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Hidden_text" title="Wikipedia:Manual of Style/Hidden text">Hidden text</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Infoboxes" title="Wikipedia:Manual of Style/Infoboxes">Infoboxes</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Linking" title="Wikipedia:Manual of Style/Linking">Linking</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Self-references_to_avoid" title="Wikipedia:Manual of Style/Self-references to avoid">Self-references</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Words_to_watch" title="Wikipedia:Manual of Style/Words to watch">Words to watch</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(formatting)" title="Category:Wikipedia Manual of Style (formatting)">Formatting</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Abbreviations" title="Wikipedia:Manual of Style/Abbreviations">Abbreviations</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Capital_letters" title="Wikipedia:Manual of Style/Capital letters">Capitalization</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Dates_and_numbers" title="Wikipedia:Manual of Style/Dates and numbers">Dates and numbers</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Pronunciation" title="Wikipedia:Manual of Style/Pronunciation">Pronunciation</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Spelling" title="Wikipedia:Manual of Style/Spelling">Spelling</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Text_formatting" title="Wikipedia:Manual of Style/Text formatting">Text formatting</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Titles_of_works" title="Wikipedia:Manual of Style/Titles of works">Titles of works</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(images)" title="Category:Wikipedia Manual of Style (images)">Images</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Captions" title="Wikipedia:Manual of Style/Captions">Captions</a></li> <li><a href="/wiki/Wikipedia:Image_use_policy#Adding_images_to_articles" title="Wikipedia:Image use policy">Image placement</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Icons" title="Wikipedia:Manual of Style/Icons">Icons</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Images" title="Wikipedia:Manual of Style/Images">Images</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(layout)" title="Category:Wikipedia Manual of Style (layout)">Layout</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Layout" title="Wikipedia:Manual of Style/Layout">Layout</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Lead_section" title="Wikipedia:Manual of Style/Lead section">Lead section</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Tables" title="Wikipedia:Manual of Style/Tables">Tables</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Trivia_sections" title="Wikipedia:Manual of Style/Trivia sections">Trivia sections</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(lists)" title="Category:Wikipedia Manual of Style (lists)">Lists</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Lists" title="Wikipedia:Manual of Style/Lists">Lists</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Lists_of_works" title="Wikipedia:Manual of Style/Lists of works">Lists of works</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Road_junction_lists" title="Wikipedia:Manual of Style/Road junction lists">Road junctions</a></li> <li><a href="/wiki/Wikipedia:Stand-alone_lists" title="Wikipedia:Stand-alone lists">Stand-alone lists</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)">By topic area</div><div class="sidebar-list-content mw-collapsible-content"><table class="sidebar sidebar-collapse nomobile nowraplinks" style="background-color: transparent; color: var( --color-base ); border-collapse:collapse; border-spacing:0px; border:none; width:100%; margin:0px; font-size:100%; clear:none; float:none"><tbody><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(legal)" title="Category:Wikipedia Manual of Style (legal)">Legal</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Legal" title="Wikipedia:Manual of Style/Legal">Legal</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Trademarks" title="Wikipedia:Manual of Style/Trademarks">Trademarks</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(arts)" title="Category:Wikipedia Manual of Style (arts)">Arts</a></div><div class="sidebar-list-content mw-collapsible-content"><table class="sidebar nomobile nowraplinks" style="background-color: transparent; color: var( --color-base ); border-collapse:collapse; border-spacing:0px; border:none; width:100%; margin:0px; font-size:100%; clear:none; float:none"><tbody><tr><td class="sidebar-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Anime_and_manga" title="Wikipedia:Manual of Style/Anime and manga">Anime and manga</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Comics" title="Wikipedia:Manual of Style/Comics">Comics</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Film" title="Wikipedia:Manual of Style/Film">Film</a></li> <li><a href="/wiki/Wikipedia:Lyrics_and_poetry" title="Wikipedia:Lyrics and poetry">Lyrics and poetry</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Novels" title="Wikipedia:Manual of Style/Novels">Novels</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Television" title="Wikipedia:Manual of Style/Television">Television</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Video_games" title="Wikipedia:Manual of Style/Video games">Video games</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Visual_arts" title="Wikipedia:Manual of Style/Visual arts">Visual arts</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Writing_about_fiction" title="Wikipedia:Manual of Style/Writing about fiction">Writing about fiction</a></li></ul></td> </tr><tr><th class="sidebar-heading"> <a href="/wiki/Category:Wikipedia_Manual_of_Style_(music)" title="Category:Wikipedia Manual of Style (music)">Music</a></th></tr><tr><td class="sidebar-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Music" title="Wikipedia:Manual of Style/Music">Music</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Music_samples" title="Wikipedia:Manual of Style/Music samples">Music samples</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Record_charts" title="Wikipedia:Manual of Style/Record charts">Record charts</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Stringed_instrument_tunings" title="Wikipedia:Manual of Style/Stringed instrument tunings">Stringed instruments</a></li></ul></td> </tr></tbody></table></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(history)" title="Category:Wikipedia Manual of Style (history)">History</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Blazon" title="Wikipedia:Manual of Style/Blazon">Blazons</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Military_history" title="Wikipedia:Manual of Style/Military history">Military history</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(regional)" title="Category:Wikipedia Manual of Style (regional)">Regional</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Naming_conventions_(geographic_names)#Specific_topics" title="Wikipedia:Naming conventions (geographic names)">Specific naming conventions</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Canada-related_articles" title="Wikipedia:Manual of Style/Canada-related articles">Canada</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/China-_and_Chinese-related_articles" title="Wikipedia:Manual of Style/China- and Chinese-related articles">China (and Chinese)</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Egypt-related_articles" title="Wikipedia:Manual of Style/Egypt-related articles">Egypt</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/France-_and_French-related_articles" title="Wikipedia:Manual of Style/France- and French-related articles">France (and French)</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Hawaii-related_articles" title="Wikipedia:Manual of Style/Hawaii-related articles">Hawaii</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/India-related_articles" title="Wikipedia:Manual of Style/India-related articles">India</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Indonesia-related_articles" title="Wikipedia:Manual of Style/Indonesia-related articles">Indonesia</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Ireland-related_articles" title="Wikipedia:Manual of Style/Ireland-related articles">Ireland</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Japan-related_articles" title="Wikipedia:Manual of Style/Japan-related articles">Japan</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Korea-related_articles" title="Wikipedia:Manual of Style/Korea-related articles">Korea</a></li> <li><a href="/wiki/Wikipedia:Naming_conventions_(Macedonia)" title="Wikipedia:Naming conventions (Macedonia)">Macedonia</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Malaysia-related_articles" title="Wikipedia:Manual of Style/Malaysia-related articles">Malaysia</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Pakistan-related_articles" title="Wikipedia:Manual of Style/Pakistan-related articles">Pakistan</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Philippines-related_articles" title="Wikipedia:Manual of Style/Philippines-related articles">Philippines</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Poland-related_articles" title="Wikipedia:Manual of Style/Poland-related articles">Poland</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Singapore-related_articles" title="Wikipedia:Manual of Style/Singapore-related articles">Singapore</a></li> <li><a href="/wiki/Wikipedia:WikiProject_Trinidad_and_Tobago/Style_guide" title="Wikipedia:WikiProject Trinidad and Tobago/Style guide">Trinidad and Tobago</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(religion)" title="Category:Wikipedia Manual of Style (religion)">Religion</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Islam-related_articles" title="Wikipedia:Manual of Style/Islam-related articles">Islam</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Latter_Day_Saints" title="Wikipedia:Manual of Style/Latter Day Saints">Latter Day Saints</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(science)" title="Category:Wikipedia Manual of Style (science)">Science</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Chemistry" title="Wikipedia:Manual of Style/Chemistry">Chemistry</a> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Chemistry/Compound_classes" title="Wikipedia:Manual of Style/Chemistry/Compound classes">Compound classes</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Chemistry/Chemicals" title="Wikipedia:Manual of Style/Chemistry/Chemicals">Chemicals</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Chemistry/References_and_external_links" title="Wikipedia:Manual of Style/Chemistry/References and external links">References and external links</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Chemistry/Safety" title="Wikipedia:Manual of Style/Chemistry/Safety">Safety</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Chemistry/Structure_drawing" title="Wikipedia:Manual of Style/Chemistry/Structure drawing">Structure drawing</a></li></ul></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Computer_science" title="Wikipedia:Manual of Style/Computer science">Computer science</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Mathematics" title="Wikipedia:Manual of Style/Mathematics">Mathematics</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Medicine-related_articles" title="Wikipedia:Manual of Style/Medicine-related articles">Medicine</a></li> <li><a href="/wiki/Template:Taxobox/doc" title="Template:Taxobox/doc">Taxonomy</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(sports)" title="Category:Wikipedia Manual of Style (sports)">Sports</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Manual_of_Style/Cue_sports" title="Wikipedia:Manual of Style/Cue sports">Cue sports</a> (<a href="/wiki/Wikipedia:Manual_of_Style/Snooker" title="Wikipedia:Manual of Style/Snooker">Snooker</a>)</li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Figure_skating" title="Wikipedia:Manual of Style/Figure skating">Figure skating</a> (<a href="/wiki/Wikipedia:Manual_of_Style/Figure_skating_terminology" title="Wikipedia:Manual of Style/Figure skating terminology">Terminology</a>)</li></ul></div></div></td> </tr></tbody></table></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="background-color: #def; color:black; padding-left: 2px;;color: var(--color-base)"><a href="/wiki/Category:Wikipedia_Manual_of_Style_(related_guidelines)" title="Category:Wikipedia Manual of Style (related guidelines)">Related guidelines</a></div><div class="sidebar-list-content mw-collapsible-content"> <ul><li><a href="/wiki/Wikipedia:Article_size" title="Wikipedia:Article size">Article size</a></li> <li><a href="/wiki/Wikipedia:Article_titles" title="Wikipedia:Article titles">Article titles</a></li> <li><a href="/wiki/Wikipedia:Categories,_lists,_and_navigation_templates" title="Wikipedia:Categories, lists, and navigation templates">Categories, lists, and navigation templates</a></li> <li><a href="/wiki/Wikipedia:Categorization" title="Wikipedia:Categorization">Categorization</a></li> <li><a href="/wiki/Wikipedia:Hatnote" title="Wikipedia:Hatnote">Hatnotes</a></li> <li><a href="/wiki/Wikipedia:Subpages" title="Wikipedia:Subpages">Subpages</a></li> <li><a href="/wiki/Wikipedia:Make_technical_articles_understandable" title="Wikipedia:Make technical articles understandable">Understandability</a></li></ul></div></div></td> </tr><tr><td class="sidebar-below"> <ul><li><a href="/wiki/Wikipedia:Simplified_Manual_of_Style" title="Wikipedia:Simplified Manual of Style">Overview</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Contents" title="Wikipedia:Manual of Style/Contents">Contents</a></li> <li><a href="/wiki/Wikipedia:Styletips" title="Wikipedia:Styletips">Tips</a></li></ul></td></tr><tr><td class="sidebar-navbar"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Style" title="Template:Style"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Style" title="Template talk:Style"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Style" title="Special:EditPage/Template:Style"><abbr title="Edit this template">e</abbr></a></li></ul></div></td></tr></tbody></table> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1126788409"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1246091330"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><table class="sidebar sidebar-collapse nomobile nowraplinks plainlist"><tbody><tr><th class="sidebar-title"><a href="/wiki/Wikipedia:WikiProject_Accessibility" title="Wikipedia:WikiProject Accessibility">WikiProject Accessibility</a></th></tr><tr><td class="sidebar-above" style="display:block;margin-bottom:0.5em;"> <ul><li><a href="/wiki/Wikipedia:WikiProject_Accessibility/What_is_accessibility%3F" title="Wikipedia:WikiProject Accessibility/What is accessibility?">What is accessibility?</a></li> <li><a href="/wiki/Wikipedia_talk:WikiProject_Accessibility" title="Wikipedia talk:WikiProject Accessibility">Main discussion page</a></li> <li><a href="/wiki/Wikipedia:WikiProject_Accessibility/FAQ_and_common_pitfalls" title="Wikipedia:WikiProject Accessibility/FAQ and common pitfalls">FAQ and common pitfalls</a></li></ul></td></tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible"><div class="sidebar-list-title" style="border-bottom:1px solid #aaa;;color: var(--color-base)">Article guidelines</div><div class="sidebar-list-content mw-collapsible-content" style="text-align:left; margin-left: 1em;"> <ul><li><a href="/wiki/Wikipedia:Accessibility_dos_and_don%27ts" title="Wikipedia:Accessibility dos and don'ts">Dos and don'ts</a></li> <li><a href="/wiki/Wikipedia:Manual_of_Style/Accessibility" title="Wikipedia:Manual of Style/Accessibility">Manual of Style<span style="white-space: nowrap;"> / </span>Accessibility</a></li> <li><a href="/wiki/Wikipedia:Alternative_text_for_images" class="mw-redirect" title="Wikipedia:Alternative text for images">Alternative text for images</a></li> <li><a class="mw-selflink selflink">Data tables tutorial</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="border-bottom:1px solid #aaa;;color: var(--color-base)">Template guidelines</div><div class="sidebar-list-content mw-collapsible-content" style="text-align:left; margin-left: 1em;"> <ul><li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Top_priority_issues_with_templates" title="Wikipedia:WikiProject Accessibility/Top priority issues with templates">Template priorities</a></li> <li><div style="display:inline-block; padding:0.2em 0.4em; line-height:1.2em;"><a href="/wiki/Wikipedia:WikiProject_Accessibility/Most_widely_used_templates" title="Wikipedia:WikiProject Accessibility/Most widely used templates">Most widely used templates</a><div class="hlist"><ul><li>(<a href="/wiki/Wikipedia:WikiProject_Accessibility/Most_widely_used_templates/Top_200" title="Wikipedia:WikiProject Accessibility/Most widely used templates/Top 200">Top 200</a></li><li><a href="/w/index.php?title=Wikipedia:WikiProject_Accessibility/Most_widely_used_templates/From_200_to_1000&action=edit&redlink=1" class="new" title="Wikipedia:WikiProject Accessibility/Most widely used templates/From 200 to 1000 (page does not exist)">200–1000</a></li><li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Most_widely_used_templates/Template_watchlist" title="Wikipedia:WikiProject Accessibility/Most widely used templates/Template watchlist">Watchlist</a>)</li></ul></div> </div></li> <li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Infoboxes" title="Wikipedia:WikiProject Accessibility/Infoboxes">Infobox accessibility</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="border-bottom:1px solid #aaa;;color: var(--color-base)">Coordination</div><div class="sidebar-list-content mw-collapsible-content" style="text-align:left; margin-left: 1em;"> <ul><li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Manual_of_Style_draft" title="Wikipedia:WikiProject Accessibility/Manual of Style draft">Manual of Style draft</a></li> <li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Methodology" title="Wikipedia:WikiProject Accessibility/Methodology">Methodology</a></li> <li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Resources_and_references" title="Wikipedia:WikiProject Accessibility/Resources and references">Resources and references</a></li> <li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Policy_proposal" title="Wikipedia:WikiProject Accessibility/Policy proposal">Policy proposal</a></li> <li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Popular_pages" title="Wikipedia:WikiProject Accessibility/Popular pages">Popular pages</a></li></ul></div></div></td> </tr><tr><td class="sidebar-content"> <div class="sidebar-list mw-collapsible mw-collapsed"><div class="sidebar-list-title" style="border-bottom:1px solid #aaa;;color: var(--color-base)">For impaired users</div><div class="sidebar-list-content mw-collapsible-content" style="text-align:left; margin-left: 1em;"> <ul><li><a href="/wiki/Wikipedia:Using_JAWS" title="Wikipedia:Using JAWS">Using JAWS</a></li> <li><a href="/wiki/Wikipedia:Keyboard_shortcuts" class="mw-redirect" title="Wikipedia:Keyboard shortcuts">Keyboard shortcuts</a></li> <li><a href="/wiki/Wikipedia:Style_sheets_for_visually_impaired_users" title="Wikipedia:Style sheets for visually impaired users">Style sheets</a></li> <li><a href="/wiki/User:P999/Toggle_VF" title="User:P999/Toggle VF">Toggle VF</a></li></ul></div></div></td> </tr><tr><td class="sidebar-navbar" style="display:block;margin-top:0.25em; padding-top:0.25em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239400231"><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Wikipedia:WikiProject_Accessibility/Navigation_menu" title="Wikipedia:WikiProject Accessibility/Navigation menu"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Wikipedia_talk:WikiProject_Accessibility/Navigation_menu" title="Wikipedia talk:WikiProject Accessibility/Navigation menu"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Wikipedia:WikiProject_Accessibility/Navigation_menu" title="Special:EditPage/Wikipedia:WikiProject Accessibility/Navigation menu"><abbr title="Edit this template">e</abbr></a></li></ul></div></td></tr></tbody></table> <p>This tutorial is a guideline which, as part of Wikipedia's <a href="/wiki/Wikipedia:MOS" class="mw-redirect" title="Wikipedia:MOS">Manual of Style</a>, is intended to assist those creating data tables (or more often <a href="/wiki/Wikipedia:Manual_of_Style/Lists" title="Wikipedia:Manual of Style/Lists">lists</a>) in ensuring the content is <a href="/wiki/Web_accessibility" title="Web accessibility">accessible to all</a>. For more info on how to create and edit tables, see <a href="/wiki/Help:Table" title="Help:Table">Help:Table</a>. </p><p>Guidelines on this page are ordered primarily by priority, then difficulty. The priority levels are determined by the Accessibility Success Criteria rankings A, AA, and AAA (in descending order of importance as accessibility considerations) of the <a href="/wiki/World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C) <a href="/wiki/WCAG_2.0" class="mw-redirect" title="WCAG 2.0">Web Content Accessibility Guidelines (WCAG) 2.0</a>.<sup id="cite_ref-WCAG2.0_1-0" class="reference"><a href="#cite_note-WCAG2.0-1"><span class="cite-bracket">[</span>WCAG 1<span class="cite-bracket">]</span></a></sup> The <em>difficulty</em> indicates if it seems easy or not for Wikipedia users to comply to the guidelines. </p><p>Guidelines here essentially follow WCAG 2.0's approach, and some additional reputable sources, like <a href="/wiki/WebAIM" title="WebAIM">WebAIM</a>, when relevant. A review by an accessibility expert was necessary to ensure WCAG 2.0 was interpreted correctly; this review was made in September 2010.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>note 1<span class="cite-bracket">]</span></a></sup> </p> <style data-mw-deduplicate="TemplateStyles:r886046785">.mw-parser-output .toclimit-2 .toclevel-1 ul,.mw-parser-output .toclimit-3 .toclevel-2 ul,.mw-parser-output .toclimit-4 .toclevel-3 ul,.mw-parser-output .toclimit-5 .toclevel-4 ul,.mw-parser-output .toclimit-6 .toclevel-5 ul,.mw-parser-output .toclimit-7 .toclevel-6 ul{display:none}</style><div class="toclimit-3"><meta property="mw:PageProp/toc"/></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Overview_of_basics" data-mw-thread-id="h-Overview_of_basics"><span data-mw-comment-start="" id="h-Overview_of_basics"></span>Overview of basics<span data-mw-comment-end="h-Overview_of_basics"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=1" title="Edit section: Overview of basics"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Priority: high (accessibility level: A)</li> <li>Difficulty: easy (the syntax is fairly simple and editors get used to it; the layout might change users' habits)</li></ul> <div style="display: inline-table;"> <p><b>Wikitext:</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable"</span> <span class="p">|+</span><span class="gh"> caption text</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header 1</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header 2</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header 3</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"row"</span><span class="w"> </span><span class="p">|</span><span class="gu"> row header 1</span> <span class="p">|</span> data 1 <span class="p">||</span> data 2 <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"row"</span><span class="w"> </span><span class="p">|</span><span class="gu"> row header 2</span> <span class="p">|</span> data 3 <span class="p">||</span> data 4 <span class="p">|}</span> </pre></div> </div> <div style="display: inline-table;"> <p><b>Produces:</b> </p> <table class="wikitable"> <caption>caption text </caption> <tbody><tr> <th scope="col">column header 1 </th> <th scope="col">column header 2 </th> <th scope="col">column header 3 </th></tr> <tr> <th scope="row">row header 1 </th> <td>data 1</td> <td>data 2 </td></tr> <tr> <th scope="row">row header 2 </th> <td>data 3</td> <td>data 4 </td></tr></tbody></table> </div> <dl><dt>Caption ( <code>|+</code> )</dt> <dd>A caption is a table's title, describing its nature.<sup id="cite_ref-H39_3-0" class="reference"><a href="#cite_note-H39-3"><span class="cite-bracket">[</span>WCAG 2<span class="cite-bracket">]</span></a></sup></dd> <dt>Row and column headers (<code> ! </code>)</dt> <dd>Like the caption, these help present the information in a logical structure to visitors.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>WCAG 3<span class="cite-bracket">]</span></a></sup> The headers help screen readers render header information about data cells. For example, header information is spoken prior to the cell data, or header information is provided on request.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></dd> <dt>Scope of headers (<code>scope="col"</code> and <code>scope="row"</code>)</dt> <dd>This clearly identifies headers as either column headers or row headers respectively.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>note 2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-H63_7-0" class="reference"><a href="#cite_note-H63-7"><span class="cite-bracket">[</span>WCAG 4<span class="cite-bracket">]</span></a></sup></dd></dl> <div class="mw-heading mw-heading3"><h3 id="Layout_of_table_headers" data-mw-thread-id="h-Layout_of_table_headers-Overview_of_basics"><span data-mw-comment-start="" id="h-Layout_of_table_headers-Overview_of_basics"></span>Layout of table headers<span data-mw-comment-end="h-Layout_of_table_headers-Overview_of_basics"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=2" title="Edit section: Layout of table headers"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>As can be seen in the example above, row headers are formatted by default as bold, centered and with a darker background. This is the common behavior across the Internet, and the default rendering in most browsers. In some circumstances it might be desirable to apply a style customized for a specific case. The class <code>plainrowheaders</code> will apply left-aligned and normal-weight formatting so that editors do not feel the need to override the header formatting with inline CSS declarations for each cell.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>note 3<span class="cite-bracket">]</span></a></sup> Used by itself, <code>plainrowheaders</code> will make headers appear similar to unmodified data cells, except for the darker background. </p><p>To use <code>plainrowheaders</code>, place it (like <code>wikitable</code>) in the <code>class</code> attribute at the beginning of the table. The example below shows an unbolded, left-aligned row header with a custom larger font style: </p> <div style="display: inline-table;"> <p><b>Wikitext:</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable plainrowheaders"</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header 1</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header 2</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"row"</span><span class="w"> </span><span class="na">style</span><span class="o">=</span><span class="s2">"font-size: larger;"</span><span class="w"> </span><span class="p">|</span><span class="gu"> row header</span> <span class="p">|</span> data <span class="p">|}</span> </pre></div> </div> <div style="display: inline-table;"> <p><b>Produces:</b> </p> <table class="wikitable plainrowheaders"> <tbody><tr> <th scope="col">column header 1 </th> <th scope="col">column header 2 </th></tr> <tr> <th scope="row" style="font-size: larger;">row header </th> <td>data </td></tr></tbody></table> </div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Proper_table_captions_and_summaries" data-mw-thread-id="h-Proper_table_captions_and_summaries"><span data-mw-comment-start="" id="h-Proper_table_captions_and_summaries"></span>Proper table captions and summaries<span data-mw-comment-end="h-Proper_table_captions_and_summaries"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=3" title="Edit section: Proper table captions and summaries"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1252059228"><div class="module-shortcutanchordiv"><span id="MOS:TABLECAPTION"></span><span id="MOS:TABLESUMMARY"></span><span id="MOS:TABLEHEADINGS"></span><span id="MOS:TABLECAPTIONS"></span></div><div class="module-shortcutboxplain noprint" role="note"><div class="module-shortcutlist"><a href="/wiki/Wikipedia:Shortcut" title="Wikipedia:Shortcut">Shortcuts</a></div><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1126788409"><div class="plainlist"><ul><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=MOS:TABLECAPTION&redirect=no">MOS:TABLECAPTION</a></span></li><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=MOS:TABLESUMMARY&redirect=no">MOS:TABLESUMMARY</a></span></li><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=MOS:TABLEHEADINGS&redirect=no">MOS:TABLEHEADINGS</a></span></li><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=MOS:TABLECAPTIONS&redirect=no">MOS:TABLECAPTIONS</a></span></li></ul></div></div> <p><span class="anchor" id="Correct_table_captions"></span> Table markup provides for both <i>captions</i> and <i>summaries</i>, both of great utility for making tables accessible. The caption provides a descriptive heading for the table and the summary provides a "nutshell" of its content. If you like, you can think of them as analogous, respectively, to a journal paper's title and its abstract. </p> <div class="mw-heading mw-heading3"><h3 id="Caption" data-mw-thread-id="h-Caption-Proper_table_captions_and_summaries"><span data-mw-comment-start="" id="h-Caption-Proper_table_captions_and_summaries"></span>Caption<span data-mw-comment-end="h-Caption-Proper_table_captions_and_summaries"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=4" title="Edit section: Caption"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Priority: high (accessibility level: A)</li> <li>Difficulty: easy (the syntax is fairly simple and already in use; the layout slightly changes users' habits)</li></ul> <p>All data tables need a table <i>caption</i> that succinctly describes what the table is about.<sup id="cite_ref-H39_3-1" class="reference"><a href="#cite_note-H39-3"><span class="cite-bracket">[</span>WCAG 2<span class="cite-bracket">]</span></a></sup> It plays the role of a table heading, and is recommended as a best practice.<sup id="cite_ref-WebAccessibility_415_9-0" class="reference"><a href="#cite_note-WebAccessibility_415-9"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> You would usually need some kind of heading or description introducing a new table anyway, and this is what the caption feature exists for. Table captions are made with <code>|+</code>.<sup id="cite_ref-cap_and_sum_10-0" class="reference"><a href="#cite_note-cap_and_sum-10"><span class="cite-bracket">[</span>note 4<span class="cite-bracket">]</span></a></sup> A caption can be styled with CSS, and may include wikilinks, reference citations, etc. It may be explicitly put to the left like other Wikipedia headings with <code>style="text-align: left;"</code> (a good idea especially on wide tables). Captions are not used for layout tables (these are deprecated on Wikipedia as well as more broadly, but some editors temporarily resort to them until later editors wikicode whatever it was they were trying to achieve.) </p><p>A temporary case for not using the <code>|+</code> caption is in certain situations when using a <a href="/wiki/Help:Table#Collapsible_tables" title="Help:Table">collapsible table</a>. As of September 2010<sup class="plainlinks noexcerpt noprint asof-tag update" style="display:none;"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit">[update]</a></sup>, the <span class="nowrap">"[hide]" / "[show]"</span> collapse control has to be inside a table header (until the collapsibility script is improved), and it must be large enough to contain it. If the table has no header, or only a very small header, a common solution has been to put the caption text in a table header to which the collapse controller may attach.<sup class="noprint Inline-Template" style="margin-left:0.1em; white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Please_clarify" title="Wikipedia:Please clarify"><span title="Has this problem been resolved yet? It's been almost 5 years. (July 2015)">clarification needed</span></a></i>]</sup> </p><p>Example of a proper caption from <a href="/wiki/Special:PermanentLink/383672967#Filmography" title="Special:PermanentLink/383672967">Tobin Bell#Filmography</a>: </p> <table class="wikitable sortable plainrowheaders"> <caption>Bell's television appearances and roles </caption> <tbody><tr> <th scope="col">Title </th> <th scope="col">Year </th> <th scope="col">Role </th> <th scope="col" class="unsortable">Notes </th></tr> <tr> <th scope="row"><i><span data-sort-value="Equalizer, The"><span class="vcard"><span class="fn"><a href="/wiki/The_Equalizer" title="The Equalizer">The Equalizer</a></span></span></span></i> </th> <td style="text-align: center;">1988 </td> <td> </td> <td>Episode: "<a href="/wiki/List_of_The_Equalizer_episodes#Season_four" class="mw-redirect" title="List of The Equalizer episodes">The Day of the Covenant</a>" </td></tr> <tr> <th scope="row"><i>Perfect Witness</i> </th> <td style="text-align: center;">1989 </td> <td>Dillon </td> <td><a href="/wiki/TV_film" class="mw-redirect" title="TV film">TV film</a> </td></tr> <tr> <th scope="row"><i><a href="/wiki/Alien_Nation_(1989_TV_series)" class="mw-redirect" title="Alien Nation (1989 TV series)">Alien Nation</a></i> </th> <td style="text-align: center;">1990 </td> <td>Brian Knox </td> <td>Episode: "Crossing the Line" </td></tr></tbody></table> <p>Captions should be concise; if the table needs an extended introduction, provide one in normal article prose, then provide a simpler caption. However, table captions consisting of a single word like "Actor", "Film" or "Television" – as in a previous revision of <a class="external text" href="https://en.wikipedia.org/w/index.php?title=Tobin_Bell&direction=prev&oldid=383607939#Filmography">Tobin Bell's filmography</a> – are inadequate, as they are not descriptive enough. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Avoiding_column_headers_in_the_middle_of_the_table" data-mw-thread-id="h-Avoiding_column_headers_in_the_middle_of_the_table"><span data-mw-comment-start="" id="h-Avoiding_column_headers_in_the_middle_of_the_table"></span>Avoiding column headers in the middle of the table<span data-mw-comment-end="h-Avoiding_column_headers_in_the_middle_of_the_table"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=5" title="Edit section: Avoiding column headers in the middle of the table"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1252059228"><div class="module-shortcutanchordiv"><span id="MOS:COLHEAD"></span></div><div class="module-shortcutboxplain noprint" role="note"><div class="module-shortcutlist"><a href="/wiki/Wikipedia:Shortcut" title="Wikipedia:Shortcut">Shortcut</a></div><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1126788409"><div class="plainlist"><ul><li><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=MOS:COLHEAD&redirect=no">MOS:COLHEAD</a></span></li></ul></div></div> <ul><li>Priority: high (accessibility level: A)</li> <li>Difficulty: medium (requires large changes to tables, editors seem reluctant to split tables, needs more testing and feedback)</li></ul> <p>Do not place column headers in the middle of a table to visually separate the table. For example, a screen reader reading the cell "Stuttgart, Germany" might associate the cell with the following headers: "Venue, Representing Soviet Union, Representing Belarus". Three headers are read aloud. The first and the third are correct and expected. But "Representing Soviet Union" does not apply to the lower half of the table, and a machine does not understand that. Thus, a machine will not be able to associate header and cells correctly, and will provide misleading information about the table structure to the user. </p><p>In most cases, the easier solution is to split the table into several sub-tables with explanatory sub-headings (second example). </p> <div class="mw-heading mw-heading3"><h3 id="Column_headers:_bad_example" data-mw-thread-id="h-Column_headers:_bad_example-Avoiding_column_headers_in_the_middle_of_the_table"><span data-mw-comment-start="" id="h-Column_headers:_bad_example-Avoiding_column_headers_in_the_middle_of_the_table"></span>Column headers: bad example<span data-mw-comment-end="h-Column_headers:_bad_example-Avoiding_column_headers_in_the_middle_of_the_table"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=6" title="Edit section: Column headers: bad example"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>From <a href="/wiki/Special:Redirect/revision/366653030" title="Special:Redirect/revision/366653030">Vasiliy Kaptyukh</a> and produced by <span class="nowrap">{{</span><a href="/wiki/Template:AchievementTable" title="Template:AchievementTable">AchievementTable</a><span class="nowrap">}}</span>: </p> <table class="wikitable" style="text-align: center; font-size: 95%;" width="80%"> <tbody><tr> <th>Year </th> <th>Competition </th> <th>Venue </th> <th>Position </th> <th>Notes </th></tr> <tr> <th colspan="5">Representing <span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/23px-Flag_of_the_Soviet_Union.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/35px-Flag_of_the_Soviet_Union.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/46px-Flag_of_the_Soviet_Union.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Soviet_Union" title="Soviet Union">Soviet Union</a> </th></tr> <tr> <td>1985 </td> <td><a href="/wiki/1985_European_Athletics_Junior_Championships" title="1985 European Athletics Junior Championships">European Junior Championships</a> </td> <td><a href="/wiki/Cottbus" title="Cottbus">Cottbus</a>, <a href="/wiki/East_Germany" title="East Germany">East Germany</a> </td> <td style="background-color: #cc9966;">3rd </td> <td> </td></tr> <tr> <td>1986 </td> <td><a href="/wiki/1986_World_Junior_Championships_in_Athletics" title="1986 World Junior Championships in Athletics">World Junior Championships</a> </td> <td><a href="/wiki/Athens,_Greece" class="mw-redirect" title="Athens, Greece">Athens, Greece</a> </td> <td style="background-color: #cc9966;">3rd </td> <td> </td></tr> <tr> <td>1990 </td> <td><a href="/wiki/1990_European_Championships_in_Athletics" class="mw-redirect" title="1990 European Championships in Athletics">European Championships</a> </td> <td><a href="/wiki/Split_(city)" class="mw-redirect" title="Split (city)">Split</a>, <a href="/wiki/Yugoslavia" title="Yugoslavia">Yugoslavia</a> </td> <td>4th </td> <td><a href="/wiki/1990_European_Athletics_Championships_%E2%80%93_Men%27s_discus_throw" title="1990 European Athletics Championships – Men's discus throw">63.72 m</a> </td></tr> <tr> <th colspan="5">Representing <span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/23px-Flag_of_Belarus.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/35px-Flag_of_Belarus.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/46px-Flag_of_Belarus.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Belarus" title="Belarus">Belarus</a> </th></tr> <tr> <td>1993 </td> <td><a href="/wiki/1993_World_Championships_in_Athletics" title="1993 World Championships in Athletics">World Championships</a> </td> <td><a href="/wiki/Stuttgart,_Germany" class="mw-redirect" title="Stuttgart, Germany">Stuttgart, Germany</a> </td> <td>7th </td> <td><a href="/wiki/1993_World_Championships_in_Athletics_%E2%80%93_Men%27s_discus_throw" title="1993 World Championships in Athletics – Men's discus throw">61.64 m</a> </td></tr> <tr> <td rowspan="2">1995 </td> <td><a href="/wiki/1995_World_Championships_in_Athletics" title="1995 World Championships in Athletics">World Championships</a> </td> <td><a href="/wiki/Gothenburg" title="Gothenburg">Gothenburg</a>, <a href="/wiki/Sweden" title="Sweden">Sweden</a> </td> <td style="background-color: #cc9966;">3rd </td> <td><a href="/wiki/1995_World_Championships_in_Athletics_%E2%80%93_Men%27s_discus_throw" title="1995 World Championships in Athletics – Men's discus throw">65.88 m</a> </td></tr> <tr> <td><a href="/wiki/1995_IAAF_Grand_Prix_Final" title="1995 IAAF Grand Prix Final">IAAF Grand Prix Final</a> </td> <td><a href="/wiki/Monte_Carlo" title="Monte Carlo">Monte Carlo</a>, Monaco </td> <td>4th </td> <td> </td></tr></tbody></table> <p>Other similar examples can be found at <a class="external text" href="https://en.wikipedia.org/w/index.php?title=Yvonne_van_Gennip&oldid=372776854#World_records">Yvonne van Gennip</a>, <a href="/wiki/Masters_Athletics_World_Records" class="mw-redirect" title="Masters Athletics World Records">Masters Athletics World Records</a> and <a class="external text" href="https://en.wikipedia.org/w/index.php?title=Comparison_of_layout_engines_%28Cascading_Style_Sheets%29&oldid=387933391#Selectors">Comparison of layout engines (Cascading Style Sheets)#Selectors</a>. </p> <div class="mw-heading mw-heading3"><h3 id="Column_headers:_good_example_1" data-mw-thread-id="h-Column_headers:_good_example_1-Avoiding_column_headers_in_the_middle_of_the_table"><span data-mw-comment-start="" id="h-Column_headers:_good_example_1-Avoiding_column_headers_in_the_middle_of_the_table"></span>Column headers: good example 1<span data-mw-comment-end="h-Column_headers:_good_example_1-Avoiding_column_headers_in_the_middle_of_the_table"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=7" title="Edit section: Column headers: good example 1"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The first solution where the table is split in several sub-tables. </p> <table class="wikitable" style="text-align: center;"> <caption>Vasiliy Kaptyukh's achievements representing <span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/23px-Flag_of_the_Soviet_Union.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/35px-Flag_of_the_Soviet_Union.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/46px-Flag_of_the_Soviet_Union.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Soviet_Union" title="Soviet Union">Soviet Union</a> </caption> <tbody><tr> <th scope="col">Competition </th> <th scope="col">Year </th> <th scope="col">Venue </th> <th scope="col">Position </th> <th scope="col">Notes </th></tr> <tr> <th scope="row"><a href="/wiki/1985_European_Athletics_Junior_Championships" title="1985 European Athletics Junior Championships">European Junior Championships</a> </th> <td>1985 </td> <td><a href="/wiki/Cottbus" title="Cottbus">Cottbus</a>, <a href="/wiki/East_Germany" title="East Germany">East Germany</a> </td> <td style="background-color: #cc9966;">3rd </td> <td> </td></tr> <tr> <th scope="row"><a href="/wiki/1986_World_Junior_Championships_in_Athletics" title="1986 World Junior Championships in Athletics">World Junior Championships</a> </th> <td>1986 </td> <td><a href="/wiki/Athens,_Greece" class="mw-redirect" title="Athens, Greece">Athens, Greece</a> </td> <td style="background-color: #cc9966;">3rd </td> <td> </td></tr> <tr> <th scope="row"><a href="/wiki/1990_European_Championships_in_Athletics" class="mw-redirect" title="1990 European Championships in Athletics">European Championships</a> </th> <td>1990 </td> <td><a href="/wiki/Split_(city)" class="mw-redirect" title="Split (city)">Split</a>, <a href="/wiki/Yugoslavia" title="Yugoslavia">Yugoslavia</a> </td> <td>4th </td> <td><a href="/wiki/1990_European_Athletics_Championships_%E2%80%93_Men%27s_discus_throw" title="1990 European Athletics Championships – Men's discus throw">63.72 m</a> </td></tr></tbody></table> <table class="wikitable" style="text-align: center;"> <caption>Vasiliy Kaptyukh's achievements representing <span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/23px-Flag_of_Belarus.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/35px-Flag_of_Belarus.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/46px-Flag_of_Belarus.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Belarus" title="Belarus">Belarus</a> </caption> <tbody><tr> <th scope="col">Competition </th> <th scope="col">Year </th> <th scope="col">Venue </th> <th scope="col">Position </th> <th scope="col">Notes </th></tr> <tr> <th scope="row"><a href="/wiki/1993_World_Championships_in_Athletics" title="1993 World Championships in Athletics">World Championships</a> </th> <td>1993 </td> <td><a href="/wiki/Stuttgart,_Germany" class="mw-redirect" title="Stuttgart, Germany">Stuttgart, Germany</a> </td> <td>7th </td> <td><a href="/wiki/1993_World_Championships_in_Athletics_%E2%80%93_Men%27s_discus_throw" title="1993 World Championships in Athletics – Men's discus throw">61.64 m</a> </td></tr> <tr> <th scope="row"><a href="/wiki/1995_World_Championships_in_Athletics" title="1995 World Championships in Athletics">World Championships</a> </th> <td rowspan="2">1995 </td> <td><a href="/wiki/Gothenburg" title="Gothenburg">Gothenburg</a>, <a href="/wiki/Sweden" title="Sweden">Sweden</a> </td> <td style="background-color: #cc9966;">3rd </td> <td><a href="/wiki/1995_World_Championships_in_Athletics_%E2%80%93_Men%27s_discus_throw" title="1995 World Championships in Athletics – Men's discus throw">65.88 m</a> </td></tr> <tr> <th scope="row"><a href="/wiki/1995_IAAF_Grand_Prix_Final" title="1995 IAAF Grand Prix Final">IAAF Grand Prix Final</a> </th> <td><a href="/wiki/Monte_Carlo" title="Monte Carlo">Monte Carlo</a>, Monaco </td> <td>4th </td> <td> </td></tr></tbody></table> <div class="mw-heading mw-heading3"><h3 id="Column_headers:_good_example_2" data-mw-thread-id="h-Column_headers:_good_example_2-Avoiding_column_headers_in_the_middle_of_the_table"><span data-mw-comment-start="" id="h-Column_headers:_good_example_2-Avoiding_column_headers_in_the_middle_of_the_table"></span>Column headers: good example 2<span data-mw-comment-end="h-Column_headers:_good_example_2-Avoiding_column_headers_in_the_middle_of_the_table"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=8" title="Edit section: Column headers: good example 2"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>An alternative which takes a bit more time to implement is to add a column for the representation. </p> <table class="wikitable" style="text-align: center;"> <caption>Vasiliy Kaptyukh's achievements </caption> <tbody><tr> <th scope="col">Competition </th> <th scope="col">Year </th> <th scope="col">Representing </th> <th scope="col">Venue </th> <th scope="col">Position </th> <th scope="col">Notes </th></tr> <tr> <th scope="row"><a href="/wiki/1985_European_Athletics_Junior_Championships" title="1985 European Athletics Junior Championships">European Junior Championships</a> </th> <td>1985 </td> <td><span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/23px-Flag_of_the_Soviet_Union.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/35px-Flag_of_the_Soviet_Union.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/46px-Flag_of_the_Soviet_Union.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Soviet_Union" title="Soviet Union">Soviet Union</a> </td> <td><a href="/wiki/Cottbus" title="Cottbus">Cottbus</a>, <a href="/wiki/East_Germany" title="East Germany">East Germany</a> </td> <td style="background-color: #cc9966;">3rd </td> <td> </td></tr> <tr> <th scope="row"><a href="/wiki/1986_World_Junior_Championships_in_Athletics" title="1986 World Junior Championships in Athletics">World Junior Championships</a> </th> <td>1986 </td> <td><span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/23px-Flag_of_the_Soviet_Union.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/35px-Flag_of_the_Soviet_Union.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/46px-Flag_of_the_Soviet_Union.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Soviet_Union" title="Soviet Union">Soviet Union</a> </td> <td><a href="/wiki/Athens,_Greece" class="mw-redirect" title="Athens, Greece">Athens, Greece</a> </td> <td style="background-color: #cc9966;">3rd </td> <td> </td></tr> <tr> <th scope="row"><a href="/wiki/1990_European_Championships_in_Athletics" class="mw-redirect" title="1990 European Championships in Athletics">European Championships</a> </th> <td>1990 </td> <td><span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/23px-Flag_of_the_Soviet_Union.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/35px-Flag_of_the_Soviet_Union.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Flag_of_the_Soviet_Union.svg/46px-Flag_of_the_Soviet_Union.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Soviet_Union" title="Soviet Union">Soviet Union</a> </td> <td><a href="/wiki/Split_(city)" class="mw-redirect" title="Split (city)">Split</a>, <a href="/wiki/Yugoslavia" title="Yugoslavia">Yugoslavia</a> </td> <td>4th </td> <td><a href="/wiki/1990_European_Athletics_Championships_%E2%80%93_Men%27s_discus_throw" title="1990 European Athletics Championships – Men's discus throw">63.72 m</a> </td></tr> <tr> <th scope="row"><a href="/wiki/1993_World_Championships_in_Athletics" title="1993 World Championships in Athletics">World Championships</a> </th> <td>1993 </td> <td><span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/23px-Flag_of_Belarus.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/35px-Flag_of_Belarus.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/46px-Flag_of_Belarus.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Belarus" title="Belarus">Belarus</a> </td> <td><a href="/wiki/Stuttgart,_Germany" class="mw-redirect" title="Stuttgart, Germany">Stuttgart, Germany</a> </td> <td>7th </td> <td><a href="/wiki/1993_World_Championships_in_Athletics_%E2%80%93_Men%27s_discus_throw" title="1993 World Championships in Athletics – Men's discus throw">61.64 m</a> </td></tr> <tr> <th scope="row"><a href="/wiki/1995_World_Championships_in_Athletics" title="1995 World Championships in Athletics">World Championships</a> </th> <td>1995 </td> <td><span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/23px-Flag_of_Belarus.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/35px-Flag_of_Belarus.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/46px-Flag_of_Belarus.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Belarus" title="Belarus">Belarus</a> </td> <td><a href="/wiki/Gothenburg" title="Gothenburg">Gothenburg</a>, <a href="/wiki/Sweden" title="Sweden">Sweden</a> </td> <td style="background-color: #cc9966;">3rd </td> <td><a href="/wiki/1995_World_Championships_in_Athletics_%E2%80%93_Men%27s_discus_throw" title="1995 World Championships in Athletics – Men's discus throw">65.88 m</a> </td></tr> <tr> <th scope="row"><a href="/wiki/1995_IAAF_Grand_Prix_Final" title="1995 IAAF Grand Prix Final">IAAF Grand Prix Final</a> </th> <td>1995 </td> <td><span class="flagicon"><span class="mw-image-border" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/23px-Flag_of_Belarus.svg.png" decoding="async" width="23" height="12" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/35px-Flag_of_Belarus.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Belarus.svg/46px-Flag_of_Belarus.svg.png 2x" data-file-width="1200" data-file-height="600"/></span></span> </span><a href="/wiki/Belarus" title="Belarus">Belarus</a> </td> <td><a href="/wiki/Monte_Carlo" title="Monte Carlo">Monte Carlo</a>, Monaco </td> <td>4th </td> <td> </td></tr></tbody></table> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Complex_tables" data-mw-thread-id="h-Complex_tables"><span data-mw-comment-start="" id="h-Complex_tables"></span>Complex tables<span data-mw-comment-end="h-Complex_tables"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=9" title="Edit section: Complex tables"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In contrast with simple tables, which only have headers spanning one column (<code>! scope="col" | </code>) or one row (<code>! scope="row" | </code>), some headers may span multiple columns or rows with the use of the <code>colspan</code> or <code>rowspan</code> attributes. To clearly define relationships and avoid accessibility issues, use <code>! scope="colgroup" colspan="2" | </code> when a column header spans two columns and <code>! scope="rowgroup" rowspan="2" | </code> when a row header spans two rows, adjusting the number if spanning more.<sup id="cite_ref-H63_7-1" class="reference"><a href="#cite_note-H63-7"><span class="cite-bracket">[</span>WCAG 4<span class="cite-bracket">]</span></a></sup> </p> <div style="display: inline-table;"> <p><b>Wikitext:</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable"</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header 1</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header 2</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"colgroup"</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header group</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header 3</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"col"</span><span class="w"> </span><span class="p">|</span><span class="gu"> column header 4</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"rowgroup"</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span><span class="gu"> row header group</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"row"</span><span class="w"> </span><span class="p">|</span><span class="gu"> row header 1</span> <span class="p">|</span> data <span class="p">||</span> data <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"row"</span><span class="w"> </span><span class="p">|</span><span class="gu"> row header 2</span> <span class="p">|</span> data <span class="p">||</span> data <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">scope</span><span class="o">=</span><span class="s2">"row"</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span><span class="gu"> row header 3</span> <span class="p">|</span> data <span class="p">||</span> data <span class="p">|}</span> </pre></div> </div> <div style="display: inline-table;"> <p><b>Produces:</b> </p> <table class="wikitable"> <tbody><tr> <th scope="col" rowspan="2">column header 1 </th> <th scope="col" rowspan="2">column header 2 </th> <th scope="colgroup" colspan="2">column header group </th></tr> <tr> <th scope="col">column header 3 </th> <th scope="col">column header 4 </th></tr> <tr> <th scope="rowgroup" rowspan="2">row header group </th> <th scope="row">row header 1 </th> <td>data</td> <td>data </td></tr> <tr> <th scope="row">row header 2 </th> <td>data</td> <td>data </td></tr> <tr> <th scope="row" colspan="2">row header 3 </th> <td>data</td> <td>data </td></tr></tbody></table> </div> <p>For tables with headers that are more complex, it is recommended to simplify the table or split it up into smaller tables. When this isn't possible, you have to associate each cell to their respective header(s) using the <code>id</code> and <code>headers</code> attributes instead of <code>scope</code>. On the headers, set the <code>id</code> to an unspaced value that is unique on the page. On the cells that are described by headers, set the "headers" to a spaced list of the describing "id" values in an order that a screen reader should read them.<sup id="cite_ref-H43_11-0" class="reference"><a href="#cite_note-H43-11"><span class="cite-bracket">[</span>WCAG 5<span class="cite-bracket">]</span></a></sup> For example, the following markup has the "Company" header describing the "ABC" company (<code>! id="col1" | Company</code> and <code>| headers="col1" | ABC</code>). </p><p>Below is an example of a complex table with headers that aren't visually clear, but uses <code>id</code> and <code>headers</code> instead of <code>scope</code> to associate column and row headers to individual cells. Again, it is recommended to simplify the table so headers are visually clear by splitting it into a "d" and "e" table if possible where the text in the "d" and "e" cells are moved to each table's caption. </p> <div style="display: inline-table;"> <p><b>Wikitext:</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable"</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s2">"a"</span><span class="w"> </span><span class="p">|</span><span class="gu"> a</span> <span class="p">!</span><span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s2">"b"</span><span class="w"> </span><span class="p">|</span><span class="gu"> b</span> <span class="p">!</span><span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s2">"c"</span><span class="w"> </span><span class="p">|</span><span class="gu"> c</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s2">"3"</span><span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s2">"d"</span><span class="w"> </span><span class="p">|</span><span class="gu"> d</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s2">"w"</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"d a"</span><span class="w"> </span><span class="p">|</span><span class="gu"> w (d a)</span> <span class="p">|</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"d b w"</span><span class="w"> </span><span class="p">|</span> d b w <span class="p">|</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"d c w"</span><span class="w"> </span><span class="p">|</span> d c w <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s2">"x"</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"d a"</span><span class="w"> </span><span class="p">|</span><span class="gu"> x (d a)</span> <span class="p">|</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"d b x"</span><span class="w"> </span><span class="p">|</span> d b x <span class="p">|</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"d c x"</span><span class="w"> </span><span class="p">|</span> d c x <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">colspan</span><span class="o">=</span><span class="s2">"3"</span><span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s2">"e"</span><span class="w"> </span><span class="p">|</span><span class="gu"> e</span> <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s2">"y"</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"e a"</span><span class="w"> </span><span class="p">|</span><span class="gu"> y (e a)</span> <span class="p">|</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"e b y"</span><span class="w"> </span><span class="p">|</span> e b y <span class="p">|</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"e c y"</span><span class="w"> </span><span class="p">|</span> e c y <span class="p">|-</span> <span class="p">!</span><span class="w"> </span><span class="na">id</span><span class="o">=</span><span class="s2">"z"</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"e a"</span><span class="w"> </span><span class="p">|</span><span class="gu"> z (e a)</span> <span class="p">|</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"e b z"</span><span class="w"> </span><span class="p">|</span> e b z <span class="p">|</span><span class="w"> </span><span class="na">headers</span><span class="o">=</span><span class="s2">"e c z"</span><span class="w"> </span><span class="p">|</span> e c z <span class="p">|}</span> </pre></div> </div> <div style="display: inline-table;"> <p><b>Produces:</b> </p> <table class="wikitable"> <tbody><tr> <th id="a">a </th> <th id="b">b </th> <th id="c">c </th></tr> <tr> <th colspan="3" id="d">d </th></tr> <tr> <th id="w" headers="d a">w (d a) </th> <td headers="d b w">d b w </td> <td headers="d c w">d c w </td></tr> <tr> <th id="x" headers="d a">x (d a) </th> <td headers="d b x">d b x </td> <td headers="d c x">d c x </td></tr> <tr> <th colspan="3" id="e">e </th></tr> <tr> <th id="y" headers="e a">y (e a) </th> <td headers="e b y">e b y </td> <td headers="e c y">e c y </td></tr> <tr> <th id="z" headers="e a">z (e a) </th> <td headers="e b z">e b z </td> <td headers="e c z">e c z </td></tr></tbody></table> </div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Images_and_color" data-mw-thread-id="h-Images_and_color"><span data-mw-comment-start="" id="h-Images_and_color"></span>Images and color<span data-mw-comment-end="h-Images_and_color"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=10" title="Edit section: Images and color"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Note that colors and images with contrast conforming to accessibility requirements will print nicely in grayscale as an induced effect (among other benefits). </p> <div class="mw-heading mw-heading3"><h3 id="Images" data-mw-thread-id="h-Images-Images_and_color"><span data-mw-comment-start="" id="h-Images-Images_and_color"></span>Images<span data-mw-comment-end="h-Images-Images_and_color"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=11" title="Edit section: Images"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Priority: high (accessibility level: A)</li> <li>Difficulty: unknown (needs more testing and feedback for a precise rating)</li></ul> <p>Images inside a table should meet the general requirements in <a href="/wiki/Wikipedia:Alternative_text_for_images" class="mw-redirect" title="Wikipedia:Alternative text for images">Wikipedia:Alternative text for images</a>. However, small icons are the principal case encountered in a table. They fall into two categories: </p> <ol><li>icons of symbols ought to have minimal alt text that conveys the same information as the icon (example: if <span typeof="mw:File"><span><img alt="increase" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Dark_Green_Arrow_Up.svg/15px-Dark_Green_Arrow_Up.svg.png" decoding="async" width="15" height="15" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Dark_Green_Arrow_Up.svg/23px-Dark_Green_Arrow_Up.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Dark_Green_Arrow_Up.svg/30px-Dark_Green_Arrow_Up.svg.png 2x" data-file-width="700" data-file-height="700"/></span></span> indicates an increase it has <code>|alt=increase</code>);</li> <li>decorative icons (icons carrying no information or associated with a text providing similar information) need to be unlinked and have an empty alt text (<code>|link=|alt=</code>). When they are not able to be unlinked, a minimal alt text will suffice.</li></ol> <p>Note that images in headers can be particularly annoying for <a href="/wiki/Screen_reader" title="Screen reader">screen reader</a> users if they are badly handled. If the image does not comply with the above criteria, the filename will be part of the header title. The filename will be read aloud in every cell under the header containing the icon. The alt text will also be repeated like the filename, which can also be a nuisance if it is irrelevant to the subject or is too long. </p> <div class="mw-heading mw-heading3"><h3 id="Color" data-mw-thread-id="h-Color-Images_and_color"><span data-mw-comment-start="" id="h-Color-Images_and_color"></span>Color<span data-mw-comment-end="h-Color-Images_and_color"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=12" title="Edit section: Color"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Priority: high (accessibility level: A)</li> <li>Difficulty: medium (needs testing and feedback for a precise rating)</li></ul> <p>Colors inside a table should meet the requirements for <a href="/wiki/Wikipedia:Manual_of_Style_(accessibility)#Color" class="mw-redirect" title="Wikipedia:Manual of Style (accessibility)">color</a>. </p> <ul><li>Color contrast – measured by the free <a rel="nofollow" class="external text" href="https://www.paciellogroup.com/resources/contrastanalyser/">Color Contrast Analyser</a> – needs to be sufficient.</li> <li>A very simple tool that can be helpful for choosing contrasting colours is <a rel="nofollow" class="external text" href="https://colororacle.org/">Color Oracle</a>, a "free color blindness simulator for Windows, Mac and Linux".</li></ul> <p>But more importantly, information should not be conveyed by color alone. Information should also be available textually. A footnote or a textual sign<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>note 5<span class="cite-bracket">]</span></a></sup> can also be used to show a cell has a particular meaning. </p> <div class="mw-heading mw-heading4"><h4 id="Bad_uses_of_color" data-mw-thread-id="h-Bad_uses_of_color-Color"><span data-mw-comment-start="" id="h-Bad_uses_of_color-Color"></span>Bad uses of color<span data-mw-comment-end="h-Bad_uses_of_color-Color"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=13" title="Edit section: Bad uses of color"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>From <a class="external text" href="https://en.wikipedia.org/w/index.php?title=Fiscal_year&oldid=384026890#Chart_of_Different_Fiscal_Years">Fiscal calendar#Chart of Different Fiscal Years</a>: </p> <table class="wikitable collapsible" style="width: 100%;"> <caption>By country </caption> <tbody><tr> <th width="100px">Country </th> <th width="100px">Purpose </th> <th width="20px">J </th> <th width="20px">F </th> <th width="20px">M </th> <th width="20px">A </th> <th width="20px">M </th> <th width="20px">J </th> <th width="20px">J </th> <th width="20px">A </th> <th width="20px">S </th> <th width="20px">O </th> <th width="20px">N </th> <th width="20px">D </th> <th width="20px">J </th> <th width="20px">F </th> <th width="20px">M </th> <th width="20px">A </th> <th width="20px">M </th> <th width="20px">J </th> <th width="20px">J </th> <th width="20px">A </th> <th width="20px">S </th> <th width="20px">O </th> <th width="20px">N </th> <th width="20px">D </th></tr> <tr> <td colspan="2"><a href="/wiki/Australia" title="Australia">Australia</a> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td colspan="12" style="background: #abcdef;"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td colspan="2"><a href="/wiki/Canada" title="Canada">Canada</a> </td> <td> </td> <td> </td> <td> </td> <td colspan="12" style="background: #abcdef;"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr></tbody></table> <div class="mw-heading mw-heading4"><h4 id="Good_uses_of_color" data-mw-thread-id="h-Good_uses_of_color-Color"><span data-mw-comment-start="" id="h-Good_uses_of_color-Color"></span>Good uses of color<span data-mw-comment-end="h-Good_uses_of_color-Color"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=14" title="Edit section: Good uses of color"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Note: This is an example of using color rather than of providing accessible tables. Having the table caption in a table header instead produces a non-accessible table. </p><p>Legend: cells marked with "<big>✓</big>" are included in the fiscal year. </p> <table class="wikitable collapsible" style="width: 100%;"> <caption>Fiscal years by country </caption> <tbody><tr> <th scope="col" style="width: 14%;">Country </th> <th scope="col" style="width: 14%;">Purpose </th> <th scope="col" style="width: 3%;"><abbr title="January">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="February">F</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="March">M</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="April">A</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="May">M</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="June">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="July">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="August">A</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="September">S</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="October">O</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="November">N</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="December">D</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="January">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="February">F</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="March">M</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="April">A</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="May">M</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="June">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="July">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="August">A</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="September">S</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="October">O</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="November">N</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="December">D</abbr> </th></tr> <tr> <th scope="row"><a href="/wiki/Australia" title="Australia">Australia</a> </th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th scope="row"><a href="/wiki/Canada" title="Canada">Canada</a> </th> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td style="background: #abcdef; text-align: center;"><big>✓</big> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr></tbody></table> <table class="wikitable collapsible" style="width: 100%;"> <caption>Fiscal years by country </caption> <tbody><tr> <th scope="col" style="width: 14%;">Country </th> <th scope="col" style="width: 14%;">Purpose </th> <th scope="col" style="width: 3%;"><abbr title="January">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="February">F</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="March">M</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="April">A</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="May">M</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="June">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="July">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="August">A</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="September">S</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="October">O</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="November">N</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="December">D</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="January">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="February">F</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="March">M</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="April">A</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="May">M</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="June">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="July">J</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="August">A</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="September">S</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="October">O</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="November">N</abbr> </th> <th scope="col" style="width: 3%;"><abbr title="December">D</abbr> </th></tr> <tr> <th scope="row"><a href="/wiki/Australia" title="Australia">Australia</a> </th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td colspan="12" style="background: #abcdef; text-align: center;">1st of July to 30th of June </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th scope="row"><a href="/wiki/Canada" title="Canada">Canada</a> </th> <td> </td> <td> </td> <td> </td> <td> </td> <td colspan="12" style="background: #abcdef; text-align: center;">1st of April to 31st of March </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr></tbody></table> <p>From <a href="/wiki/Special:PermanentLink/383112406#Competition_record" title="Special:PermanentLink/383112406">Dwain Chambers</a> (with improved table caption and structure; but the original use of color is good): </p> <table class="wikitable plainrowheaders"> <caption>Dwain Chambers competition record </caption> <tbody><tr> <th scope="col">Competition </th> <th scope="col">Year </th> <th scope="col">Venue </th> <th scope="col">Position </th> <th scope="col">Event </th></tr> <tr> <th scope="row"><a href="/wiki/1998_European_Athletics_Championships" title="1998 European Athletics Championships">European Championships</a> </th> <td rowspan="3"><a href="/wiki/1998_in_athletics_(track_and_field)" class="mw-redirect" title="1998 in athletics (track and field)">1998</a> </td> <td><a href="/wiki/Budapest" title="Budapest">Budapest</a>, Hungary </td> <td style="background-color: silver; text-align: center;">2nd </td> <td>100 metres </td></tr> <tr> <th scope="row"><a href="/wiki/1998_IAAF_World_Cup" title="1998 IAAF World Cup">IAAF World Cup</a> </th> <td><a href="/wiki/Johannesburg" title="Johannesburg">Johannesburg</a>, South Africa </td> <td style="background-color: cc9966; text-align: center;">3rd </td> <td>100 metres </td></tr> <tr> <th scope="row"><a href="/wiki/1998_Commonwealth_Games" title="1998 Commonwealth Games">Commonwealth Games</a> </th> <td><a href="/wiki/Kuala_Lumpur" title="Kuala Lumpur">Kuala Lumpur</a>, Malaysia </td> <td style="background-color: gold; text-align: center;">1st </td> <td>4×100 metres relay </td></tr> <tr> <th scope="row"><a href="/wiki/European_Cup_(athletics)" title="European Cup (athletics)">European Cup</a> </th> <td rowspan="3"><a href="/wiki/1999_in_athletics_(track_and_field)" class="mw-redirect" title="1999 in athletics (track and field)">1999</a> </td> <td><a href="/wiki/Paris" title="Paris">Paris</a>, France </td> <td style="background-color: gold; text-align: center;">1st </td> <td>100 metres </td></tr> <tr> <th scope="row" rowspan="2"><a href="/wiki/1999_World_Championships_in_Athletics" title="1999 World Championships in Athletics">IAAF World Championships</a> </th> <td rowspan="2"><a href="/wiki/Seville" title="Seville">Seville</a>, Spain </td> <td style="background-color: cc9966; text-align: center;">3rd </td> <td>100 metres </td></tr> <tr> <td style="background-color: silver; text-align: center;">2nd </td> <td>4×100 metres relay </td></tr></tbody></table> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Nested_data_tables" data-mw-thread-id="h-Nested_data_tables"><span data-mw-comment-start="" id="h-Nested_data_tables"></span>Nested data tables<span data-mw-comment-end="h-Nested_data_tables"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=15" title="Edit section: Nested data tables"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Priority: high (accessibility level: A)</li> <li>Difficulty: unknown (not yet rated)</li></ul> <p>Nested tables can be confusing for <a href="/wiki/Screen_reader" title="Screen reader">screen reader</a> users, however with correct usage they can be navigated as well as any other coding approach to the desired display. </p><p>The key principle in their design and implementation is to maintain normal flow, i.e. to ensure that the ordering of the content in the page code matches the order in which the content is to be presented. This also applies to other coding approaches, such as divs with CSS styling, or rowspan and colspan HTML cell attributes. </p><p>Nesting data tables with header cells also makes it difficult for assistive readers to parse them sensibly, and should be avoided. </p><p>Nesting tables may be the most appropriate method where cells of the parent table are to be subdivided with uneven internal row or column breaks. Note that each table must begin on a new line. </p><p>In the following example, nested tables are used to display sub-tables of varying cell heights: </p> <div style="display: inline-table;"> <p><b>Wikitext:</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable"</span> <span class="p">|</span> <span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable"</span> <span class="p">|</span> Insert 1up <span class="p">|-</span> <span class="p">|</span> Insert 1down:<span class="p"><</span><span class="nt">br</span><span class="p">></span><span class="ni">&nbsp;</span><span class="p"><</span><span class="nt">br</span><span class="p">></span>Taller than insert 1up <span class="p">|}</span> <span class="p">|</span> <span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable"</span> <span class="p">|</span> <span class="ni">&nbsp;</span><span class="p"><</span><span class="nt">br</span><span class="p">></span>Insert 2<span class="p"><</span><span class="nt">br</span><span class="p">></span>full height<span class="p"><</span><span class="nt">br</span><span class="p">></span><span class="ni">&nbsp;</span> <span class="p">|}</span> <span class="p">|</span> <span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable"</span> <span class="p">|</span> Insert 3up<span class="p"><</span><span class="nt">br</span><span class="p">></span><span class="ni">&nbsp;</span><span class="p"><</span><span class="nt">br</span><span class="p">></span>Tall cell here <span class="p">|-</span> <span class="p">|</span> Insert 3down <span class="p">|}</span> <span class="p">|</span> <span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable"</span> <span class="p">|</span> Insert 4up<span class="p"><</span><span class="nt">br</span><span class="p">></span><span class="ni">&nbsp;</span> <span class="p">|-</span> <span class="p">|</span> Insert 4down<span class="p"><</span><span class="nt">br</span><span class="p">></span>Same as above <span class="p">|}</span> <span class="p">|}</span> </pre></div> </div> <div style="display: inline-table;"> <p><b>Produces:</b> </p> <table class="wikitable"> <tbody><tr> <td> <table class="wikitable"> <tbody><tr> <td>Insert 1up </td></tr> <tr> <td>Insert 1down:<br/> <br/>Taller than insert 1up </td></tr></tbody></table> </td> <td> <table class="wikitable"> <tbody><tr> <td> <br/>Insert 2<br/>full height<br/> </td></tr></tbody></table> </td> <td> <table class="wikitable"> <tbody><tr> <td>Insert 3up<br/> <br/>Tall cell here </td></tr> <tr> <td>Insert 3down </td></tr></tbody></table> </td> <td> <table class="wikitable"> <tbody><tr> <td>Insert 4up<br/> </td></tr> <tr> <td>Insert 4down<br/>Same as above </td></tr></tbody></table> </td></tr></tbody></table> </div> <p>By comparison, using rowspan would not only need careful juggling of the positions and values but would break normal flow, splitting up each data subset and even causing Insert 3down and Insert 4down to be read in the wrong order: </p> <div style="display: inline-table;"> <p><b>Wikitext:</b> </p> <div class="mw-highlight mw-highlight-lang-wikitext mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{|</span><span class="w"> </span><span class="na">class</span><span class="o">=</span><span class="s2">"wikitable"</span> <span class="p">|</span> Insert 1up <span class="p">|</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s2">"4"</span><span class="w"> </span><span class="p">|</span> full height <span class="p">|</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s2">"3"</span><span class="w"> </span><span class="p">|</span> Insert 3up<span class="p"><</span><span class="nt">br</span><span class="p">></span><span class="ni">&nbsp;</span><span class="p"><</span><span class="nt">br</span><span class="p">></span>Tall cell here <span class="p">|</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span> Insert 4up <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s2">"3"</span><span class="w"> </span><span class="p">|</span> Insert 1down:<span class="p"><</span><span class="nt">br</span><span class="p">></span><span class="ni">&nbsp;</span><span class="p"><</span><span class="nt">br</span><span class="p">></span>Taller than insert 1up <span class="p">|-</span> <span class="p">|</span><span class="w"> </span><span class="na">rowspan</span><span class="o">=</span><span class="s2">"2"</span><span class="w"> </span><span class="p">|</span> Insert 4down<span class="p"><</span><span class="nt">br</span><span class="p">></span>Same as above <span class="p">|-</span> <span class="p">|</span> Insert 3down <span class="p">|}</span> </pre></div> </div> <div style="display: inline-table;"> <p><b>Produces:</b> </p> <table class="wikitable"> <tbody><tr> <td>Insert 1up </td> <td rowspan="4">full height </td> <td rowspan="3">Insert 3up<br/> <br/>Tall cell here </td> <td rowspan="2">Insert 4up </td></tr> <tr> <td rowspan="3">Insert 1down:<br/> <br/>Taller than insert 1up </td></tr> <tr> <td rowspan="2">Insert 4down<br/>Same as above </td></tr> <tr> <td>Insert 3down </td></tr></tbody></table> </div> <p>CSS also has table display properties which can be applied to other elements such as divs, and could be used to create the layout with correct normal flow. But it requires a custom stylesheet defining the various classes of substitute entity. Moreover, it breaks the formal separation of HTML structure vs. CSS styling by using the styling language to render the correct structure onscreen. It is unnecessary and is not recommended. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Resources" data-mw-thread-id="h-Resources"><span data-mw-comment-start="" id="h-Resources"></span>Resources<span data-mw-comment-end="h-Resources"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=16" title="Edit section: Resources"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Additional information can be found at <a href="/wiki/Wikipedia:Manual_of_Style_(accessibility)/Data_tables_tutorial/Internal_guidelines" class="mw-redirect" title="Wikipedia:Manual of Style (accessibility)/Data tables tutorial/Internal guidelines">Data tables tutorial/Internal guidelines‎‎</a>. However, this guideline is not meant to be enforced, and only serves as a resource for members of WikiProject Accessibility. </p><p>These are examples of tables read aloud by screen readers. They may be useful as concrete examples to show to the community, when the community has difficulty in understanding how an accessible table benefits a screen reader user. </p> <ul><li><a rel="nofollow" class="external text" href="http://bennett1.org/a11y-prg/tbl/134-tbl-scope-attr">Table using SCOPE attributes</a><sup class="noprint Inline-Template"><span style="white-space: nowrap;">[<i><a href="/wiki/Wikipedia:Link_rot" title="Wikipedia:Link rot"><span title="">dead link</span></a></i><span style="visibility:hidden; color:transparent; padding-left:2px">‍</span>]</span></sup> (NVDA using the Crystal voice from NaturalSoft)</li> <li><a rel="nofollow" class="external text" href="http://bennett1.org/j15/accessibility/at-testing/tst-sr/tables-screen-readers/171-tables-using-id-attribute">Table using ID attribute</a><sup class="noprint Inline-Template"><span style="white-space: nowrap;">[<i><a href="/wiki/Wikipedia:Link_rot" title="Wikipedia:Link rot"><span title="">dead link</span></a></i><span style="visibility:hidden; color:transparent; padding-left:2px">‍</span>]</span></sup> (NVDA using the default eSpeak voice)</li></ul> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Notes" data-mw-thread-id="h-Notes"><span data-mw-comment-start="" id="h-Notes"></span>Notes<span data-mw-comment-end="h-Notes"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=17" title="Edit section: Notes"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist"> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text">This page was reviewed by <a href="https://fr.wikipedia.org/wiki/User:Lgd" class="extiw" title="fr:User:Lgd">fr:User:Lgd</a>, an accessibility expert from the French Wikipedia, in September 2010. Any other review by an expert is welcome, if someone has a concern about a guideline. For example, <a href="/wiki/WebAIM" title="WebAIM">WebAIM</a> experts can be contacted.</span> </li> <li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text">See <a rel="nofollow" class="external text" href="http://www.w3.org/TR/html5-diff/#absent-attributes">HTML5 differences from HTML4, 3.6 Absent Attributes</a>: "<code>scope</code> attribute on <code>td</code>" will be deprecated in HTML 5. To prepare for the change we should use solely <code>scope</code> attribute on <code>th</code>.</span> </li> <li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text">See the discussions at MediaWiki talk:Common.css <a class="external text" href="https://en.wikipedia.org/w/index.php?title=MediaWiki_talk:Common.css&diff=prev&oldid=395578619#some_wikitable_ideas">some wikitable ideas</a> and <a class="external text" href="https://en.wikipedia.org/w/index.php?title=MediaWiki_talk:Common.css&diff=prev&oldid=395578619#Bold_row_headers">bold row headers</a>.</span> </li> <li id="cite_note-cap_and_sum-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-cap_and_sum_10-0">^</a></b></span> <span class="reference-text">Table captions can also be made with <code class="nowrap" style=""><caption><var style="padding-right: 1px;">Caption here</var></caption></code>, and summaries with <code class="nowrap" style=""><table summary="<var style="padding-right: 1px;">Summary text here.</var>"></code>, but wiki syntax should be preferred in articles.</span> </li> <li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text">But avoid <a href="/wiki/Unicode" title="Unicode">Unicode</a> characters, per <a href="/wiki/Wikipedia:Manual_of_Style_(accessibility)#Text" class="mw-redirect" title="Wikipedia:Manual of Style (accessibility)">Wikipedia:Manual of Style (accessibility)#Text</a>. See also <a class="external text" href="https://en.wikipedia.org/w/index.php?title=User_talk:Bamse&diff=385470117&oldid=385349107">Graham87's explanation</a> in the context of a <a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia%3AFeatured_list_candidates%2FList_of_National_Treasures_of_Japan_%28crafts%3A_swords%29%2Farchive1&action=historysubmit&diff=385510315&oldid=385430878">featured list candidate.</a></span> </li> </ol></div></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="References" data-mw-thread-id="h-References"><span data-mw-comment-start="" id="h-References"></span>References<span data-mw-comment-end="h-References"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=18" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239543626"><div class="reflist"> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TH">Table cells: The TH and TD elements</a>, W3C</span> </li> <li id="cite_note-WebAccessibility_415-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-WebAccessibility_415_9-0">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.webaccessibility.com/best_practices.php?best_practice_id=415">"Ensure table captions are provided explicitly"</a>. <i>Accessibility Management Platform (AMP)</i>. San Francisco, California: SSB BART Group. 2015. "Best Practices" section<span class="reference-accessdate">. Retrieved <span class="nowrap">13 July</span> 2015</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Accessibility+Management+Platform+%28AMP%29&rft.atitle=Ensure+table+captions+are+provided+explicitly&rft.pages=%22Best+Practices%22+section&rft.date=2015&rft_id=https%3A%2F%2Fwww.webaccessibility.com%2Fbest_practices.php%3Fbest_practice_id%3D415&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWikipedia%3AManual+of+Style%2FAccessibility%2FData+tables+tutorial" class="Z3988"></span> GSA Schedule 70. Cites multiple standards besides WCAG, including: JIS X 8341-3: 2004 - Technical Standards Subpart 5; KWCAG; 47 CFR 14. Advanced Communication Services, §14.21 Performance Objectives; HHS HTML 508 Checklist; and US Telecommunications Act Accessibility Guidelines 1193.41–43.</span> </li> </ol></div></div> <div class="mw-heading mw-heading3"><h3 id="WCAG_references" data-mw-thread-id="h-WCAG_references-References"><span data-mw-comment-start="" id="h-WCAG_references-References"></span>WCAG references<span data-mw-comment-end="h-WCAG_references-References"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&action=edit&section=19" title="Edit section: WCAG references"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-WCAG2.0-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-WCAG2.0_1-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFWeb_Accessibility_Initiative1999" class="citation web cs1">Web Accessibility Initiative (5 May 1999). Chisholm, Wendy; Slatin, John; White, Jason (eds.). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/WAI-WEBCONTENT/">"Web Content Accessibility Guidelines 2.0"</a>. <i>W3.org</i>. Cambridge, Massachusetts: World Wide Web Consortium (W3C)<span class="reference-accessdate">. Retrieved <span class="nowrap">11 December</span> 2008</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=W3.org&rft.atitle=Web+Content+Accessibility+Guidelines+2.0&rft.date=1999-05-05&rft.au=Web+Accessibility+Initiative&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2FWAI-WEBCONTENT%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWikipedia%3AManual+of+Style%2FAccessibility%2FData+tables+tutorial" class="Z3988"></span> Confusingly, the WCAG 2.0's rankings A, AA (or Double-A), and AAA (Triple-A) are used for two different but interrelated concepts, the second of which may be counter-intuitive:<ol type="A"><li>The one used in this Wikipedia guideline – the relative importance of a particular "Success Criterion" at achieving accessibility, in which A is the most essential or impactful, and AAA represents less urgent accessibility allowances a site should make, with AA being of medium urgency. Each criterion is explained at a "How to Meet" link in the section in WCAG 2.0 for each of its accessibility recommendations, and collected at <a rel="nofollow" class="external text" href="http://www.w3.org/WAI/WCAG20/quickref/">"How to Meet WCAG 2.0: A customizable quick reference"</a></li><li>The compliance level of a website, with "A" representing the minimum level of conformance to the accessibility recommendations, and "AAA" being the most accessible, meeting all Level A, AA, and AAA Success Criteria. Thus, "Level AAA Compliance" means the <em>opposite</em> of "only compliant with Level AAA Success Criteria". Wikipedia naturally strives for Level AAA Compliance, prioritizing on proceeding from A to AA to AAA compliance to meet the most essential accessibility requirements the soonest, where practical.</li></ol> <p>The present system replaces the 1999 <a rel="nofollow" class="external text" href="http://www.w3.org/TR/WCAG10/">WCAG 1.0</a> system of Conformance Levels (also A, AA, and AAA) with a <a rel="nofollow" class="external text" href="http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html">checklist</a> of Priority 1, 2, and 3 recommendations; while those roughly correspond to the current A, AA, and AAA success levels, 2.0 has added many criteria that were not present in 1.0. See <a rel="nofollow" class="external text" href="http://www.w3.org/WAI/WCAG20/from10/diff.php">"How WCAG 2.0 Differs from WCAG 1.0"</a> </p> </span></li> <li id="cite_note-H39-3"><span class="mw-cite-backlink">^ <a href="#cite_ref-H39_3-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-H39_3-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H39">"H39: Using caption elements to associate data table captions with data tables"</a>, accessibility level: A.</span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H51">"H51: Using table markup to present tabular information"</a></span> </li> <li id="cite_note-H63-7"><span class="mw-cite-backlink">^ <a href="#cite_ref-H63_7-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-H63_7-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H63.html">"H63: Using the scope attribute to associate header cells and data cells in data tables"</a>, accessibility level: A</span> </li> <li id="cite_note-H43-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-H43_11-0">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H43.html">"H43: Using id and headers attributes to associate data cells with header cells in data tables"</a>, accessibility level: A</span> </li> </ol></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?useformat=desktop&type=1x1&usesul3=0" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&oldid=1260471858">https://en.wikipedia.org/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&oldid=1260471858</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Categories</a>: <ul><li><a href="/wiki/Category:Wikipedia_how-to" title="Category:Wikipedia how-to">Wikipedia how-to</a></li><li><a href="/wiki/Category:Wikipedia_Manual_of_Style_(accessibility)" title="Category:Wikipedia Manual of Style (accessibility)">Wikipedia Manual of Style (accessibility)</a></li><li><a href="/wiki/Category:Wikipedia_essays_and_information_pages_about_the_Manual_of_Style" title="Category:Wikipedia essays and information pages about the Manual of Style">Wikipedia essays and information pages about the Manual of Style</a></li><li><a href="/wiki/Category:Wikipedia_tables" title="Category:Wikipedia tables">Wikipedia tables</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 30 November 2024, at 23:20<span class="anonymous-show"> (UTC)</span>.</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-7bbfc6c4f5-wkt8q","wgBackendResponseTime":123,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Overview_of_basics","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Layout_of_table_headers-Overview_of_basics","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Proper_table_captions_and_summaries","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Caption-Proper_table_captions_and_summaries","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Avoiding_column_headers_in_the_middle_of_the_table","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Column_headers:_bad_example-Avoiding_column_headers_in_the_middle_of_the_table","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Column_headers:_good_example_1-Avoiding_column_headers_in_the_middle_of_the_table","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Column_headers:_good_example_2-Avoiding_column_headers_in_the_middle_of_the_table","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Complex_tables","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Images_and_color","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Images-Images_and_color","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Color-Images_and_color","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Bad_uses_of_color-Color","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Good_uses_of_color-Color","replies":[]}]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Nested_data_tables","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Resources","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Notes","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-References","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-WCAG_references-References","replies":[]}]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.067"},"limitreport":{"cputime":"0.563","walltime":"0.949","ppvisitednodes":{"value":3207,"limit":1000000},"postexpandincludesize":{"value":94020,"limit":2097152},"templateargumentsize":{"value":2159,"limit":2097152},"expansiondepth":{"value":14,"limit":100},"expensivefunctioncount":{"value":17,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":83275,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 750.131 1 -total"," 20.22% 151.690 3 Template:Sidebar_with_collapsible_lists"," 13.82% 103.647 1 Template:Style"," 13.36% 100.185 1 Template:Wikipedia_how-to"," 13.07% 98.025 2 Template:Reflist"," 11.66% 87.444 1 Template:Ombox"," 10.89% 81.682 2 Template:Cite_web"," 8.05% 60.367 3 Template:Shortcut"," 4.50% 33.776 48 Template:Abbr"," 4.50% 33.771 1 Template:Clarify"]},"scribunto":{"limitreport-timeusage":{"value":"0.257","limit":"10.000"},"limitreport-memusage":{"value":4514025,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-69bc8479c8-4z7h7","timestamp":"20241202105439","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>