Basic example of a hidden table

This table is contracted until opened and then displays full width. You can then click to close the table again to carry on reading.

this is a sample caption
Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit
Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit
Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit
Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit

Example of a hidden table with double layered table headers

This table is contracted until opened and then displays full width. You can then click to close the table again to carry on reading.

  Applications Offers Admissions
YearCount UK %EU %Overseas %CountUK %EU %Overseas %CountUK %EU %Overseas %
2009-106,87016.6 %16.2 %67.2 %2,51025.9 %17.3 %56.7 %1,44631.7 %20.0 %8.3 %
2008-95,57518.0 %5.4 %66.6 %2,28126.9 %15.9 %57.2 %1,28234.1 %18.4 %47.5 %
2007-85,51316.5 %14.6 %68.9 %2,13326.2 %16.2 %57.6 %1,26131.8 %18.2 %50.0 %

Example of a text-heavy hidden table without table headers

This table is contracted until opened and then displays full width. You can then click to close the table again to carry on reading.

Indu Francis

Tel: 01223 415149

07877 655 294

Email:

chintonaccomodation@yahoo.co.uk

 

 

29 Kelsey Crescent

Cherry Hinton

Cambridge

CB1 9XT

 

No smoking

 

Parking

Disabled access

 

3 Rooms in separate annexe with own entrance and back door to Garden. LCD TV with Digital Freeview. High Speed wireless internet connection and 1 room has own fridge. Ample car parking. Bathroom with shower and kitchenette for self catering.  Washing once a week.

Rent inclusive of all bills. Cleaner in twice a week

1) Single occupancy £40 per night;

2) Double occupancy £50 per night

 

Self catering facilities:

 

Weekly rates are: 

single £150/week

double £190/week

 

Monthly rates are:

single £475/month

Double £575/month

 

Twin room also available (Double room rates)

 

Monthly rates apply for minimum 2 month bookings only

 

 

Weekly rates apply for minimum 2 weeks bookings only

 

The Old Rosemary Branch

Stuart and Sue Anderson  

Tel:  01223 247161

E-mail: saa30@cam.ac.uk 

Website:www.theoldrosemary

branch.co.uk

 

67 Church End

Cherry Hinton

Cambridge

CB1 3LF

 

No Smoking

 

Pets welcome and access to garden.

Off road parking.

 

Wifi

Single room from £35-45, (£245 weekly); 1 twin, 1 double from £50-60 per night. (weekly £350) 

 

Includes breakfast.

 

Bus to city centre.

Mrs Leena Menon

Tel: 07843 624807

E-mail: leenakmenon@hotmail.com

3 St Margaret’s Square

Cambridge

CB1 8AP

 

No Smoking

 

Free wireless internet access

TV in rooms

Good bus service

Single room £20 per night (£130 per week), Double room £35 per night (£230 per week) with discount for longer stays.
 
Breakfast Not Included
 
Guests can store their own breakfast in our fridge and have access to the kitchen for making tea and coffee.

Appletree House

Mrs Margaret Burke

Tel: 01223 247882

Tel: 07979 252062

E-mail: appletreehouse@btconnect.

com

Website: www.appletreehouse564.

co.uk

564 Coldhams Lane

Cambridge

CB1 3JR

 

No Smoking

Single room £35, (£210 per week); Double/Twin room £60 per night, single person occupancy £45 per night.

 

Inclusive of Continental breakfast.




Basic example of a vertical stacking responsive table

Month Deadline for Department for contractual paperwork to be with RA team Deadline for Department for Temp Input (i.e. overtime/hrs claims) to Payroll Pay Date
January 5th 12th 26th
February 3rd 10th 24th
March 5th 12th 26th
April 5th 12th 26th
May 4th 11th 25th
June 1st 12th 26th
July 5th 12th 26th
August 3rd 10th 24th
September 5th 12th 26th
October 5th 12th 26th
November 5th 12th 26th
December 30th November 7th 21st

Example of a vertical stacking responsive table with row scoped headers inside the table body

Title Salary Reference Closes
Associate Specialty Director in Palliative Care
Department of Public Health and Primary Care, The Primary Care Unit
£30,992-£53,663 pa SN00445 27 August 2012
Clinical Lecturer in Anaesthesia 
Department of Medicine, Division of Anaesthesia
£30,992-£53,663 pa RU00119 20 August 2012
Clinical Lecturer in Medical Genetics or Public Health
Department of Public Health and Primary Care, The Primary Care Unit
£30,992-£53,663 pa SN00423 27 August 2012
Clinical Lecturer in Medical Oncology
Department of Oncology
£30,992-£53,663 pa RD00131 5 October 2012
Lecturer in Criminology
Institute of Criminology
£37,012-£46,846 pa JL16982 31 July 2012

Styleguide notes


Tables


Usage

There are two basic options for displaying tables. Both options look the same at wider screen widths, but differ when viewed at smaller screen widths.

Which option is more appropriate will depend on the table’s content.

With both options, at wide screen widths, the full table is displayed.

Hidden table

This option is best where changing the table’s layout for different screen sizes would make the data difficult to understand.

At smaller screen widths, the full table is hidden beneath a link. When the user clicks the link, the table appears at full width. This may mean the user has to scroll right to see the full table, but provides the best compromise experience. The user can click again to close the table if they wish.

Vertical stacking table

At small screen widths, the table’s columns are stacked vertically, one above the other. This option works well if each column’s content will make sense to the user in isolation, such as with a list of contact names and addresses.


Interaction

N/a


CSS and media queries

Table styles have been borrowed from Twitter Bootstrap but have been customised heavily to reduce unwanted styles and code bloat.

Full size expanded tables have been given a fixed width of 1024 px regardless of browser width.

To create the vertical stacking table view CSS is used to change the table cell display style. This functionality is not available in IE9 as the browser does not support changing the display property of a table cell. Table headers are then hidden with CSS and each table cell is altered to appear as if it is a row of data.


Use of Javascript

Both table solutions will require the inclusion of the tables Javascript.

The expanding tables use Javascript to initially hide the table, clone the table caption and append this cloned text to a link describing what the user will see if they expand the table. A collapse table link is appended to the container to allow you to close the table if it has been opened.

The vertical table structure uses Javascript to detect table headers and add them to each row of content. This way the table header is repeated within each row so they are visible whilst the user is scrolling through table data.

Users without Javascript will see the tables as they appear normally.


Component variants

N/a