League Table
ProStandings table showing team positions in a league or group. Standard columns: position, team name, matches played, wins, draws, losses, goal difference, and points. Supports highlighting the user's team and promotion/relegation zones.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Full table with all statistical columns. | Use on dedicated standings pages with sufficient horizontal space. |
| Compact | Reduced to position, team, played, and points only. | Use in sidebars or dashboard widgets where space is constrained. |
| With Form | Includes a recent results column (W/D/L dots for last 5 matches). | Use when recent form context adds value, such as pre-match analysis views. |
Usage Guidelines
Do
Use semantic <table> with <thead>, <th scope="col">, and <caption>.
Don't
Rely on background colour alone for zone indication — always pair with a text label or icon.
Do
Highlight promotion and relegation zones with a subtle left border + text label.
Don't
Truncate team names in narrow viewports — use abbreviations with title attribute.
Do
Allow column sorting with aria-sort on sortable headers.
Don't
Remove the position column — ordinal ranking is essential context.
Code
Design Tokens
Accessibility
- Use semantic <table> with <caption> and <th scope="col"> on every header.
- Sortable columns indicate direction with aria-sort="ascending" or "descending".
- User's team row uses aria-current="true" for identification.
- Abbreviations (P, W, D, L, GD, Pts) have <abbr> with title attribute.