Tables

Consistently styled standard HTML data tables provide a customizable baseline for generic table markup and can be customized using root level and/or element-specific CSS variables either globally or inline.

Default tables (anchor)

Basic styles are applied to all tables, see customizing further below for information about disabling or customizing the default property values or styles as required.

Table 1: Regular table
Section	Floor	Extension
Management	5th	#555321
Accounting	4th	#444321
Marketing	3rd	#333321

Row hover and stripe modifiers (anchor)

The row hover and stripe utility classes are applied directly to table element, e.g. <table class="table-hover">.

Table 2: Background hover on rows `[class="table-hover"]`
Section	Floor	Extension
Management	5th	#555321
Accounting	4th	#444321
Marketing	3rd	#333321

Table 3: Striped row table `[class="table-striped"]`
Section	Floor	Extension
Management	5th	#555321
Accounting	4th	#444321
Marketing	3rd	#333321
IT helpdesk	2nd	#222321
Mailroom	1st	#111321
Shop front	Ground	#000321

Table 4: Striped row and hover combined table `[class="table-combo"]`
Section	Floor	Extension
Management	5th	#555321
Accounting	4th	#444321
Marketing	3rd	#333321
IT helpdesk	2nd	#222321
Mailroom	1st	#111321
Shop front	Ground	#000321

Responsive HTML table (anchor)

Unlike the utilities above the overflow utility for responsive tables is applied to a wrapper element containing each table, the example HTML is provided below the table demo.

Table 5: Responsive HTML table
Section	Floor	Address	Extension	Email
Management	7th floor	100 Main Street, Mutual Building	#111321	management@example.com
Accounting	6th floor	100 Main Street, Mutual Building	#222321	accounting@example.com
HR department	5th floor	100 Main Street, Mutual Building	#333321	humanrelations@example.com
Marketing and public relations	4th floor	100 Main Street, Mutual Building	#444321	marketing.and.public.relations@example.com
Web and social media	3rd floor	100 Main Street, Mutual Building	#444321	web@example.com
IT helpdesk	2nd floor	100 Main Street, Mutual Building	#555321	ithelpdesk@example.com
Mailroom	1st floor	100 Main Street, Mutual Building	#666321	mailroom@example.com

The following demonstrates the responsive wrapper implemented using a technique learned from the article Under-Engineered Responsive Tables on Adrian Roselli's website about creating WCAG-compliant responsive HTML tables.

HTML example

<div class="table-wrap" role="region" aria-labelledby="Caption1" tabindex="0">
<table>
  <caption id="Caption1">Caption</caption>
  <-- table data -->
</table>
</div>

Customizing (anchor)

Enabled in the default Themalize configuration, the table styles are optional and can be disabled if not required with $enable-tables: false; in the configuration.scss document.

Property values (anchor)

The default tables property values are defined from Sass variables that can be customized in the properties.scss document (or via overrides) when compiling as described on the setup and configuration page.

Properties

$table-thead-txt:     var(--text) !default;
$table-thead-bg:      var(--surf-1) !default;
$table-hover:         color-mix(in srgb, var(--table-thead-bg) 55%, var(--body-bg)) !default;
$table-stripes:       color-mix(in srgb, var(--table-thead-bg) 35%, var(--body-bg)) !default;
$table-bd-color:      var(--surf-2) !default;
$table-bd-width:      0.0125rem !default;
$table-py:            0.313rem !default;
$table-px:            0.75rem !default;
$table-mb:            1rem !default;

The property values are compiled as CSS variables which are then used to apply the styles, these can also be edited directly in the style sheet if required and/or used to customize styles inline.

CSS variables

:where(html) {
  --table-thead-txt: var(--text);
  --table-thead-bg: var(--surf-1);
  --table-hover: color-mix(in srgb, var(--table-thead-bg) 55%, var(--body-bg));
  --table-stripes: color-mix(in srgb, var(--table-thead-bg) 35%, var(--body-bg));
  --table-bd-color: var(--surf-2);
  --table-bd-width: 0.0125rem;
  --table-py: 0.313rem;
  --table-px: 0.75rem;
  --table-mb: 1rem;
}

New values can be added to the Sass properties above if required but for compiling must also be included with the tables Sass map in the _maps.scss document.

Tables map

$tables: (
  "table-thead-txt": #{$table-thead-txt},
  "table-thead-bg": #{$table-thead-bg},
  "table-hover": #{$table-hover},
  "table-stripes": #{$table-stripes},
  "table-bd-color": #{$table-bd-color},
  "table-bd-width": #{$table-bd-width},
  "table-py": #{$table-py},
  "table-px": #{$table-px},
  "table-mb": #{$table-mb},
) !default;

Styles (anchor)

The tables styles can be customized in the _styles.scss document. Sass @if rules wrap the styles to control compiling via settings in the configuration.scss document, but apart from that they're written as standard CSS using :where() for 0 specificity and grouping common elements together.

Styles

@if $enable-tables {

:where(table) {
  caption-side: top;
  border-collapse: collapse;
  width: 100%;
  margin-block-end: var(--table-mb);
  font-variant-numeric: tabular-nums;
}

:where(caption) {
  font-weight: bold;
  text-align: left;
  padding-block-end: .5rem;
}

:where(thead) th {
  color: var(--table-thead-txt);
  background-color: var(--table-thead-bg);
}

:where(thead) th:last-child {
  border-inline-end-color: var(--table-bd-color);
}

:where(th) {
  font-weight: bold;
  text-align: inherit;
  text-align: -webkit-match-parent;
}

:where(thead, tbody, tfoot, tr, td, th) {
  border: var(--table-bd-width) solid var(--table-bd-color);
  vertical-align: top;
}

:where(tbody, thead) th, td {
  padding-block: var(--table-py);
  padding-inline: var(--table-px);
  white-space: nowrap;
}

//  Table striped and hover utilities

:where(.table-striped tr):nth-child(even),
:where(.table-combo tr):nth-child(even) {
  background-color: var(--table-stripes);
}

:where(.table-hover tbody tr):hover,
:where(.table-combo tbody tr):hover {
  background-color: var(--table-hover);
}

//  Table overflow wrapper

:where(.table-wrap) {
  --margin-bottom: 1rem;
  overflow-x: auto;
  margin-block-end: var(--margin-bottom);
}

:where(.table-wrap):focus {
  outline: 0.188rem solid var(--surf-3);
}

:where(.table-wrap table) {
  --table-mb: 0;
}

} // END [if/enable-tables]

To keep element-specific styles together in a single file for customizing the _styles.scss document also includes the CSS for the typography and buttons and forms styles.