TABLE: Structured data display with consistent styling
VARIANTS: Striped | Bordered | Borderless | Hover | Clickable
Use tables to display tabular data with consistent formatting. Choose variants based on density and interaction needs.
Base table: Column headers with light background, bottom borders on rows. Default size with comfortable padding.
| Course | Provider | Level | Entry Reqs | Deadline |
|---|---|---|---|---|
| Mathematics | Hills Road Sixth Form College | A-Level | 6 GCSEs (incl. Maths 7) | 31 Jan 2026 |
| Computer Science | King Edward VI College | A-Level | 5 GCSEs (incl. Maths 6) | 28 Feb 2026 |
| Business (Extended) | Greenford High School | BTEC | 4 GCSEs grade 4+ | 15 Feb 2026 |
| Chemistry | Hills Road Sixth Form College | A-Level | 6 GCSEs (incl. Science 6-6) | 31 Jan 2026 |
<table class="tw-table">...</table>
Striped rows: Alternating row backgrounds improve readability for wide tables or long lists.
| Open Day | Provider | Type | Date | Spaces |
|---|---|---|---|---|
| Sixth Form Open Evening | Hills Road Sixth Form College | Open Day | 18 Oct 2025 | 120 / 200 |
| Science & Maths Taster | King Edward VI College | Taster | 25 Oct 2025 | 45 / 60 |
| Campus Tour | Greenford High School | Tour | 8 Nov 2025 | 30 / 30 |
| Subject Information Evening | Hills Road Sixth Form College | Open Day | 22 Nov 2025 | — |
<table class="tw-table tw-table-striped">...</table>
Full borders: Borders on all cells. Use when clear cell separation is important.
| Attribute | Code | Type | Shown |
|---|---|---|---|
| Subject | SUBJECT | Text | Yes |
| Exam Board | EXAM_BOARD | Text | Yes |
| Duration | DURATION | Number | Yes |
| Entry Grade | ENTRY_GRADE | Text | No |
<table class="tw-table tw-table-bordered">...</table>
No borders: Clean, minimal appearance. Use for simple data displays or inside cards.
| 10:23 AM | You saved Hills Road Sixth Form College |
| 9:45 AM | Open day reminder: King Edward VI College |
| 9:12 AM | You added Greenford High School to your shortlist |
| 8:30 AM | 3 new A-Level courses match your saved search |
<table class="tw-table tw-table-borderless">...</table>
Hover state: Row highlights on mouse over. Use to indicate that rows are scannable or interactive.
| Course | Provider | Level | Status | Actions |
|---|---|---|---|---|
| Physics | Hills Road Sixth Form College | A-Level | Open | |
| Psychology | King Edward VI College | A-Level | Closing Soon | |
| Health & Social Care | Greenford High School | BTEC | Accepting |
<table class="tw-table tw-table-hover">...</table>
Combine modifiers: Striped + Hover for interactive data tables with improved readability.
| Saved Search | Filters | Matches | Alerts | Actions |
|---|---|---|---|---|
| A-Level Sciences near Cambridge | A-Level, Science, 10 mi | 24 courses | On | |
| Computer Science, Outstanding only | A-Level, Ofsted Outstanding | 9 courses | On | |
| BTEC Business in Manchester | BTEC, Business, Manchester | 12 courses | Off |
<table class="tw-table tw-table-striped tw-table-hover">...</table>
Sizes: Small for dense data, default for general use, large for spacious layouts.
| Course Type | Status | Count |
|---|---|---|
| A-Level | Available | 234 |
| BTEC | Available | 156 |
| T-Level | Limited | 45 |
| Key Date | When | Description |
|---|---|---|
| Applications open | 1 Sep - 31 Oct | Main sixth form application period |
| Open day | 18 October | Sixth Form Open Evening, Hills Road |
<table class="tw-table tw-table-sm">...</table><table class="tw-table tw-table-lg">...</table>
Interactive rows: Add .table-row-clickable to <tr> for cursor pointer and hover state. Use .table-row-selected for selected state.
| Course | Provider | Status | Deadline |
|---|---|---|---|
| Mathematics | Hills Road Sixth Form College | Accepting | 31 Jan 2026 |
| Computer Science | King Edward VI College | Closing Soon | 28 Feb 2026 |
| Chemistry | Hills Road Sixth Form College | Accepting | 31 Jan 2026 |
<tr class="tw-table-row-clickable">...</tr><tr class="tw-table-row-clickable tw-table-row-selected">...</tr>
Horizontal scroll: Wrap table in .table-responsive for horizontal scroll on small screens. Negative margins break out of tw-card padding.
| Course | Provider | Level | Exam Board | Duration | Entry Grade | Ofsted | Deadline |
|---|---|---|---|---|---|---|---|
| Mathematics | Hills Road Sixth Form College | A-Level | OCR | 2 years | Grade 7 | Outstanding | 31 Jan 2026 |
| Computer Science | King Edward VI College | A-Level | AQA | 2 years | Grade 6 | Good | 28 Feb 2026 |
<div class="tw-table-responsive"><table class="tw-table">...</table></div>
Cell utilities: .table-cell-fit for auto-width columns, .table-cell-actions for right-aligned action buttons.
| # | Title | Status | Date | Actions |
|---|---|---|---|---|
| 1 | Shortlist Hills Road Sixth Form College | Done | 15 Mar | |
| 2 | Book Science & Maths taster session | In Progress | 14 Mar |
<th class="tw-table-cell-fit">#</th><th class="tw-table-cell-actions">Actions</th>
No data: Use .table-empty class for empty state messaging.
| Course | Provider | Status | Deadline |
|---|---|---|---|
|
No saved courses yet Courses you save while browsing will appear here. |
|||
<td colspan="4" class="tw-table-empty">...</td>
CELL PATTERNS: 15 standard content types for table cells
COMPOSES: Avatar | Badge | Tag | Progress | Form Switch | Typography Tokens
Recommended HTML patterns for common cell content. Built entirely from existing design system components and Tailwind utilities — no additional CSS classes needed (except .table-cell-check and .table-cell-truncate).
| Type | Example | Composes |
|---|---|---|
| Plain Text | A-Level Chemistry | — |
| Text + Subtext |
A-Level Computer Science
King Edward VI College
|
Typography tokens |
| Provider |
HR
Hills Road Sixth Form College
Cambridge
|
.avatar .avatar-sm |
| Subject Group |
Mathematics
STEM
+2 related subjects
|
.badge .badge-sm |
| Provider (compact) |
KE
King Edward VI College
|
.avatar .avatar-xs |
| Related Courses |
A-Level Mathematics
(OCR)
Also offered: Further Maths,
Statistics
|
Typography + links |
| Badge / Status |
Accepting
Closing Soon
Closed
|
.badge .badge-*-subtle .badge-dot |
| Tag / Multi-Value |
Maths
Sciences
+3
|
.tag-group .tag .tag-sm |
| Numeric |
142
87
12%
|
tabular-nums, font-medium |
| Currency |
£1,250.00
£3,500.00
was £3,200.00
|
tabular-nums, font-medium |
| Progress |
75%
|
.progress .progress-bar |
| Date |
13 Feb 2026
09:30 AM
|
whitespace-nowrap |
| Timestamp |
13 Feb 2026
2 hours ago
|
Typography tokens |
| Boolean |
|
.form-switch or FA icons |
| Link / URL | .table-cell-truncate | |
| Icon + Text |
Sixth Form College
|
FA icon + text |
| Thumbnail |
|
Tailwind sizing + rounded |
<td><div class="tw:flex tw:items-center tw:gap-3"><div class="tw-avatar tw-avatar-sm tw-avatar-blue">HR</div>...</div></td><td><span class="tw-badge tw-badge-success-subtle tw-badge-dot">Accepting</span></td><td class="tw:text-right tw:tabular-nums tw:font-medium">142</td><td class="tw-table-cell-truncate"><a href="#">...</a></td>
SORT: .table-sortable | .table-sort-icon | .table-sort-asc | .table-sort-desc
Add .table-sortable to <th> for a clickable header. Use .table-sort-asc or .table-sort-desc to indicate the active sort direction. The icon is always fa-arrow-up — CSS handles rotation for descending.
| Course | Provider | Level | Status | Deadline |
|---|---|---|---|---|
| Biology | Hills Road Sixth Form College | A-Level | Accepting | 31 Jan 2026 |
| Engineering | Greenford High School | BTEC | Closing Soon | 15 Feb 2026 |
| Economics | King Edward VI College | A-Level | Accepting | 28 Feb 2026 |
<th class="tw-table-sortable">Course <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i></th><th class="tw-table-sortable tw-table-sort-asc">Course <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i></th><th class="tw-table-sortable tw-table-sort-desc">Course <i class="fa-solid fa-arrow-up tw-table-sort-icon"></i></th>
SELECT: .table-cell-check + .form-check-input + .table-row-selected
Use .table-cell-check on <th> and <td> for narrow checkbox columns. Combine with .table-row-selected to highlight checked rows.
| Provider | Location | Ofsted | Added | |
|---|---|---|---|---|
|
HR
Hills Road Sixth Form College
Sixth Form College
|
Cambridge | Outstanding | 15 Feb 2026 | |
|
KE
King Edward VI College
Sixth Form College
|
Stourbridge | Good | 14 Feb 2026 | |
|
GH
Greenford High School
Secondary with Sixth Form
|
London | Outstanding | 13 Feb 2026 | |
|
MC
Manchester College
Further Education College
|
Manchester | Good | 12 Feb 2026 |
<th class="tw-table-cell-check"><input type="checkbox" class="tw-form-check-input"></th><td class="tw-table-cell-check"><input type="checkbox" class="tw-form-check-input"></td><tr class="tw-table-row-selected">...</tr>