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
HTML example

The .table-wrap utility is all that's required, the other attributes are included with the aim of demonstrating a WCAG-compliant responsive HTML table as explained in Adrian Roselli's Under-Engineered Responsive Tables article.

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

The default table property values can be customized in the _properties.scss document, new values added must also be included with the tables Sass map in the _maps.scss document for compiling.

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

The table styles can be customized in the _styles.scss document, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Styles

As the contents below shows the _styles.scss document also includes the typography styles and optional extras plus the buttons and forms styles but they have not been included in the example below.

//  ------------------------------------------------------------
//  Styles
//   1. Resets 
//   2. Typography
//   3. Smooth scroll and view-transition (if enabled)
//   4. Accessibility (if enabled)
//   5. Forms and buttons (if enabled)
//   6. Tables (if enabled)
//  ------------------------------------------------------------
@use "../configuration" as *;
@use "../properties" as *;

//  ------------------------------------------------------------
//  6. Tables (if enabled)
//  ------------------------------------------------------------

@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]