Maidstone Digital Service
BETA
This is our new beta site for Maidstone Digital Services.
Components

Tables

Tables

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

Basic table

Two columns
AmountPrice
1-4 £25
5-8 £35
Three columns
AmountPrice Third Column
1-4 £25 Test
5-8 £35 Test

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

Bulky items we can and cannot collect
CanCan't
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
Fencing Industrial waste
Garden furniture Items that can't be lifted safely by two people
Loose wood Lengths of metal or wood above two metres
Mattresses Window units
Rugs/mats Builders sacks or hippo bags
Settees and sofas Storage heaters
Shelving units   
Tv's   
White goods   

Classes needed:

Table structure:

  • .checklist-data on table
  • .check-list-data-icon on td to place an icon
  • .check-list-data-text on td to place text next to an icon

Icons in the table

Green tick icon
  • .fa .fa-check-circle .green-tick-icon on i to create the green tick
Red cross icon

This is two icons stacked on top of each other.

  • .fa-stack and .red-cross-icon on span to create the stack and give it colour
  • .fa fa-times-circle-o .fa-stack-2x on the first i for the circle
  • .fa .fa-close .fa-stack-1x on the second i for 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  

Example

Meetings at Maidstone House
Advice Hourly meeting rate Specialist officer rate
Household £180 £160 each
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.

When to use this component

Alternatives to tables

Can and cannot lists

Can collect

  • bathroom suite
  • bed bases and headboards
  • arm chair or chairs
  • computers

Cannot collect

  • builders rubble
  • car parts
  • commercial waste
  • garage and patio doors
Back to top
//