Tabular data

Topics

A table is an HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. semantic structure for organizing data in a two-dimensional structure. Tabular data is organized in rows or columns, and any table used must use at least one of these parameters as a significant organizing characteristic, using the th element with an appropriate scope attribute. Tables can use the caption element to provide a brief text description of the table content.

Tables should not use cells with rowspan or colspan to represent headings.

WordPress posts list, with use of thead, th, scope, etc.
<table class="wp-list-table widefat fixed striped table-view-excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. pages">
<thead>
<tr>
<td id='cb' class='manage-column column-cb check-column'><label class="screen-reader-text" for="cb-select-all-1">Select All</label><input id="cb-select-all-1" type="checkbox" /></td><th scope="col" id='title' class='manage-column column-title column-primary sortable desc'><a href="https://make.wordpress.org/accessibility/wp-admin/edit.php?post_type=handbook&#038;orderby=title&#038;order=asc"><span>Title</span><span class="sorting-indicator"></span></a></th><th scope="col" id='author' class='manage-column column-author'>Author</th><th scope="col" id='date' class='manage-column column-date sortable asc'><a href="https://make.wordpress.org/accessibility/wp-admin/edit.php?post_type=handbook&#038;orderby=date&#038;order=desc"><span>Date</span><span class="sorting-indicator"></span></a></th>
</tr>
</thead>
<tbody id="the-list">
…
</tbody>
<tfoot>
<tr>
<td class='manage-column column-cb check-column'><label class="screen-reader-text" for="cb-select-all-2">Select All</label><input id="cb-select-all-2" type="checkbox" /></td><th scope="col" class='manage-column column-title column-primary sortable desc'><a href="https://make.wordpress.org/accessibility/wp-admin/edit.php?post_type=handbook&#038;orderby=title&#038;order=asc"><span>Title</span><span class="sorting-indicator"></span></a></th><th scope="col" class='manage-column column-author'>Author</th><th scope="col" class='manage-column column-date sortable asc'><a href="https://make.wordpress.org/accessibility/wp-admin/edit.php?post_type=handbook&#038;orderby=date&#038;order=desc"><span>Date</span><span class="sorting-indicator"></span></a></th>
</tr>
</tfoot>
</table>
view raw table-demo.html hosted with ❤ by GitHub

Top ↑

Other Examples

Standard WordPress settings page
<table class="form-table" role="presentation">
<tr>
<th scope="row"><label for="blogname">Site Title</label></th>
<td><input name="blogname" type="text" id="blogname" value="Make WordPress Accessible" class="regular-text" /></td>
</tr>
<tr>
<th scope="row"><label for="blogdescription">Tagline</label></th>
<td><input name="blogdescription" type="text" id="blogdescription" aria-describedby="tagline-description" value="Equal Access For All" class="regular-text" />
<p class="description" id="tagline-description">In a few words, explain what this site is about.</p></td>
</tr>
<tr>
<th scope="row"><label for="new_admin_email">Administration Email Address</label></th>
<td><input name="new_admin_email" type="email" id="new_admin_email" aria-describedby="new-admin-email-description" value="" class="regular-text ltr" />
<p class="description" id="new-admin-email-description">This address is used for admin purposes. If you change this, we will send you an email at your new address to confirm it. <strong>The new address will not become active until confirmed.</strong></p>
</td>
</tr>
</table>
view raw table-demo-alt.html hosted with ❤ by GitHub

This is not an invalid use of a table; the table is marked as being presentational, which is appropriate, since the information in this table is not structured data. Uses of the table element that are presentational should be avoided, and used only when legacy code and backwards compatibility requires it.

Last updated: