Presentational attributes on table

<table width="100%" border="1" cellpadding="4" cellspacing="0" bgcolor="#ffffff"> is how tables were styled before CSS. Eight of these attributes set the table’s size, borders, spacing, colour and alignment. The ninth, summary, carried an invisible description of the table. They still turn up in old pages and in HTML generated by older tools.

Why avoid

They are obsolete. The HTML Standard lists align, bgcolor, border, cellpadding, cellspacing, frame, rules and width on table among the attributes that “are obsolete (though the elements are still part of the language), and must not be used by authors”, with the instruction: “Use CSS instead.” For summary on table, it says: “Use one of the techniques for describing tables given in the table section instead.” None of them survives in a conforming form. The standard’s short list of obsolete but conforming features keeps a border attribute only on img, and only as border="0".

The styling attributes still work, which is what makes them a problem. The rendering section turns each into a presentational hint. “The table element’s cellpadding attribute maps to the pixel length properties ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’” of its cells, cellspacing maps to border-spacing, width to width, border to the table’s border widths, and align="center" becomes margin-inline: auto. Those hints sit in the weakest place in the author’s part of the cascade. HTML calls them “the author-level zero-specificity presentational hints part of the CSS cascade”, and CSS Cascade 5 gives them their own origin, “between the regular user origin and the author origin”.

So any stylesheet rule for the same property silently wins. Each attribute either does nothing, because CSS overrides it, or quietly sets a value the stylesheet never mentions. Either way, part of the table’s design lives in markup, where nobody editing the CSS will look for it.

summary has the opposite problem: it is never rendered. A description that only some software might read is one that sighted readers never get.

Use instead

Move the styling to CSS and give the table a visible caption:

<table class="prices">
  <caption>Plans and monthly prices</caption>
  <thead>
    <tr><th scope="col">Plan</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Basic</td><td>CHF 9</td></tr>
  </tbody>
</table>

.prices {
  width: 100%;
  margin-inline: auto;
  border-collapse: collapse;
  background-color: #fff;
}
.prices th,
.prices td {
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
}

Attribute	CSS instead
width	width
align="center"	margin-inline: auto
bgcolor	background-color
border, frame, rules	border on the table and its cells, border-collapse
cellspacing	border-spacing
cellpadding	padding on th and td
summary	a <caption>, or text next to the table

Detectability

Fully detectable. The rule reports each table once, however many of the nine attributes it carries. It checks only the table element: the same obsolete attributes on rows and cells are not reported. There is no autofix: removing a styling attribute changes how the table looks, and removing summary removes text that some assistive technology may still read.

Resources

• HTML Standard — Non-conforming features — all nine attributes on table are obsolete; use CSS, or the table-description techniques instead of summary.
• HTML Standard — Obsolete but conforming features — the only conforming border attribute left is border="0" on img.
• HTML Standard — Rendering: tables — how each attribute maps to padding, border-spacing, width, border widths and margin-inline.
• HTML Standard — The CSS user agent style sheet and presentational hints — presentational hints are author-level with zero specificity.
• CSS Cascading and Inheritance Level 5 — Precedence of non-CSS presentational hints — hints form their own origin, below author styles.