CSS for Markdown, styling tables

This is the seventh part of some posts on using CSS in and with DT/DTTG. Though I wrote it as a single piece, I broke it up in smaller installments to keep the posts (barely) managable. Please let me know (preferably by a PM) if you find errors of any kind or are missing details. I’ll correct the first ones and try to help with the second ones.

Previous post | Next post

Styling tables

Styling tables is more demanding then styling other elements. You first have to understand table structure: a table element consists of a head and a body (thead and tbody). Both of them in turn are made up of row (tr) elements. And every row consists of th (for a table head) or td elements which are finally defining the table cells themselves. So the whole thing looks like that:

<table>
  <thead>
  <tr><th>...</th><th>...</th>...</tr>
  </thead>
  <tbody>
  <tr><td>...</td><td>...</td>...</tr>
  <tr><td>...</td><td>...</td>...</tr>
  ...
  </tbody>
</table>

You’ve just seen how to apply a very basic styling (i.e. centering) to the whole table. One detail many people want are lines dividing the columns and rows. That, however, is not something you can set for the whole table. Instead, you have to specify a border for the td and th cells (i.e. those in the body and the head of the table):

table :is(td, th) {
  border: 1px solid black;
  padding: 0.3em;
}

Here, table :is(td.th) is an abbreviation for table td, table th. The border is defined as being one pixel wide, using a solid black line. This is one of the few exceptions where a pixel dimension is ok – you just want a fine line around the cells, it doesn’t really matter how big a pixel is. The padding makes sure that the text in the cells has some space to breath.

However, these settings will result in a peculiar phenomenon in that there’s small white space now between the borders of the individual cells. They look a bit like windows in a building. To get rid of it, add border-collapse: collapse to the style of the table element.

Another often required feature are alternating row colors. They’re fairly easy to achieve like this:

tr:nth-child(even) {
  background-color: lightblue;
}

This will display every second row with a light blue background, starting with the second row. If you want to start it with the first row, use even instead of odd in the above selector. If you want different colors for every second row, combine these rules like so:

tr:nth-children(even) {
  background-color: lightblue;
}
tr:nth-children(odd) {
  background-color: lightgreen;
}

:nth-children is a “pseudo-selector”, and there are a lot of them, so it’s worth checking them out on MDN. Instead of even or odd you can specify more complicated rules like 4n+1 to select the rows 1, 5, 9, 13 etc. In fact, even is the same as 2n and odd is 2n+1.

4 Likes

Terrific series of posts! Thanks.

What would be good (IMHO) would on the last post (in case you plan more) is to put all of them into one MD and/or PDF that we can easily store in our favorite document manager app. What might that be?

I’m guessing you can easily combine.

2 Likes

I could put the md up on GitHub. It’s one piece here anyway. The images though… those I added directly to the posts. And you know about the problem with images in md. I’ll try to figure something out.

2 Likes

That’s behind my suggestion for PDF. When I save web pages in MD I normally don’t care that the images are not embedded and possibly lost. If I really want images in a MD file I use DEVONthink to “convert to PDF” then delete the MD. Simple.

Right. I was more thinking like “For me, it’s easiest to put it all on GitHub”. Also, MD (or rather HTML) reflows, so it’s easier to use on a small screen. Let me think some more about it – it’s not for today anyway.