Usage of the HTML Table "summary" attribute

The summary attribute is obsolete. If a table caption element is not appropriate, then put the table in a figure element add additional information in a figcaption element. The axis attribute is also obsolete; use scope on appropriate th elements, instead.

From W3C regarding summary:

• The element table must not appear as a descendant of the caption element.
• The summary attribute on the table element is obsolete. Consider describing the structure of the table in a caption element or in a figure element containing the table element; or, simplify the structue of the table so that no description is needed.
• The align attribute on the table element is obsolete. Use CSS instead.
• The width attribute on the table element is obsolete. Use CSS instead.
• The bgcolor attribute on the table element is obsolete. Use CSS instead.
• The value of the border attribute on the table element must be either “1” or the empty string. To regulate the thickness of table borders, Use CSS instead.
• The cellpadding attribute on the table element is obsolete. Use CSS instead.
• The cellspacing attribute on the table element is obsolete. Use CSS instead.
• The frame attribute on the table element is obsolete. Use CSS instead.
• The rules attribute on the table element is obsolete. Use CSS instead.

From W3C regarding axis:

• The scope attribute on the td element is obsolete. Use the scope attribute on a th element instead.
• The abbr attribute on the td element is obsolete. Consider instead beginning the cell contents with concise text, followed by further elaboration if needed.
• The axis attribute on the td element is obsolete. Use the scope attribute instead.
• The align attribute on the td element is obsolete. Use CSS instead.
• The width attribute on the td element is obsolete. Use CSS instead.
• The char attribute on the td element is obsolete. Use CSS instead.
• The charoff attribute on the td element is obsolete. Use CSS instead.
• The valign attribute on the td element is obsolete. Use CSS instead.
• The bgcolor attribute on the td element is obsolete. Use CSS instead.
• The height attribute on the td element is obsolete. Use CSS instead.
• The nowrap attribute on the td element is obsolete. Use CSS instead.

I use the summary attribute to describe the structure of the table and the relationships of the rows and columns to each other. It augments the <tbody> and <th> elements and scope, axis, and id and headers attributes. It is possible to understand the structure of the table using those elements and attributes, but it's nice to have a plain-speak description right up front.

Don't underestimate how much information is being conveyed visually by simply looking at the table. This is what I try to capture in the summary attribute.

I put a content description. Think of it as text that you might see in a caption. The table shouldn't be a conclusion, it should support the conclusion (which is mentioned elsewhere).

Usualy the purpose of the table is clear given the content of the rest of the page. For example, if you're discussing changes in demographics as it relates to voting patterns, it's obvious why you have a table with state population growth rates there. If not, you might make a brief mention of why it's there.

As to why, it's simple: accessibility. Those who use screen readers rely on this information to give the table context. Whether or not you are required to make your site accessible will depend on your employer or client. Even if not required, it's recommended (and certainly appreciated by those who rely upon it).