Using Different CSS for Data Tables and Layout Tables

Introduction

The table element is often used to either present data in a grid that shows the relationship between two or more items or to just position elements in a document. A table that is used to present data in a grid is called a data table. A table that is used to position elements in a document is called a layout table or presentation table. For more information on the two types of tables see Data vs. Layout Tables.

A data table and a layout table have different requirements for visual presentation. This web page discusses how to use CSS to achieve the different visual presentation for two different types of tables.

How to create the different types of tables

Both data tables and layout tables are created with the table element along with the tr element and td element. A data table also uses the thead element and the th element to define column and row headers. A layout table should also have the role attribute set to presentation.

A data table should not rely on visual cues instead of the thead element and the th element to define column and row headers; see F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers. A layout table should not use the thead element and the th element; see F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables.

For more information see Identify table markup as data or layout.

The Visual Differences Between Data Tables and Layout Tables

Data tables typically have a visible border between table cells. In addition the table column and row headers usually use bold font and may also use a different background color and text color than the rest of the table. Finally a data table may use slightly different background color for even rows.

Layout tables are far more simple. A layout table typically does not have a border or use different colors or fonts for the different parts of the table.

The Techniques Used

The following techniques are used to apply different styles to data tables and layout tables.

• CSS selectors are used to define the elements to which a style applies.
• The CSS attribute selector is used to match elements based on the presence or value of a given attribute.
• The CSS type selector is used to match elements based on the node name.
• The :not() CSS pseudo-class, or negation pseudo-class, represents elements that do not match a list of selectors.
• The child combinator is placed between two CSS selectors to match only those elements matched by the second selector that are the direct children of elements matched by the first.

CSS selectors for Use With Tables

Two main CSS selectors are used.

The following CSS selector matches table elements that have the role attribute set to presentation.

table[role="presentation"]

The following CSS selector matches table elements that do not have the role attribute set to presentation.

table:not([role="presentation"])

Unfortunately, it is not enough to define a style for these two CSS selectors since children do not automatically inherit the styles of their parent. For this reason, the CSS selectors listed in the following table must be used to achieve the goal of applying different styles to data tables and layout tables.

Pulling it All Together

The following CSS is used to style the tables on this website.

table, tbody, tr, td {
  font-size: 1em;
  letter-spacing: normal;
  text-transform: none;
  word-spacing: normal;
}

table[role="presentation"],
table[role="presentation"] > tbody,
table[role="presentation"] > tbody > tr,
table[role="presentation"] > tbody > tr > td,
table[role="presentation"] > thead > tr,
table[role="presentation"] > thead > tr > th {
  border-spacing: 0px;
  border: none;
}

table[role="presentation"] > tbody > tr > td > input {
  border: 2px solid Black !important;
}


table[role="presentation"] > thead {
}

table:not([role="presentation"]) {
  border-collapse: collapse;
  border: 2px solid Black;
}

table:not([role="presentation"]) > tbody {
}

table:not([role="presentation"]) > tbody > tr,
table:not([role="presentation"]) > tbody > tr > td,
table:not([role="presentation"]) > thead > tr {
  border: 2px solid Black;
  vertical-align: top;
}

table:not([role="presentation"]) > tbody > tr:nth-child(even),
table:not([role="presentation"]) > tbody > tr:nth-child(even) > td {
  background-color: rgb(242, 242, 242);
  border: 2px solid Black;
  color: inherit;
}

table:not([role="presentation"]) > thead {
}

table:not([role="presentation"]) > thead > tr > th {
  background-color: rgb(44, 99, 47);
  border: 2px solid Black;
  color: White;
  font-weight: bolder;
}