Tables
Tables are for structured data only.
Use them to display information in rows and columns (e.g. comparisons or timetables). Do not use tables for layout or styling - use standard page components for that instead.
Default Table
Use a standard table when the content is simple and not too wide, such as dates, locations, fees, or short lists of information. No extra class is needed. On smaller screens the table keeps the same structure, but the cell padding is reduced and text wraps more comfortably.
| Event | Date | Location |
|---|---|---|
| Open Day | Saturday 15 June | Keele campus |
| Applicant Visit Day | Wednesday 10 July | Central Science Labs |
Wide Table With Swipe Hint
Use this for wide tables with several columns. Add the class table--show-swipe-hint to the table. On mobile, the table can be scrolled sideways and a “Swipe to see more” message appears above it to help users understand that more columns are available.
| Module | Level | Credits | Semester | Assessment | Contact Hours |
|---|---|---|---|---|---|
| Introduction to Research | 4 | 15 | One | Essay and presentation | 24 |
| Applied Practice | 5 | 30 | Two | Portfolio | 48 |
Stacked Mobile Table
Use this when a table is easier to read as separate cards on mobile, especially when each row represents one item. Add the class table--stack-mobile to the table. On desktop it displays as a normal table; on mobile the header is hidden visually and each row becomes a stacked card. Each data cell will dynamically include a matching data-label so mobile users can see what the value refers to.
| Student Type | 2025 Fee | Payment Option |
|---|---|---|
| UK full-time | £9,250 | Student finance available |
| International full-time | £18,900 | Annual or instalment plan |
Comparison Table
Use this for comparing options side by side, such as awards, packages, or services. Add table--comparison to the table. If the comparison should become easier to read on phones, also add table--stack-mobile. On desktop, columns are visually separated with alternating backgrounds. On mobile, adding table--stack-mobile turns each comparison row into a card-style layout.
| Feature | Standard Award | Enhanced Award |
|---|---|---|
| Value | £1,000 | £2,000 |
| Eligibility | Available to eligible applicants | Available to high-performing applicants |
