{"id":47,"date":"2018-06-11T16:16:58","date_gmt":"2018-06-11T16:16:58","guid":{"rendered":"http:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/chapter\/tables\/"},"modified":"2018-06-12T15:32:45","modified_gmt":"2018-06-12T15:32:45","slug":"tables","status":"publish","type":"chapter","link":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/chapter\/tables\/","title":{"rendered":"Tables"},"content":{"raw":"\n<p>In this section, we provide guidelines and recommendations for formatting tables.<\/p>\n<h1>What are tables?<\/h1>\n<p><strong>Tables:<\/strong> In this context,&nbsp;we are referring to <strong>data tables<\/strong>, which are tables that include row and\/or column header information to categorize content. (Tables that do not have headers are called <strong>layout tables<\/strong>.)<\/p>\n<p><strong>File types:<\/strong> .docx, .html, .pdf<\/p>\n<hr>\n<h1>Before you begin<\/h1>\n<h2>Are your tables simple or complex?<\/h2>\n<p>A simple table includes a maximum of one header column and\/or one header row. A&nbsp;complex table includes more than one header column and\/or header row, and may include&nbsp;merged or split cells.[footnote]Penn State, \"Tables,\" <em>Accessibility,<\/em>&nbsp;accessed March 28, 2018, http:\/\/accessibility.psu.edu\/tables.[\/footnote]<\/p>\n<p>We recommend you make every effort to keep&nbsp;data tables as simple in structure as possible. The more complex the design of a data table, the less accessible it will be for some students using screen-reading technology to access their textbook materials. Screen readers move left-to-right, top-to-bottom, one cell at a time, and because a screen reader does not repeat a cell, merging or splitting cells&nbsp;may affect the reading order of a table.<\/p>\n<h2>Who are you doing this for?<\/h2>\n<p>This work supports students who:<\/p>\n<ul>\n<li>Are blind or have low vision, for example <a title=\"Full description of Jacob's profile\" href=\"\/accessibilitytoolkit\/chapter\/using-personas\/#Jacob\">Jacob<\/a><\/li>\n<li>Have a form of&nbsp;cognitive disability, for example <a title=\"Full description of Jacob's profile\" href=\"\/accessibilitytoolkit\/chapter\/using-personas\/#Ann\">Ann<\/a><\/li>\n<\/ul>\n<p><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/persona2.jpg\"><img class=\"aligncenter wp-image-27\" alt=\"Ann has a learning disability that makes it difficult for her to concentrate.\" src=\"http:\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/persona2.jpg\" width=\"500\" height=\"307\"><\/a><\/p>\n<hr>\n<h1>What do you need to do?<\/h1>\n<p>In the same way that your <a title=\"see Organizing Content section of this toolkit\" href=\"\/accessibilitytoolkit\/chapter\/organizing-content\/\">content hierarchy needs headings and structure<\/a>, tables need a properly defined structure to be accessible. This means that you must add row and column headers to define the different sections of data. Screen readers read tables horizontally\u2014cell by cell, row by row\u2014and row and column headers help give the context of the data in each cell to students who are blind, have low vision, or have a cognitive disability.<\/p>\n<h2><a id=\"Simple\"><\/a>Creating simple tables<\/h2>\n<p>A simple table includes:<\/p>\n<ol>\n<li>A table title or caption<\/li>\n<li>Maximum of one row of column headers and\/or maximum of one column of row headers<\/li>\n<li>No merged or split cells<\/li>\n<li>Adequate cell padding for visual learners.<\/li>\n<\/ol>\n<div class=\"textbox key-takeaways\">\n<h3 itemprop=\"educationalUse\">Example 1: Creating a Simple Table<\/h3>\n<p>The table below is a simple table. Reviewed against the preceding requirements list, this table:<\/p>\n<ol>\n<li>Includes&nbsp;a <strong>caption<\/strong> (Spring Blossoms).<\/li>\n<li>Has one row&nbsp;in which cells are&nbsp;tagged as <strong>column headers<\/strong> (Colour Family, Bulbs, Shrubs, Trees), and one column (beginning on the second row) in which the cells are tagged as <strong>row headers<\/strong> (Pink, Yellow)<\/li>\n<li>Contains no merged or split cells<\/li>\n<li>Has adequate <strong>cell padding<\/strong>&nbsp;to provide space buffering around the data in each cell. (Cell padding in this table is set at \"10\").<\/li>\n<\/ol>\n<table class=\"lines; center\">\n<caption>Spring Blossoms<\/caption>\n<tbody>\n<tr>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"col\">Colour family<\/th>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"col\">Bulbs<\/th>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"col\">Shrubs<\/th>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"col\">Trees<\/th>\n<\/tr>\n<tr>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"row\">Pink<\/th>\n<td class=\"border\" style=\"vertical-align: middle;\">Tulips<\/td>\n<td class=\"border\" style=\"vertical-align: middle;\">Flowering currant<\/td>\n<td class=\"border\" style=\"vertical-align: middle;\">Ornamental plum<\/td>\n<\/tr>\n<tr>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"row\">Yellow<\/th>\n<td class=\"border\" style=\"vertical-align: middle;\">Daffodils<\/td>\n<td class=\"border\" style=\"vertical-align: middle;\">Forsythia<\/td>\n<td class=\"border\" style=\"vertical-align: middle;\">Star magnolia<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For a student accessing the table through a screen reader, the first row of data following the column headers will be presented along the lines of:<\/p>\n<ul>\n<li>Row 2, Colour family, column 1, Pink<\/li>\n<li>Bulbs, column 2, Tulips<\/li>\n<li>Shrubs, column 3, Flowering currant<\/li>\n<li>Trees, column 4, Ornamental plum<\/li>\n<\/ul>\n<p>By marking the cells and rows that are headers, the screen reader will refer back to those cells so the listener knows what data in each cell refers to. If this table didn't have any headers, cells would just be read left to right, top to bottom.<\/p>\n<\/div>\n<h3>How to mark cells and rows as headers<\/h3>\n<p>As with section headings, it is not enough to bold or enlarge text in table cells that you want to be marked as headers.<\/p>\n<p>If you are familiar with HTML, you can go into the Text editor and change &lt;td&gt; tags to &lt;th&gt; tags. Row-header tags are are given the <em>scope=\"row\"<\/em> attribute and column-header tags get a <em>scope=\"col\"<\/em> attribute.[footnote]\"Tables with Two Headers,\" <em>Web Accessibility Tutorials<\/em>, accessed January 17, 2018, https:\/\/www.w3.org\/WAI\/tutorials\/tables\/two-headers\/.[\/footnote] See Example 2 for an example of markup for an accessible HTML table.<\/p>\n<p>However, for those not comfortable with HTML, here is how you create table row and column headers in <a href=\"\/accessibilitytoolkit\/front-matter\/about-the-toolkit\/#pressbooks\">Pressbooks<\/a>.<\/p>\n<ol>\n<li>Create your table and fill the cells with data.<\/li>\n<li>Select all of the cells that will be your column headers. (This should be all cells in the first row of your table.)\n<ol>\n<li>select the table icon from the top menu of the Visual editor: Table icon &gt; Cell &gt; Table cell properties.<\/li>\n<li>set the \"Cell type\" to \"Header cell.\"<\/li>\n<li>set the \"Scope\" to \"Column.\"<\/li>\n<\/ol>\n<\/li>\n<li>Select all of the cells that will be your row headers. (This should be all cells in the first column of your table, except for the cell in the first row, which has already been marked as a column header.)\n<ol>\n<li>Select the table icon from the top menu of the Visual editor: Table icon &gt; Cell &gt; Table cell properties.<\/li>\n<li>Set the \"Cell type\" to \"Header cell.\"<\/li>\n<li>Set the \"Scope\" to \"Row.\"<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>How to create a table caption<\/h3>\n<p>The Pressbooks Visual editor currently has no options to add a caption to a table, so it has to be done in the Text editor with &lt;caption&gt; tags.<\/p>\n<ol>\n<li>Create your table in the visual editor and fill in all of the data.<\/li>\n<li>Switch to the text editor and find the table you created. (The easiest way to do this is by using [Ctrl\/Command] + [F] and searching for words contained in your table.)<\/li>\n<li>Insert &lt;caption&gt;&lt;\/caption&gt; tags after the &lt;table&gt; tag and add your caption in between them. This is demonstrated in the below example.<\/li>\n<\/ol>\n<p>An example of an inaccessible table header would be one that appears either before or after the table, with no markup connecting the title to the table.<\/p>\n<div class=\"textbox key-takeaways\">\n<h3 itemprop=\"educationalUse\">Example 2: Accessible HTML Table Markup<\/h3>\n<p>&lt;table&gt;&lt;caption&gt;Table 1.1 Spring Blossoms&lt;\/caption&gt;<\/p>\n<p>&lt;thead&gt;<\/p>\n<p>&lt;tr&gt;<\/p>\n<p>&lt;th scope=\"col\"&gt;Colour Family&lt;\/th&gt;<\/p>\n<p>&lt;th scope=\"col\"&gt;Bulbs&lt;\/th&gt;<\/p>\n<p>&lt;th scope=\"col\"&gt;Shrubs&lt;\/th&gt;<\/p>\n<p>&lt;th scope=\"col\"&gt;Trees&lt;\/th&gt;<\/p>\n<p>&lt;\/tr&gt;<\/p>\n<p>&lt;\/thead&gt;<\/p>\n<p>&lt;tbody&gt;<\/p>\n<p>&lt;tr&gt;<\/p>\n<p>&lt;th scope=\"row\"&gt;Pink&lt;\/th&gt;<\/p>\n<p>&lt;td&gt;Tulips&lt;\/td&gt;<\/p>\n<p>&lt;td&gt;Flowering currant&lt;\/td&gt;<\/p>\n<p>&lt;td&gt;Ornamental plum&lt;\/td&gt;<\/p>\n<p>&lt;\/tr&gt;<\/p>\n<p>......<\/p>\n<p>&lt;\/tbody&gt;<\/p>\n<p>&lt;\/table&gt;<\/p>\n<\/div>\n<h3>Add a [Skip Table] option<\/h3>\n<p>For large data tables, it can be a good idea to add a link which will allow people to skip the content of the table. See Table 2.4 for an example.<\/p>\n<table class=\"center\" style=\"height: 540px;\">\n<caption style=\"text-align: left;\"><em>Table 2.4. Main Sociological Research Methods. Sociological research methods have advantages and disadvantages.<\/em><\/caption>\n<thead>\n<tr style=\"height: 15px;\">\n<td class=\"border\" style=\"height: 15px; text-align: center;\" colspan=\"5\"><a href=\"#skiptable2.4\">[Skip Table]<\/a><\/td>\n<\/tr>\n<tr style=\"height: 15px;\">\n<th class=\"border\" style=\"height: 15px;\" scope=\"col\">Method<\/th>\n<th class=\"border\" style=\"height: 15px;\" scope=\"col\">Implementation<\/th>\n<th class=\"border\" style=\"height: 15px;\" scope=\"col\">Advantages<\/th>\n<th class=\"border\" style=\"height: 15px;\" scope=\"col\">Challenges<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 147px;\">\n<th class=\"border\" style=\"height: 147px;\" scope=\"row\">Survey<\/th>\n<td class=\"border\" style=\"height: 147px;\">\n<ul id=\"import-auto-id3649750\">\n<li>Questionnaires<\/li>\n<li>Interviews<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 147px;\">\n<ul id=\"import-auto-id1302674\">\n<li>Yields many responses<\/li>\n<li>Can survey a large sample<\/li>\n<li>Data generalizable<\/li>\n<li>Quantitative data are easy to chart<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 147px;\">\n<ul id=\"import-auto-id1982221\">\n<li>Can be time consuming<\/li>\n<li>Can be difficult to encourage participant response<\/li>\n<li>Captures what people think and believe, but not necessarily how they behave in real life<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr style=\"height: 131px;\">\n<th class=\"border\" style=\"height: 131px;\" scope=\"row\">Field Work<\/th>\n<td class=\"border\" style=\"height: 131px;\">\n<ul id=\"import-auto-id2768302\">\n<li>Observation<\/li>\n<li>Participant observation<\/li>\n<li>Ethnography<\/li>\n<li>Case study<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 131px;\">\n<ul>\n<li>Yields detailed, accurate, real-life information<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 131px;\">\n<div id=\"import-auto-id1813709\">\n<ul>\n<li>Time consuming<\/li>\n<li>Data are often descriptive and not conducive to generalization<\/li>\n<li>Researcher bias is difficult to control for<\/li>\n<li>Qualitative data are difficult to organize<\/li>\n<\/ul>\n<\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 92px;\">\n<th class=\"border\" style=\"height: 92px;\" scope=\"row\">Experiment<\/th>\n<td class=\"border\" style=\"height: 92px;\">\n<ul>\n<li>Deliberate manipulation of social customs and mores<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 92px;\">\n<ul>\n<li>Tests cause and effect relationships<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 92px;\">\n<ul id=\"import-auto-id1323829\">\n<li>Hawthorne effect<\/li>\n<li>Artificial conditions of research<\/li>\n<li>Ethical concerns about people\u2019s wellbeing<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr style=\"height: 140px;\">\n<th class=\"border\" style=\"height: 140px;\" scope=\"row\">Secondary Data Analysis<\/th>\n<td class=\"border\" style=\"height: 140px;\">\n<ul id=\"import-auto-id1329179\">\n<li>Analysis of government data (census, health, crime statistics)<\/li>\n<li>Research of historic documents<\/li>\n<li>Content analysis<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 140px;\">\n<ul>\n<li>Makes good use of previous sociological information<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 140px;\">\n<ul id=\"import-auto-id1291696\">\n<li>Data could be focused on a purpose other than yours<\/li>\n<li>Data can be hard to find<\/li>\n<li>Taking into account the historical or cultural context of texts<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p id=\"skiptable2.4\">As shown, this link is best placed in a row preceding the column headers. That way, someone using a screen reader will hear the caption of the table before being given the option to skip the table.<\/p>\n<p>For more information about creating same page links, see \"<a href=\"https:\/\/opentextbc.ca\/pressbooks\/chapter\/how-to-link-material\/\">How to Link Material<\/a>\" in the BCcampus Open Education&nbsp;<a href=\"https:\/\/opentextbc.ca\/pressbooks\/\"><em>Pressbooks Guide<\/em><\/a>.<\/p>\n<h1>Attributions<\/h1>\n<p>Ann: Original artwork by BCcampus is under a&nbsp;<a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY 4.0 International Licence<\/a>.<\/p>\n<p>Table 2.4. \"Main Sociological Research Methods\" was taken from <a href=\"https:\/\/opentextbc.ca\/introductiontosociology2ndedition\/chapter\/chapter-2-sociological-research\/\">Introduction to Sociology - 2nd Canadian Edition<\/a>&nbsp;by William Little. It is under a <a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY 4.0 International Licence<\/a>.<\/p>\n\n","rendered":"<p>In this section, we provide guidelines and recommendations for formatting tables.<\/p>\n<h1>What are tables?<\/h1>\n<p><strong>Tables:<\/strong> In this context,&nbsp;we are referring to <strong>data tables<\/strong>, which are tables that include row and\/or column header information to categorize content. (Tables that do not have headers are called <strong>layout tables<\/strong>.)<\/p>\n<p><strong>File types:<\/strong> .docx, .html, .pdf<\/p>\n<hr \/>\n<h1>Before you begin<\/h1>\n<h2>Are your tables simple or complex?<\/h2>\n<p>A simple table includes a maximum of one header column and\/or one header row. A&nbsp;complex table includes more than one header column and\/or header row, and may include&nbsp;merged or split cells.<a class=\"footnote\" title=\"Penn State, &quot;Tables,&quot; Accessibility,\u00a0accessed March 28, 2018, http:\/\/accessibility.psu.edu\/tables.\" id=\"return-footnote-47-1\" href=\"#footnote-47-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a><\/p>\n<p>We recommend you make every effort to keep&nbsp;data tables as simple in structure as possible. The more complex the design of a data table, the less accessible it will be for some students using screen-reading technology to access their textbook materials. Screen readers move left-to-right, top-to-bottom, one cell at a time, and because a screen reader does not repeat a cell, merging or splitting cells&nbsp;may affect the reading order of a table.<\/p>\n<h2>Who are you doing this for?<\/h2>\n<p>This work supports students who:<\/p>\n<ul>\n<li>Are blind or have low vision, for example <a title=\"Full description of Jacob's profile\" href=\"\/accessibilitytoolkit\/chapter\/using-personas\/#Jacob\">Jacob<\/a><\/li>\n<li>Have a form of&nbsp;cognitive disability, for example <a title=\"Full description of Jacob's profile\" href=\"\/accessibilitytoolkit\/chapter\/using-personas\/#Ann\">Ann<\/a><\/li>\n<\/ul>\n<p><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/persona2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-27\" alt=\"Ann has a learning disability that makes it difficult for her to concentrate.\" src=\"\/\/www.publiconsulting.com\/wordpress\/librosmia\/wp-content\/uploads\/sites\/81\/2018\/06\/persona2.jpg\" width=\"500\" height=\"307\" srcset=\"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-content\/uploads\/sites\/81\/2018\/06\/persona2.jpg 700w, https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-content\/uploads\/sites\/81\/2018\/06\/persona2-300x184.jpg 300w, https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-content\/uploads\/sites\/81\/2018\/06\/persona2-65x40.jpg 65w, https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-content\/uploads\/sites\/81\/2018\/06\/persona2-225x138.jpg 225w, https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-content\/uploads\/sites\/81\/2018\/06\/persona2-350x215.jpg 350w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<hr \/>\n<h1>What do you need to do?<\/h1>\n<p>In the same way that your <a title=\"see Organizing Content section of this toolkit\" href=\"\/accessibilitytoolkit\/chapter\/organizing-content\/\">content hierarchy needs headings and structure<\/a>, tables need a properly defined structure to be accessible. This means that you must add row and column headers to define the different sections of data. Screen readers read tables horizontally\u2014cell by cell, row by row\u2014and row and column headers help give the context of the data in each cell to students who are blind, have low vision, or have a cognitive disability.<\/p>\n<h2><a id=\"Simple\"><\/a>Creating simple tables<\/h2>\n<p>A simple table includes:<\/p>\n<ol>\n<li>A table title or caption<\/li>\n<li>Maximum of one row of column headers and\/or maximum of one column of row headers<\/li>\n<li>No merged or split cells<\/li>\n<li>Adequate cell padding for visual learners.<\/li>\n<\/ol>\n<div class=\"textbox key-takeaways\">\n<h3 itemprop=\"educationalUse\">Example 1: Creating a Simple Table<\/h3>\n<p>The table below is a simple table. Reviewed against the preceding requirements list, this table:<\/p>\n<ol>\n<li>Includes&nbsp;a <strong>caption<\/strong> (Spring Blossoms).<\/li>\n<li>Has one row&nbsp;in which cells are&nbsp;tagged as <strong>column headers<\/strong> (Colour Family, Bulbs, Shrubs, Trees), and one column (beginning on the second row) in which the cells are tagged as <strong>row headers<\/strong> (Pink, Yellow)<\/li>\n<li>Contains no merged or split cells<\/li>\n<li>Has adequate <strong>cell padding<\/strong>&nbsp;to provide space buffering around the data in each cell. (Cell padding in this table is set at &#8220;10&#8221;).<\/li>\n<\/ol>\n<table class=\"lines; center\">\n<caption>Spring Blossoms<\/caption>\n<tbody>\n<tr>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"col\">Colour family<\/th>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"col\">Bulbs<\/th>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"col\">Shrubs<\/th>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"col\">Trees<\/th>\n<\/tr>\n<tr>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"row\">Pink<\/th>\n<td class=\"border\" style=\"vertical-align: middle;\">Tulips<\/td>\n<td class=\"border\" style=\"vertical-align: middle;\">Flowering currant<\/td>\n<td class=\"border\" style=\"vertical-align: middle;\">Ornamental plum<\/td>\n<\/tr>\n<tr>\n<th class=\"border\" style=\"width: 10px; height: 10px; vertical-align: middle;\" scope=\"row\">Yellow<\/th>\n<td class=\"border\" style=\"vertical-align: middle;\">Daffodils<\/td>\n<td class=\"border\" style=\"vertical-align: middle;\">Forsythia<\/td>\n<td class=\"border\" style=\"vertical-align: middle;\">Star magnolia<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For a student accessing the table through a screen reader, the first row of data following the column headers will be presented along the lines of:<\/p>\n<ul>\n<li>Row 2, Colour family, column 1, Pink<\/li>\n<li>Bulbs, column 2, Tulips<\/li>\n<li>Shrubs, column 3, Flowering currant<\/li>\n<li>Trees, column 4, Ornamental plum<\/li>\n<\/ul>\n<p>By marking the cells and rows that are headers, the screen reader will refer back to those cells so the listener knows what data in each cell refers to. If this table didn&#8217;t have any headers, cells would just be read left to right, top to bottom.<\/p>\n<\/div>\n<h3>How to mark cells and rows as headers<\/h3>\n<p>As with section headings, it is not enough to bold or enlarge text in table cells that you want to be marked as headers.<\/p>\n<p>If you are familiar with HTML, you can go into the Text editor and change &lt;td&gt; tags to &lt;th&gt; tags. Row-header tags are are given the <em>scope=&#8221;row&#8221;<\/em> attribute and column-header tags get a <em>scope=&#8221;col&#8221;<\/em> attribute.<a class=\"footnote\" title=\"&quot;Tables with Two Headers,&quot; Web Accessibility Tutorials, accessed January 17, 2018, https:\/\/www.w3.org\/WAI\/tutorials\/tables\/two-headers\/.\" id=\"return-footnote-47-2\" href=\"#footnote-47-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a> See Example 2 for an example of markup for an accessible HTML table.<\/p>\n<p>However, for those not comfortable with HTML, here is how you create table row and column headers in <a href=\"\/accessibilitytoolkit\/front-matter\/about-the-toolkit\/#pressbooks\">Pressbooks<\/a>.<\/p>\n<ol>\n<li>Create your table and fill the cells with data.<\/li>\n<li>Select all of the cells that will be your column headers. (This should be all cells in the first row of your table.)\n<ol>\n<li>select the table icon from the top menu of the Visual editor: Table icon &gt; Cell &gt; Table cell properties.<\/li>\n<li>set the &#8220;Cell type&#8221; to &#8220;Header cell.&#8221;<\/li>\n<li>set the &#8220;Scope&#8221; to &#8220;Column.&#8221;<\/li>\n<\/ol>\n<\/li>\n<li>Select all of the cells that will be your row headers. (This should be all cells in the first column of your table, except for the cell in the first row, which has already been marked as a column header.)\n<ol>\n<li>Select the table icon from the top menu of the Visual editor: Table icon &gt; Cell &gt; Table cell properties.<\/li>\n<li>Set the &#8220;Cell type&#8221; to &#8220;Header cell.&#8221;<\/li>\n<li>Set the &#8220;Scope&#8221; to &#8220;Row.&#8221;<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>How to create a table caption<\/h3>\n<p>The Pressbooks Visual editor currently has no options to add a caption to a table, so it has to be done in the Text editor with &lt;caption&gt; tags.<\/p>\n<ol>\n<li>Create your table in the visual editor and fill in all of the data.<\/li>\n<li>Switch to the text editor and find the table you created. (The easiest way to do this is by using [Ctrl\/Command] + [F] and searching for words contained in your table.)<\/li>\n<li>Insert &lt;caption&gt;&lt;\/caption&gt; tags after the &lt;table&gt; tag and add your caption in between them. This is demonstrated in the below example.<\/li>\n<\/ol>\n<p>An example of an inaccessible table header would be one that appears either before or after the table, with no markup connecting the title to the table.<\/p>\n<div class=\"textbox key-takeaways\">\n<h3 itemprop=\"educationalUse\">Example 2: Accessible HTML Table Markup<\/h3>\n<p>&lt;table&gt;&lt;caption&gt;Table 1.1 Spring Blossoms&lt;\/caption&gt;<\/p>\n<p>&lt;thead&gt;<\/p>\n<p>&lt;tr&gt;<\/p>\n<p>&lt;th scope=&#8221;col&#8221;&gt;Colour Family&lt;\/th&gt;<\/p>\n<p>&lt;th scope=&#8221;col&#8221;&gt;Bulbs&lt;\/th&gt;<\/p>\n<p>&lt;th scope=&#8221;col&#8221;&gt;Shrubs&lt;\/th&gt;<\/p>\n<p>&lt;th scope=&#8221;col&#8221;&gt;Trees&lt;\/th&gt;<\/p>\n<p>&lt;\/tr&gt;<\/p>\n<p>&lt;\/thead&gt;<\/p>\n<p>&lt;tbody&gt;<\/p>\n<p>&lt;tr&gt;<\/p>\n<p>&lt;th scope=&#8221;row&#8221;&gt;Pink&lt;\/th&gt;<\/p>\n<p>&lt;td&gt;Tulips&lt;\/td&gt;<\/p>\n<p>&lt;td&gt;Flowering currant&lt;\/td&gt;<\/p>\n<p>&lt;td&gt;Ornamental plum&lt;\/td&gt;<\/p>\n<p>&lt;\/tr&gt;<\/p>\n<p>&#8230;&#8230;<\/p>\n<p>&lt;\/tbody&gt;<\/p>\n<p>&lt;\/table&gt;<\/p>\n<\/div>\n<h3>Add a [Skip Table] option<\/h3>\n<p>For large data tables, it can be a good idea to add a link which will allow people to skip the content of the table. See Table 2.4 for an example.<\/p>\n<table class=\"center\" style=\"height: 540px;\">\n<caption style=\"text-align: left;\"><em>Table 2.4. Main Sociological Research Methods. Sociological research methods have advantages and disadvantages.<\/em><\/caption>\n<thead>\n<tr style=\"height: 15px;\">\n<td class=\"border\" style=\"height: 15px; text-align: center;\" colspan=\"5\"><a href=\"#skiptable2.4\">[Skip Table]<\/a><\/td>\n<\/tr>\n<tr style=\"height: 15px;\">\n<th class=\"border\" style=\"height: 15px;\" scope=\"col\">Method<\/th>\n<th class=\"border\" style=\"height: 15px;\" scope=\"col\">Implementation<\/th>\n<th class=\"border\" style=\"height: 15px;\" scope=\"col\">Advantages<\/th>\n<th class=\"border\" style=\"height: 15px;\" scope=\"col\">Challenges<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 147px;\">\n<th class=\"border\" style=\"height: 147px;\" scope=\"row\">Survey<\/th>\n<td class=\"border\" style=\"height: 147px;\">\n<ul id=\"import-auto-id3649750\">\n<li>Questionnaires<\/li>\n<li>Interviews<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 147px;\">\n<ul id=\"import-auto-id1302674\">\n<li>Yields many responses<\/li>\n<li>Can survey a large sample<\/li>\n<li>Data generalizable<\/li>\n<li>Quantitative data are easy to chart<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 147px;\">\n<ul id=\"import-auto-id1982221\">\n<li>Can be time consuming<\/li>\n<li>Can be difficult to encourage participant response<\/li>\n<li>Captures what people think and believe, but not necessarily how they behave in real life<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr style=\"height: 131px;\">\n<th class=\"border\" style=\"height: 131px;\" scope=\"row\">Field Work<\/th>\n<td class=\"border\" style=\"height: 131px;\">\n<ul id=\"import-auto-id2768302\">\n<li>Observation<\/li>\n<li>Participant observation<\/li>\n<li>Ethnography<\/li>\n<li>Case study<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 131px;\">\n<ul>\n<li>Yields detailed, accurate, real-life information<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 131px;\">\n<div id=\"import-auto-id1813709\">\n<ul>\n<li>Time consuming<\/li>\n<li>Data are often descriptive and not conducive to generalization<\/li>\n<li>Researcher bias is difficult to control for<\/li>\n<li>Qualitative data are difficult to organize<\/li>\n<\/ul>\n<\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 92px;\">\n<th class=\"border\" style=\"height: 92px;\" scope=\"row\">Experiment<\/th>\n<td class=\"border\" style=\"height: 92px;\">\n<ul>\n<li>Deliberate manipulation of social customs and mores<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 92px;\">\n<ul>\n<li>Tests cause and effect relationships<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 92px;\">\n<ul id=\"import-auto-id1323829\">\n<li>Hawthorne effect<\/li>\n<li>Artificial conditions of research<\/li>\n<li>Ethical concerns about people\u2019s wellbeing<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr style=\"height: 140px;\">\n<th class=\"border\" style=\"height: 140px;\" scope=\"row\">Secondary Data Analysis<\/th>\n<td class=\"border\" style=\"height: 140px;\">\n<ul id=\"import-auto-id1329179\">\n<li>Analysis of government data (census, health, crime statistics)<\/li>\n<li>Research of historic documents<\/li>\n<li>Content analysis<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 140px;\">\n<ul>\n<li>Makes good use of previous sociological information<\/li>\n<\/ul>\n<\/td>\n<td class=\"border\" style=\"height: 140px;\">\n<ul id=\"import-auto-id1291696\">\n<li>Data could be focused on a purpose other than yours<\/li>\n<li>Data can be hard to find<\/li>\n<li>Taking into account the historical or cultural context of texts<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p id=\"skiptable2.4\">As shown, this link is best placed in a row preceding the column headers. That way, someone using a screen reader will hear the caption of the table before being given the option to skip the table.<\/p>\n<p>For more information about creating same page links, see &#8220;<a href=\"https:\/\/opentextbc.ca\/pressbooks\/chapter\/how-to-link-material\/\">How to Link Material<\/a>&#8221; in the BCcampus Open Education&nbsp;<a href=\"https:\/\/opentextbc.ca\/pressbooks\/\"><em>Pressbooks Guide<\/em><\/a>.<\/p>\n<h1>Attributions<\/h1>\n<p>Ann: Original artwork by BCcampus is under a&nbsp;<a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY 4.0 International Licence<\/a>.<\/p>\n<p>Table 2.4. &#8220;Main Sociological Research Methods&#8221; was taken from <a href=\"https:\/\/opentextbc.ca\/introductiontosociology2ndedition\/chapter\/chapter-2-sociological-research\/\">Introduction to Sociology &#8211; 2nd Canadian Edition<\/a>&nbsp;by William Little. It is under a <a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY 4.0 International Licence<\/a>.<\/p>\n<hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-47-1\">Penn State, \"Tables,\" <em>Accessibility,<\/em>&nbsp;accessed March 28, 2018, http:\/\/accessibility.psu.edu\/tables. <a href=\"#return-footnote-47-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-47-2\">\"Tables with Two Headers,\" <em>Web Accessibility Tutorials<\/em>, accessed January 17, 2018, https:\/\/www.w3.org\/WAI\/tutorials\/tables\/two-headers\/. <a href=\"#return-footnote-47-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":1,"menu_order":1,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-47","chapter","type-chapter","status-publish","hentry"],"part":31,"_links":{"self":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/47\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/47\/revisions\/48"}],"part":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/pressbooks\/v2\/parts\/31"}],"metadata":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/47\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/pressbooks\/v2\/chapter-type?post=47"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/wp\/v2\/contributor?post=47"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/www.publiconsulting.com\/wordpress\/accesibilitytoolkit\/wp-json\/wp\/v2\/license?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}