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

Articles Tagged
tables

21 Articles
{
,

}
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 4 Ways to Make a Table With Borders Only On The Inside (Tic-Tac-Toe Style)
border tables

4 Ways to Make a Table With Borders Only On The Inside (Tic-Tac-Toe Style)

Wondering how you can make a Table With Borders only on the inside with CSS? Here's four different ways, all with their upsides and downsides. It's very doable.
Avatar of Chris Coyier
Chris Coyier on Jan 21, 2017 (Updated on Jan 5, 2022)
Direct link to the article table-layout
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
Direct link to the article caption-side
caption-side tables

caption-side

The caption-side property in CSS allows you to define where to position HTML’s <caption> element, used on HTML table headers. This property can also apply to any element whose display property is set to caption-side.…

Avatar of Louis Lazaris
Louis Lazaris on Dec 29, 2016 (Updated on Feb 1, 2022)
Direct link to the article Design Better Data Tables
rwd tables

Design Better Data Tables

Matthew Ström on how data tables can be better through things like alignment, rules, labels, backgrounds, and the type of numerals used:

Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining

…
Avatar of Chris Coyier
Chris Coyier on Aug 6, 2016
Direct link to the article Change Color of All Four Borders Even With `border-collapse: collapse;`
border tables

Change Color of All Four Borders Even With `border-collapse: collapse;`

The border-collapse property is great for making borders even all around <table></table> cells. It makes for a clean look that I actually prefer.

But, there is something that can cause issues with how a browser draws the cells and their …

Avatar of Daniel Jauch
Daniel Jauch on Jul 15, 2016 (Updated on Mar 4, 2017)
Direct link to the article Accessible, Simple, Responsive Tables
responsive tables rwd tables

Accessible, Simple, Responsive Tables

There is no single solution to make any <table></table> appropriately responsive. That’s what I like about this post by Davide Rizzo: it admits that, then gets on with some solutions. This is a great addition to territory we’ve been …

Avatar of Davide Rizzo
Davide Rizzo on Mar 22, 2016 (Updated on Apr 10, 2017)
Direct link to the article Should you have defaults styles for `table`?
tables

Should you have defaults styles for `table`?

Luke Underwood wrote in with an interesting question:

What are the best practices for default <table></table> styling?

I guess there are three possibilities:

  • Have default styles
  • Don’t
  • Somewhere in between
…
Avatar of Chris Coyier
Chris Coyier on Feb 25, 2016
Direct link to the article A Complete Guide to the Table Element
tables

A Complete Guide to the Table Element

The <table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article, we’re going …

Avatar of Chris Coyier
Chris Coyier on Sep 19, 2013 (Updated on Nov 18, 2022)
Direct link to the article Persistant Headers on Tables
headers jQuery sticky tables

Persistant Headers on Tables

When you scroll down a page with a long table on it, typically the header of the table scrolls away and becomes useless. This code clones the table header and applies it at the top of the page once you …

Avatar of Chris Coyier
Chris Coyier on Sep 21, 2009 (Updated on Jun 6, 2019)
  • Newer
  • 1
  • 2

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top