← All elements
<ol class="lb"><li><i>1</i><span>Aiko</span><u style="--w:100%"></u><b>980</b></li><li><i>2</i><span>Noor</span><u style="--w:84%"></u><b>824</b></li><li><i>3</i><span>Leo</span><u style="--w:66%"></u><b>651</b></li></ol>About this table
A ranked list with gold, silver and bronze medals, bar-style score meters and a highlighted top row.
How it works
Each row is a grid with rank, name, bar and score. The bar is a track with a pseudo-element whose width comes from a custom property, so scores map directly to percentages, and the first row gets a gold-tinted gradient.
Ways to customise it
- Change --w values for your scores.
- Add more rows.
- Colour medals differently.
Good to know
An ordered list preserves ranking for assistive technology. Show the numeric score as text, as here.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.