About Table Tags<\/h2>\n
To make readable, accessible tables like this example, we first need to understand a little about table tags and what they mean.<\/p>\n
- \n
- <table><\/strong>\u00a0General table tag. This is the main tag that wraps an entire table and all it’s elements. Be sure to have a <\/table> tag at the end!<\/strong><\/li>\n
- <tbody><\/strong>\u00a0Table body. This should be one singular tag near the beginning of the table after the headers, and a\u00a0<\/tbody><\/strong>\u00a0at the end, after all the rows.<\/li>\n
- <tr><\/strong> This stands for Table Row. This tag is used to create a new row inside a table. The end of the row is noted with <\/tr><\/strong><\/li>\n
- <td><\/strong> This stands for table data. This is used to denote content that will appear inside of a cell column. Use this to move to the next column of data within a row. Similar to rows, they are ended with a <\/td>. <\/strong>Think of this as moving to the next horizontal cell in a row.<\/li>\n
- <thead><\/strong> Table Header. In the example above, “Column Header 1” “Column Header 2” “Column Header 3” and “Column Header 4” are all table headers. This tag is used to set apart column titles from actual table data. Headers are particularly important for accessibility purposes, so screen readers can properly read the column titles. These cells are ended with a <\/thead>. <\/strong>There will be one group of these listed together at the top of the table.<\/li>\n
- <tbody><\/strong> Table body. This should be one singular tag near the beginning of the table after the headers, and a <\/tbody><\/strong> at the end, after all the rows.<\/li>\n<\/ul>\n
The elements of the table are broken down like this:<\/h3>\n
![\"Diagram](\"http:\/\/wordpress.library.illinois.edu\/wp-training\/wp-content\/uploads\/sites\/23\/2017\/06\/TableTutorial.png\")
<\/p>\nThe code (in the text tab of the editor) for the table above will look like this:<\/h3>\n
\n<table class=”table table-striped table-bordered”>
\n<thead class=”thead-inverse”>
\n<\/strong><tr>
\n<th><strong>Column Header 1<\/strong><\/th>
\n<th><strong>Column Header 2<\/strong><\/th>
\n<th><strong>Column Header 3<\/strong><\/th>
\n<th><strong>Column Header 4<\/strong><\/th>
\n<\/tr>
\n<\/thead>
\n<tbody>
\n<tr>
\n<td>Column 1 Table Data<\/td>
\n<td>Column 2 More Table Data<\/td>
\n<td>Column 3 More Table Data<\/td>
\n<td>Column 4 More Table Data<\/td>
\n<\/tr>
\n<tr>
\n<td>Column 1 Table Data<\/td>
\n<td>Column 2 Table Data<\/td>
\n<td>Column 3 More Table Data<\/td>
\n<td>Column 4 Table Data<\/td>
\n<\/tr>
\n<tr>
\n<td>Column 1 Table Data<\/td>
\n<td>Column 2 Table Data<\/td>
\n<td>Column 3 More Table Data<\/td>
\n<td>Column 4 Table Data<\/td>
\n<\/tr>
\n<\/tbody>
\n<\/table>
\n<\/div><\/div><\/div><\/p>\nAdding Columns<\/h2>\n
To add a column, add a new table header inside the <thead> tag, like this:
\n<\/p>\n<thead class=”thead-inverse”>
\n<tr>
\n<th><strong>Column Header 1<\/strong><\/th>
\n<th><strong>Column Header 2<\/strong><\/th>
\n<th><strong>Column Header 3<\/strong><\/th>
\n<th><strong>Column Header 4<\/strong><\/th>
\n<th><strong>NEW COLUMN<\/strong><\/th><\/strong>
\n<\/tr>
\n<\/thead><\/p>\n<\/div><\/div><\/div>\nAdding Rows<\/h2>\n
To add a new row, simply add a new <tr> tag and fill it with the row’s contents, like this:<\/p>\n
\nCode<\/p>\n
\n<tr>
\n<td>Table Data<\/td>
\n<td>Table Data<\/td>
\n<td>More Table Data<\/td>
\n<td>Table Data<\/td>
\n<\/tr><\/p>\n<\/div>\n
\nAction<\/p>\n
\nStart a new row
\nTable data for column 1<\/strong>
\nTable data for column 2<\/strong>
\nTable data for column 3<\/strong>
\nTable data for column 4
\nEnd Row<\/strong><\/p>\n<\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Making Tables Readable & Accessible Column Header 1 Column Header 2 Column Header 3 Column Header 4 Column 1 Table Data Column 2 More Table Data Column 3 More Table Data Column 4 More Table Data Column 1 Table Data Column 2 Table Data Column 3 More Table Data Column 4 Table Data Column 1 […]<\/p>\n","protected":false},"author":73,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1029","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/1029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/users\/73"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/comments?post=1029"}],"version-history":[{"count":10,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/1029\/revisions"}],"predecessor-version":[{"id":1178,"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/pages\/1029\/revisions\/1178"}],"wp:attachment":[{"href":"https:\/\/wordpress.library.illinois.edu\/wp-training\/wp-json\/wp\/v2\/media?parent=1029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- <tbody><\/strong>\u00a0Table body. This should be one singular tag near the beginning of the table after the headers, and a\u00a0<\/tbody><\/strong>\u00a0at the end, after all the rows.<\/li>\n