July 24th, 2024

Styling Tables the Modern CSS Way

Modern CSS enhances HTML table styling, focusing on accessibility and design. Techniques include proper markup, text alignment, alternating row colors, scrollable wrappers, sticky headers, and consistent column widths for improved readability.

Read original article

Modern CSS has simplified the process of styling HTML tables, making them more visually appealing and responsive. This article by Michelle Barker discusses effective techniques for creating both simple and complex tables while ensuring accessibility. It emphasizes the importance of using proper HTML markup, such as the `<table>`, `<thead>`, `<tbody>`, and `<tfoot>` elements, to enhance readability and assistive technology compatibility. The article provides practical CSS tips, including resetting default styles, aligning text for better readability, and using borders effectively to distinguish between headers, footers, and body rows.

Barker highlights design considerations, such as text alignment based on language direction and the use of alternating row colors to improve readability. The article also addresses managing table overflow with scrollable wrappers and implementing sticky headers for better navigation. Additionally, it discusses vertical alignment of content within cells and the importance of consistent column widths for clarity.

Overall, the article serves as a comprehensive guide for web developers looking to enhance the presentation of tabular data using modern CSS techniques while maintaining accessibility standards. By following these guidelines, developers can create tables that are not only functional but also visually engaging and user-friendly.

Microfeatures I love in blogs and personal websites

The article explores microfeatures for blogs and websites inspired by programming concepts. It highlights sidenotes, navigation tools, progress indicators, and interactive elements to improve user experience subtly. Examples demonstrate practical implementations.

Responsive bar charts in HTML and CSS

Creating responsive bar charts in HTML and CSS for international websites poses challenges with SVG for dynamic data. A hybrid approach using minimal JavaScript ensures accessibility and responsiveness without extensive logic.

A simple guide to HTML <head> elements

The article is a detailed guide on essential HTML elements for web documents, covering meta, link, title, and their impact on document perception. It includes social media markup, browser configurations, and author information.

CSS Classes Considered Harmful

The use of CSS classes is criticized for limitations and conflicts. History of HTML/CSS evolution is discussed, proposing attributes over classes for more flexible styling in modern web development.

Don't Use JavaScript for That: Moving Features to CSS and HTML [video]

The video discusses the benefits of using HTML and CSS over JavaScript in web development, focusing on efficiency and inclusivity. It demonstrates creating custom switches with HTML checkboxes and CSS, emphasizing accessibility and styling techniques like "appearance: none".

11 comments

By @orangegreen - 8 months

Alright, shameless plug. I spend a ton of time trying to style this table of city data I had as nicely as I could. Getting CSS tables to not overflow in containers is a nightmare. I had to use a bit of Javascript to get the scroll shadows working using Intersection Observers.

I like HTML tables but getting them to do what you want can really be tricky.

Check out my table: https://caldwell.org/projects/data/city-index

By @simonw - 8 months

A nasty problem I've seen with overflow:auto on a table inside a container is that Windows mouse users have to scroll to the bottom of the page in order to find the horizontal scrollbar and use it to scroll around the table. This is a bad UX, but I've not yet found a good solution for it.

(Trackpad users can use a gesture instead.)

The closest I've come to a solution is using JavaScript to try and mirror the bottom scrollbar at the top of the table as well, but it's pretty cludgy and hard to implement well.

By @lelandfe - 8 months

It irks me when tutorials recommend the use of logical properties for stuff that will never be translated. The direction-agnostic properties are longer and harder to understand with the only upside being that you’ll have less work when you ship traditional Mongolian as a language option.

By @DamonHD - 8 months

I learnt a few things from that and I have been writing HTML and tables since before they were famous! B^>

By @gedy - 8 months

> Whatever you do, don’t be tempted to change the table’s display property value to grid, just to make styling easier. You’ll break the baked-in accessibility that browsers provide for free, rendering your table inaccessible to users of assistive technologies.

Is this accurate? The accessibility for things like screen readers comes from the HTML tags, not CSS afaik.

By @philo23 - 8 months

border-block (and border-inline) are new ones for me!

Also it might be worth mentioning position sticky on table rows/sections don't work yet in Firefox unfortunately :( but hopefully soon...

By @6510 - 8 months

What I want in html:

text-align:number

<th name="temprature">Mean temperature change (°C)</th>

t = myTable.data.Australia.temprature

(if the header name is just a single word use that)

myTable.data.Australia.temprature = t

table{ auto-rowspan:5; } if the nth cell of up to 5 rows has the same value make them into one large cell.

By @carlosjobim - 8 months

It's ironic I have to say. The "sticky" CSS property should only be used for table headers. Yet it is never used anywhere for tables, but instead misused on almost every website for navigation and clutter.