{"id":1146,"date":"2024-06-27T14:55:56","date_gmt":"2024-06-27T14:55:56","guid":{"rendered":"https:\/\/wwwtest.ucf.edu\/accessibility\/?p=359"},"modified":"2024-08-08T21:53:40","modified_gmt":"2024-08-08T21:53:40","slug":"tables","status":"publish","type":"post","link":"https:\/\/www.ucf.edu\/accessibility\/tables\/","title":{"rendered":"Tables"},"content":{"rendered":"
Tables are an excellent way to display complicated data in an easy-to-read format. Why is it important to designate header rows and columns? Assistive technologies, such as screen readers, use HTML formatting information, including headers, to communicate table structure. Users of screen readers greatly benefit from tables that are formatted with row and\/or column headers because they make content easier to comprehend (See Figure 1).<\/p>\n Tables should be used to display tabular data rather than using tables to achieve a page layout as demonstrated in Figure 2 below.<\/p>\n When creating tables in html, ensure you are using the proper code to ensure table accessibility. This is what the code should like:<\/p>\n Note the 

Best Practices<\/h2>\n
\n
\r\n<table style=\"border-collapse: collapse\u201d border=\"1\"><\/span>\u00a0<\/span>\r\n\u00a0\u00a0\u00a0 <caption>List of Important Assignments<\/caption><\/span>\u00a0<\/span>\r\n\u00a0\u00a0\u00a0 <tbody><\/span>\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr><\/span>\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th scope=\"col\">Assignment<\/th><\/span>\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th scope=\"col\">Due Date<\/th><\/span>\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th scope=\"col\">% of Grade<\/th><\/span>\u00a0<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\r\n \u00a0\u00a0 <\/tbody>\u00a0\r\n<\/table>\r\n<\/span>\r\n<\/code><\/pre>\n<\/div>\n<th><\/code> tag that denotes that these cells are the table headers. The scope indicates whether the headers are column headers (scope=\"col\"<\/code>) or row headers (scope=\"row\"<\/code>). The <caption><\/code> tag goes directly after the <table><\/code> tag and appears above the table when displayed.<\/p>\nResources<\/h2>\n
\n
\n