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:

ming.css
ming.min.css
ming.mono.css
ming.mono.min.css
ming.restart.css
ming.restart.min.css

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:

ming.css
ming.min.css

<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

Previous: Forms & buttons

Next: Images