Border
Novem tables offer extensive control over border formatting.
Novem is currently in closed alpha. This documentation is incomplete and subject to change.
Novem tables offer extensive control over border formatting. Similar to other table formatting instructions the border format consist of row and table slicers followed by position, size and color.
The slicing operations and colors are the same as for other novem table options, however the position and size instructions are unique to the border.
Size are simply a value between 1 and 5 denoting the thickness of the border, position is slightly more complex and encodes the position of the border relative to the cell. The available position options are as follows:
l -- add left border to cell
r -- add right border to cell
t -- add top border to cell
b -- add bottom border to cell
x -- add left and right border to cell
y -- add top and bottom border to cell
a -- add all borders to cell
We've included a few examples on how to use the border options below, feel free to follow the links and use the dropdown for more details on how the examples were created.
E-Mail table warning: Sometimes you might notice that certain cell borders are being prioritized over the ones you prefer (like a background grid taking precedence over a line). Unfortunately this is the result of how html tables work.
The easiest way to avoid this is by being more explicit in your instructions to avoid drawing multiple borders next to each other. It's also helpful to know that larger borders are prioritized over smaller, so if feasible, you can always increase the size.
For more information read about border conflict resolution over at the w3c.
The below table shows one of the simplest border you can have, a plain grid with a soft shade of gray.
The a operator adds borders to all sides of the cell and
the two slicers select the entire table.
: : a 1 gray-400 -- add a gray grid of size 1 to all sides
This example shows how to add a border to the top and bottom row of a table, this can look particularly nice when combined with bold text or custom color styles.
Here we use the slicers to explicitly get the first (0) and
last row (-1).
To save some space we use the y instruction to add both top and bottom border
to the last row. We continue to add the gray background grid as well.
Instructions are processed top to bottom, meaning later instructions override previous ones. You can see this above with the larger top and bottom borders overriding the previous background borders.
: : a 1 gray-400 -- add a gray grid of size 1 to all sides
0 : b 2 inverse -- select the first row and all columns
-- add a size 2 border to the bottom
-- using the inverse color (dark on light,
-- light on dark)
-1 : y 2 inverse -- replicate the above instruction, but
-- add the border to the last row and
-- use the _y_ instruction to get both
-- top and bottom
Novem tables support up to five different border sizes denoted 1 through 5. 1 is the default and most common while 5 is the largest. It's important to know that larger border takes priority over smaller ones where they intersect.
Even though we could have selected the rows and columns using our comma
operator 3,5,7,9,11 we have to use a line per instruction in this case.
This is because the size operator works on all the listed indices and
we want different size.
: : a 1 gray-300 -- continue our grid from above
-- but soften the color a bit
3 : b 1 inverse -- add a border to the bottom of all
5 : b 2 inverse -- columns for the given row and size
7 : b 3 inverse
9 : b 4 inverse
11 : b 5 inverse
: 3 r 1 inverse -- add a border to the left of all
: 5 r 2 inverse -- rows for the given row and size
: 7 r 3 inverse
: 9 r 4 inverse
: 11 r 5 inverse
Novem has rich color support across all our visuals. In addition to the named colors and default themes, we also support custom color themes as well as explicit color codes. This is true for our borders just like anything else.
Below we've explicitly colored the the bottom borders using the 9 color custom scale. The reason we've only used 14 rows is to keep the example consistent with the other tables above. We've left a column in the middle empty for esthetic reasons.
0 :6 b 2 blue-100
1 :6 b 2 blue-300
2 :6 b 2 blue-400
3 :6 b 2 blue-500
4 :6 b 2 blue-600
5 :6 b 2 blue-700
6 :6 b 2 blue-800
7 :6 b 2 blue-900
8 :6 b 2 blue-800
9 :6 b 2 blue-700
10 :6 b 2 blue-600
11 :6 b 2 blue-500
12 :6 b 2 blue-400
13 :6 b 2 blue-300
0 8: b 2 green-100
1 8: b 2 green-300
2 8: b 2 green-400
3 8: b 2 green-500
4 8: b 2 green-600
5 8: b 2 green-700
6 8: b 2 green-800
7 8: b 2 green-900
8 8: b 2 green-800
9 8: b 2 green-700
10 8: b 2 green-600
11 8: b 2 green-500
12 8: b 2 green-400
13 8: b 2 green-300
Position refers to which side of the cell the border will be placed on. Picking the right side can be important to make sure you get the look you want. We've put together the below visualisation to show you how the different instructions lays out the borders.
As mentioned above novem borders support seven different position
instructions: lrtb xy a. The first four should be intuitive as the
letters represent left, right, top and bottom. x and y
represent the x (row) and y (column) axis and will place the
border on all sides in their respective direction. The last instruction
is a for all which will add border on all sides.
: : a 1 gray-300 -- continue our grid from above
-- create the first column - left both and right
0:3 0:3 l 2 inverse -- add border to the left side
5:8 0:3 x 2 inverse -- add border on all vertical (x/column) sides
10:13 0:3 r 2 inverse -- add border on the right side
-- create the second column - top both and bottom
0:3 5:9 t 2 inverse -- add border to the top side
5:8 5:9 y 2 inverse -- add border on all horizontal (y/row) sides
10:13 5:9 b 2 inverse -- add border on the bottom side
-- create the third column - all, outer and inner
0:3 11:14 a 2 inverse -- create a box with all sides drawn
-- our "outside" box
5 11:14 t 2 inverse -- top border
8 11:14 b 2 inverse -- bottom border
5:8 11 l 2 inverse -- left border
5:8 14 r 2 inverse -- right border
-- our "inside" box
10:13 11:13 r 2 inverse -- draw right border, one less than all
10:12 11:14 b 2 inverse -- draw bottom border, one less than all
In addition to start and end positions, the novem slice operator also
supports steps. This makes it easy to alternate colors
or group columns and rows into logical entities.
The table above shows alternating colors for every two rows and every three columns. This is done by a combination of using the step function of the slicer and offsetting the starting point for the different colors.
: : a 1 gray-300 -- continue our grid from above
1:-1:4 : b 2 gray-500 -- color every 4th row
3:-1:4 : b 2 gray-700 -- repeat but start offset by 2
: 3:-1:6 l 2 gray-500 -- color every 6th column
: 6:-1:6 l 2 gray-700 -- repeat, but start offset by 3
Finally we have some examples combining all of the above operations in various ways. To save space we haven't included the example code here, but feel free to click the links and read more on the individual chart pages.