Tables

Default styles and utilities for HTML data tables.

Source file
src/css/tables.css
View on GitHub
https://github.com/pmbrown/ming-css/blob/main/src/css/tables.css

Included with:

Default (anchor)

Section Floor Extension
Management 3rd #321
Accounting 2nd #221
Marketing 1st #121
Reception Ground #111
Table caption
Section Floor Extension
Management 3rd #321
Accounting 2nd #221
Marketing 1st #121
Reception Ground #111

Utilities (anchor)

<table class="table-hover">

Section Floor Extension
Management 4th #421
Accounting 3rd #321
Marketing 2nd #221
Mailroom 1st #121
Reception Ground #111

<table class="table-striped">

Section Floor Extension
Management 4th #421
Accounting 3rd #321
Marketing 2nd #221
Mailroom 1st #121
Reception Ground #111

<table class="table-combo">

Section Floor Extension
Management 4th #421
Accounting 3rd #321
Marketing 2nd #221
Mailroom 1st #121
Reception Ground #111

Table wrap (anchor)

Responsive HTML table
Section Floor Address Extension Email
Management 7th 100 Main Street, Mutual Building #111321 management@example.com
Accounting 6th 100 Main Street, Mutual Building #222321 accounting@example.com
HR department 5th 100 Main Street, Mutual Building #333321 humanrelations@example.com
Marketing and public relations 4th 100 Main Street, Mutual Building #444321 marketing.and.public.relations@example.com
Web and social media 3rd 100 Main Street, Mutual Building #444321 web@example.com
IT helpdesk 2nd 100 Main Street, Mutual Building #555321 ithelpdesk@example.com
Mailroom 1st 100 Main Street, Mutual Building #666321 mailroom@example.com
<div class="table-wrap" role="region" aria-labelledby="Caption1" tabindex="0">
  <table>
    <caption id="Caption1">Responsive HTML table</caption>
      <-- data -->
  </table>
</div>

The .table-wrap utility is all that's required, the role, aria and tabindex attributes demonstrate a WCAG-compliant responsive table as explained in Adrian Roselli's Under-Engineered Responsive Tables article.

Light & dark (anchor)

Fixed color-scheme utilities included with the backgrounds.

<table class="light">
Section Extension
Management #321
Accounting #221
Marketing #121
Reception #111
<table class="dark">
Section Extension
Management #321
Accounting #221
Marketing #121
Reception #111

Primary colors (anchor)

The tables color classes use the primary colors variables, the source file is included separately.

Source file
src/css/colors/color-tables.css
View on GitHub
https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-tables.css

Included with:

<table class="primary">
Section Floor Extension
Management 3rd #321
Accounting 2nd #221
Marketing 1st #121
Reception Ground #111
<table class="success">
Section Floor Extension
Management 3rd #321
Accounting 2nd #221
Marketing 1st #121
Reception Ground #111
<table class="danger">
Section Floor Extension
Management 3rd #321
Accounting 2nd #221
Marketing 1st #121
Reception Ground #111
<table class="info">
Section Floor Extension
Management 3rd #321
Accounting 2nd #221
Marketing 1st #121
Reception Ground #111
<table class="warning">
Section Floor Extension
Management 3rd #321
Accounting 2nd #221
Marketing 1st #121
Reception Ground #111
<table class="secondary">
Section Floor Extension
Management 3rd #321
Accounting 2nd #221
Marketing 1st #121
Reception Ground #111