Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
tables

18 Articles
{
,

}
Direct link to the article In Defense of Tables and Floats in Modern Day Development
float table-layout tables

In Defense of Tables and Floats in Modern Day Development

Twenty-plus years ago, tables were the main way web pages were created in HTML. It gave web builders consistent control of constructing pages with some “design.” No longer did sites only have to be top-to-bottom in a linear manner — …

Avatar of John Macpherson
John Macpherson on Oct 30, 2020
Direct link to the article Rotated Table Column Headers… Now With Fewer Magic Numbers!
tables

Rotated Table Column Headers… Now With Fewer Magic Numbers!

Rotated <table> column headers is something that’s been covered before right here on CSS-Tricks, so shout-out to that for getting me started and helping me achieve this effect. As the article points out, if you aren’t using trigonometry to calculate …

Avatar of Cappie Pomeroy
Cappie Pomeroy on Jun 1, 2020
Direct link to the article Making Tables Responsive With Minimal CSS
responsive tables

Making Tables Responsive With Minimal CSS

Direct Link

Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this:…

Avatar of Robin Rendle
Shared by Robin Rendle on Oct 17, 2019
Direct link to the article Table with Expando Rows
accessibility tables

Table with Expando Rows

Direct Link

“Expando Rows” is a concept where multiple related rows in a <table></table> are collapsed until you open them. You’d call that “progressive disclosure” in interaction design parlance.

After all these years on CSS-Tricks, I have a little better eye for …

Avatar of Chris Coyier
Shared by Chris Coyier on Sep 20, 2019
Direct link to the article Position Sticky and Table Headers
sticky tables

Position Sticky and Table Headers

You can’t position: sticky; a <thead></thead>. Nor a <tr></tr>. But you can sticky a <th></th>, which means you can make sticky headers inside a regular ol’ <table></table>. This is tricky stuff, because if you didn’t know …

Avatar of Chris Coyier
Chris Coyier on Mar 5, 2020
Direct link to the article Table design patterns on the web
tables

Table design patterns on the web

Direct Link

Chen Hui Jing has tackled a ton of design patterns for tables that might come in handy when creating tables that are easy to read and responsive for the web:

There are a myriad of table design patterns out there,

…
Avatar of Robin Rendle
Shared by Robin Rendle on Jan 28, 2019
responsive tables tables

An Idea for a Simple Responsive Spreadsheet

How do you make a spreadsheet-like interface responsive without the use of any JavaScript? This is the question I’ve been asking myself all week as I’ve been working on a new project and trying to figure out how to make …

Avatar of Robin Rendle
Robin Rendle on Nov 28, 2017
tables

Designing Tables to be Read, Not Looked At

Direct Link

Richard Rutter, in support of his new book Web Typography, shares loads of great advice on data table design. Here’s a good one:

You might consider making all the columns an even width. This too does nothing for the

…
Avatar of Chris Coyier
Shared by Chris Coyier on Nov 7, 2017
Direct link to the article The Media Object, A Bunch of Ways
flexbox float grid layout tables

The Media Object, A Bunch of Ways

The Media Object pattern is: image thingy on the left, heading and text on the right.

That’s what Nicole Sullivan called it and the name stuck. It’s a pretty simple pattern, but like all things web design, it can …

Avatar of Chris Coyier
Chris Coyier on Jan 28, 2017
Direct link to the article A Table With Borders Only On The Inside
border tables

A Table With Borders Only On The Inside

You know, like a tic-tac-toe board. I was just pondering how to do this the other day, as one does. There are three ways I can think of. One involves a good handful of rules and is the way I …

Avatar of Chris Coyier
Chris Coyier on Jan 22, 2017
layout table-layout tables

table-layout

The table-layout property defines what algorithm the browser should use to lay out table rows, cells, and columns. …

Avatar of Louis Lazaris
Louis Lazaris on Jan 4, 2017
  • 1
  • 2
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top