Webmasters Gallery

Luke Underwood wrote in with an interesting question:

What are the best practices for default

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.

---

Should you have defaults styles for `table`? is a post from CSS-Tricks