Skip to Main Content
Perplexed Owl Random Ponderings

Benjamin ‘Benilda’ Key:

July 18, 2021

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 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.

Purpose CSS Selector
Table with the presentation role. table[role="presentation"]
Table body within a table with the presentation role. table[role="presentation"] > tbody
Table cell within a table with the presentation role. table[role="presentation"] > thead > tr > th
Table header within a table with the presentation role. table[role="presentation"] > thead
Table header cell within a table with the presentation role. table[role="presentation"] > thead > tr > th
Table header row within a table with the presentation role. table[role="presentation"] > thead > tr
Table row within a table with the presentation role. table[role="presentation"] > tbody > tr
Table without the presentation role. table:not([role="presentation"])
Table body within a table without the presentation role. table:not([role="presentation"]) > tbody
Table cell within a table without the presentation role. table:not([role="presentation"]) > tbody > tr > td
Table header within a table without the presentation role. table:not([role="presentation"]) > thead
Table header cell within a table without the presentation role. table:not([role="presentation"]) > thead > tr > th
Table header row within a table without the presentation role. table:not([role="presentation"]) > thead > tr

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;
}