HTML & CSS table with progress bars and percentage
I updated the tables I used in my recent 'Learning Log 2022' article with percentage indicators and have shared the HTML & CSS.
I recently created my first HTML tables for my Learning Log 2022 article. Each row in the table was a course or book I had used during the previous year, and I wanted to add a progress indicator within the rows to show my progress. It took some effort to get the tables looking and functioning the way I wanted (mostly due to declaring the progress variable in the HTML and not the CSS) so I thought the solution was worth sharing.
The difference between the table shown below and those used in my previous article is the inclusion of the percentage value. That required a little hack that takes advantage of CSS Counters.
The table, CSS, and HTML are all included below. You can also visit CodePen to see (and edit) the table. The CodePen version includes some helpful comments in the CSS.
|LinkedIn's ‘Become a data analyst’||
|W3School's ‘SQL tutorial’||
|DBeaver User Manual||
|PL-300: Power BI Data Analyst||
Notes and code
The tags in the first column are added via ::before pseudo-elements.
The second column will use an ellipsis when the text is too long for the column (there's a special place in Hell for people who build tables with unequal row-heights).
For the third column, the percentage progress for each row is declared in the HTML as a CSS Variable. This is then used to set the progress bar length, and also the percentage text. If the percentage is equal to 100%, then the text is swapped for a “✓” and the progress bar colour is changed to green.
To show the percentage value alongside the progress bar (without including it as separate text in the HTML or CSS) I define a CSS counter-reset and set it to the progress variable. I then use the ::before element where the content is set to the CSS counter value (nothing has been “counted”, so this is equal to the counter-reset i.e. the progress variable). It's a bit of a hack that allows me to get a CSS Variable displayed as text on the page.