Tables

Notes on Implementation

The Yale UI Component Library does not include Bootstrap’s _tables.scss file. Instead, we include more simple table styles. Future work on tables may come depending on community feedback. Bootstrap’s tables documentation will not be helpful.

  • Tables style are applied to all table elements. Table styles are not opt-in with a .table class, as they are in Bootstrap.
  • Tables are automatically 100% width.
  • Tables are subtly striped by default.
  • To remove borders, use the .table-borderless class.

Accessibility Notes

Responsiveness

Wrap tables in a div with class .table-responsive to allow the table itself to scroll horizontally. Give the table itself tabindex=0 to make the horizontal scroll operable to keyboard-only users.

Semantics

Avoid tables for layout. Tables should be for data only.

Tables should have descriptive column headers. Column header should have a scope="col" attribute. Lengthy or confusing tables should also have row headers. Row headers should have a scope="row" attribute.

Avoid complex tables with merged table cells or multiple levels of headers. These tables can be difficult to mark up correctly with accessibility in mind. Avoid leaving cells empty for formatting purposes.

Examples

Basic Tables (With and Without Borders)

Yale Students by Gender
Division Male Female Total % International*
Yale College 2,902 2,844 5,746 11%
Special (Degree & Non-Degree) 23 6 29 0%
Graduate School of Arts & Sciences 1,572 1,386 2,958 37%
Students
Degree Men Women Total % Who are International
Bachelors 673 686 1,359 9%
Masters & Post-Masters Certificates 1,124 1,153 2,277 32%
Doctorates 359 350 709 17%
Research & Scholarship 190 185 375 26%
Professional Practice 169 165 334 8%

Tables Using thead (With and Without Borders)

Table with thead
Division Male Female Total % International*
Yale College 2,902 2,844 5,746 11%
Special (Degree & Non-Degree) 23 6 29 0%
Graduate School of Arts & Sciences 1,572 1,386 2,958 37%
Borderless Table with thead
Degree Men Women Total % Who are International
Bachelors 673 686 1,359 9%
Masters & Post-Masters Certificates 1,124 1,153 2,277 32%
Doctorates 359 350 709 17%
Research & Scholarship 190 185 375 26%
Professional Practice 169 165 334 8%

Table Using the yale-table Class

Division Male Female Total %International*
Yale College 2,775 2,678 5,453 10%
Special (Degree & Non-Degree) 18 6 24 4%
Graduate School of Arts & Sciences 1,552 1,374 2,926 34%