How it works
All tables need to include a
caption .This acts a heading for the table as well as giving context to the content of the table for screen readers.
Squiz does not add them in by default so you'll need to do this manually.
caption lives directly underneath
No classes needed. Width is fixed to 100%.
Column widths need to be set in Squiz - 2 columns should be set to 50% each, 3 columns set to 33.33% where appropriate etc.
Table with ticks and crosses
|Bathroom suite||Builders rubble|
|Bed bases and headboards||Car parts|
|Arm chair or chairs||Commercial waste|
|Computers||Garage and patio doors|
|Cupboards and wardrobes||Garden waste|
|Desks and drawers||Hazardous waste including paint, oils etc|
|Garden furniture||Items that can't be lifted safely by two people|
|Loose wood||Lengths of metal or wood above two metres|
|Rugs/mats||Builders sacks or hippo bags|
|Settees and sofas||Storage heaters|
- .checklist-data on
- .check-list-data-icon on
tdto place an icon
- .check-list-data-text on
tdto place text next to an icon
Icons in the table
Green tick icon
- .fa .fa-check-circle .green-tick-icon on
ito create the green tick
Red cross icon
This is two icons stacked on top of each other.
- .fa-stack and .red-cross-icon on
spanto create the stack and give it colour
- .fa fa-times-circle-o .fa-stack-2x on the first
ifor the circle
- .fa .fa-close .fa-stack-1x on the second
ifor the cross
When not to use this component
Try and avoid tables with split headings in the form of caption. The table below could be formatted into two smaller tables - one with a heading of 'At Maidstone House' and another of 'On Site' like below This makes it easier for screen readers to process the information.
Tables with sub sections
|Advice||At Maidstone House||On Site|
|Hourly Meeting Rate||Specialist Officer Rate||Hourly Meeting Rate||Specialist Officer Rate|
|Household||£180||£160 each||£190||£190 each|
|Minor development||£360||£160 each||£380||£190 each|
|Major development||£540||£160 each||£580||£190 each|
|Large scale development||£720||£160 each||£795||£190 each|
|Works to listed buildings||-||£160 each||-||£190 each|
|Works to protected trees||-||-||-||£55|
|General specialist advice||-||£160 each||-||£190 each|
|Total Cost||(Hourly Meeting Rate + Specialist Officer Rate) x Length of meeting|
|Advice||Hourly meeting rate||Specialist officer rate|
|Minor development||£360||£160 each|
|Major development||£540||£160 each|
|Large scale development||£720||£160 each|
|Works to listed buildings||Not available||£160 each|
|General specialist advice||Not available||£160 each|
The total cost can be calculated by (hourly meeting rate + specialist officer rate) x length of meeting.