TAS Style Menu – HTML Tables

The following is a basic HTML table that can be used for presenting information.  This should be the “first choice” when tabular information is to be conveyed on the TAS website.

The following are methods that the table HTML must be modified to create the styling presented above:

• Include a <caption> element in the <tbody> section, before any <tr>.  This includes the bolded “heading” for the whole table.  Including it inside the <table> element ensures that it describes the entire table to screenreaders.
• Add an attribute of style="width:100%" to the <table> element, to force it to span the width of the page container.  This is optional, if it is desired to have a narrower table.
• Add a class of “blog” to the <table> element – this sets the table borders to collapsed, and colors them according to the TAS web palette.  It also ensures the other classes are appropriately picked up in the CSS.
• Add a class of “header” to each <th> element in the top row.  This ensures that they get a background color from the TAS web palette.
• For any left column header cell, make sure it is a <th> element, but add a class of “left” instead of “header” to it.  This ensures that it does NOT get the background shading, and the text is aligned to the left of the cell.
• Unless your table only has one row OR column of headers; ensure each header cell has a scope attribute.  For example; if both the first row and first column are headers, you need scope attributes, like in the table above.
• Add an attribute of style="width: __%;" on each <th> in the first row, where the highlight is a number.  The percentage should be appropriate to flex the size of the table column.  This gives control over the columns in design.  Omitting any width on the <th> elements will let them flex based upon the widest content without a space.  Content will wrap inside the cells (<th> or <td>) at any space character, without a set width.

Each of these are optional but are the standard for basic tables on the TAS website.

The following are some tips to guide the authoring/editing process, to help conform tabular data to simple HTML table formats.

• Avoid merged table cells – While it is quite common to merge cells in Excel, merged cells in HTML tables are inherently difficult to build, and even when properly coded; screen reading software inconsistently parses the information.
  • When possible, restructure the information.  It is sometimes easier to split a table into two different tables, than to re-code a singular table to adapt for screen readers.  For instance; if a table showing data from two different years is provided – include two different tables, and caption each according to the year.
• Use a <caption> element for naming the table as a whole, not an <h#> element sitting outside of the <table> element.
• Use lower-level <h#> elements in the table if you need to use headings (aka; don’t break the h-element hierarchy of the page inside of the table).
• Use scope, colspan, and rowspan attributes appropriately
  • scope is used, when there are both vertical and horizontal table header cells, to identify the context of the header cell (e.g.; whether the header cell is for the row or column)
  • colspan is used when cells are merged across multiple columns – to identify how many columns are merged across
  • rowspan is used when cells are merged across multiple rows – to identify how many rows are merged across
• Avoid layout tables – “Layout tables” are when table HTML elements are used to position HTML content, but all table features are setup to not be displayed (e.g; no borders, no headings, etc…).  This is an example of using existing knowledge to achieve a desired effect – without knowledge of the related effects.  Ultimately; layout tables have been strongly discouraged since HTML 4.0 (1999); and positioning and presentation should be controlled through CSS.  When in doubt: contact someone from TAS M&T to assist with CSS layout.