Zach’s ugly mug (his face) Zach Leatherman

Tablesaw: A Flexible Tool for Responsive Tables

August 06, 2014

September 2023 Update: parts of this jQuery plugin are now available as an updated web component.

Originally posted as Tablesaw: A Flexible Tool for Responsive Tables on the Filament Group Lab.

Next to coming up with project names, managing tables in a responsive layout is one of the trickiest problems in web development. Semantically structured tables are notoriously difficult to style as anything other than… well… a table. On the other hand, cobbling together a pile of divs and spans into a table-like shape means giving up the semantic meaning, accessibility, and navigability of real table elements to represent tabular data, or it means jumping through hoops to recreate those features. When it comes down to it, the semantic benefits of real table elements make them our first and best choice.

Available on GitHub

Demos

Install using NPM

npm install tablesaw

Install using Bower

bower install filament-tablesaw

Originally posted at:

Screenshot image for https://v1.screenshot.11ty.dev/http%3A%2F%2Fwww.filamentgroup.com%2Flab%2Ftablesaw.html/opengraph//


< Newer
W3C Status Banners
Older >
A Frugal and Simple Guide to Putting Lights on your Bike

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)