Should you have defaults styles for `table`?

Avatar of Chris Coyier
Chris Coyier on

Luke Underwood wrote in with an interesting question:

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

I guess there are three possibilities:

  • Have default styles
  • Don’t
  • Somewhere in between

Luke elaborates:

Our office is split on the idea. In our base templates we currently have no styles being applied to tables by default. You need a class to get it looking pretty (with borders, background colors etc). We use this class primarily on tables used in main content areas.

We front-end devs decided this is best because it means we can easily style custom tables without having to override any default styling. This includes having to override media queries that reduce padding on smaller screens, which would be annoying. We also think it would be important to have a selector on these content tables in case we need to implement JavaScript solutions like responsive table plugins.

The back-end programmers are continually frustrated that they can’t just “dump a table on a page” without it looking good and insist that default table styles are the way to go. Apparently adding a simple class to every table can be difficult, and they think we should have to deal with writing extra css to get around it.

To summarize:

Benefits to having default styles

  • You can just “dump a table” in the HTML and have it look good

Benefits to requiring a class

  • You can have multiple table styles without having to fight against the defaults
  • You may need the selector to find these certain tables

I would add a few other considerations.

What’s the context?

One is to think about the context. Are these tables being stored and displayed as content? Like in articles, documentation, etc. I like staying as class-free inside content as I can. I find classes don’t last as long as content does. Someday, perhaps your .striped-table { } isn’t a thing anymore and a tables revert to some style-less state unintentionally. Default styles would save you from that.

Perhaps your content is stored in Markdown, which I highly recommend for long-lasting content. Markdown doesn’t even give you a great way to apply a class to a table, so that’s a consideration.

Is scoping a possibility?

Another consideration is scoping. Perhaps globally you could avoid default styles, but styles that are obviously inside content output areas do have them.

/* Scoped styles to articles */
article,
.this-is-content-or-whatever {
  table {

  }
  th, td {

  }
}

Kinda like opt-in typography.

Are light default styles a possibility?

In addition to the typical user-agent stylesheet, these go a long way in making a table look presentable:

table {
  border-collapse: collapse;
}
tr {
  border-bottom: 1px solid #ccc;
}
th, td {
  text-align: left;
  padding: 4px;
}

That’s not much to fight against in the case of custom table classes.

What do other sites do?

Luke did some research! Thanks Luke.

Website Default table styles?
Mozilla No
MDN No
CSS Tricks Yes
Wikipedia No
Google No
eEbay No
Smashing Magazine No
Awwwards No
Twitter No
jQuery Yes
Modernizr No
GitHub No
W3C No
CodePen No
InvisionApp No
Apple No
Yahoo No
Amazon No
PayPal No
NetFlix No
DropBox No
StackOverflow No
CNN No
Microsoft No
Gumtree No
LinkedIn No
News.com.au No
Bureau of Meteorology No
ABC No
RealEstate.com.au No
Tumblr No
IMDB No
Seek No
Commonwealth bank No
ANZ Yes
The Verge No
BBC No
SA gov No
MailChimp No
Adobe Yes
Telstra No
Target Yes
JB Hi-fi No

Seems like it’s popular not to use default table styles.

What about resets?

The most popular reset does:

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

That feels a little heavy handed to me.

Normalize doesn’t touch them, which is telling. It means that there isn’t very significant differences (none?) in how default tables are rendered cross-browser, so not much to worry about.

What about the big frameworks?

  • Bootstrap hardly touches default styles for tables, but offers .table, .table-striped, and a handful of others you can opt-in to.
  • Foundation does style default tables right off the bat.

50/50 split.

Thoughts

Personally, I lean toward having default styles for tables, at least in a scoped-to-content-areas way. I don’t use tables for anything but tabular data, and I don’t tend to need a ton of variations on how that tabular data is presented. Even if I did, creating some variations classes wouldn’t be a particularly difficult task.