Simple Styling

|

Tables are a common target for custom styling, but due to their HTML structure they can be a little tricky. Let’s look at just some quick and easy changes that you can do in this article.

First, here is the HTML structure of a simple 2 column table:

HTML tables can be roughly summarized as:

- table
  - thead
    - tr
      - th
  - tbody
    - tr
      - td

There are more table elements that can be included, but not really as part of standard Markdown and in Homebrewery these are going to be the elements you are targeting. Note that the smallest unit, the cell, is either a th or td element depending on whether it is found in the headers or in the body of the table.

So let’s start applying custom styles.

Row Colors

The PHB default style applies a light green, semi-transparent color to alternating rows. We need to override that default and pick a color:

You could also just remove the alternating row colors with background: unset.

Text Colors and Font

Similar deal if you want to color text rather than backgrounds. In this example I’ll recolor the headers and change the font of the whole table:

Column Widths

A simple way to set the column widths is with a custom Markdown syntax in the second line of a table. Here I will change the width of the first column to more narrowly fit the numbers by adding a percentage. I will also center that column and explicitly left-align the second column using the standard Markdown syntax |:---| (left), |:---:| (center), and |---:| (right):

At time of writing, only percentage values are accepted using this particular syntax but I do hope we added support for px values as well. It’s possible to also explicitly set column and row widths and heights via CSS and specific selectors but I’m not going to cover that here.

Closing

Lots more styling can be done, with borders, graphic borders, gradients, padding and margins, etc but I think this covers most of the questions I’ve seen. The key to custom styling is using CSS Selectors that have a higher specificity than the themes you are using; use the web browser Inspector tool to help with that if you are in a bind, or ask on reddit or discord.

Resources