Making Better HTML Table Borders

Big ugly table borders only work for people with fetishes about big ugly table borders. Of the fetishes I have, that is one I am glad to report I lack. I enjoy looking at thinly lined tables that are as neatly displayed as those one might draw on paper. You might not believe that while looking at some of the tables used in JournalXtra in the past, but I hope to show you the light I have seen.

It took me a while to realize a simple way to change the appearance of HTML tables to make the borders pencil thin.

I knew I could set styling properties in the CSS to change the border width, to turn borders off, to turn only some borders off, to make borders ridged, grooved, dotted or dashed but I couldn’t figure out how to get rid of the ugly double-bordering created by the gap between different borders.

Then I had a brainwave: why not just get rid of the borders?

That might seem contradictory. After all, I want the borders to look nice, I don’t want to make tables hard to read by not having any borders altogether, so why would I get rid of them?

Let’s take a look at my reasoning

A basic HTML table consists of 3 HTML tags as shown in this table.

The Three Basic Table Tags

Tag

Purpose

<table>

Marks out a table’s placement

<tr>

Marks a row of table data

<td>

Marks a cell of table data

Written in an HTML page with their corresponding closing tags, they would look like this:

<table>
<tr><td>some data</td></tr>
</table>

The <table> and <td> tags have their own margin, border and padding properties. Each may also be given its own text color, background color and background image.

Even with border properties set to “none”, those borders still have a little spacing between them. When a border width greater than zero is specified, that spacing creates those ugly double borders.

Double-border fetishists beware: those double borders are about to vanish!

We can use two little known border properties to vanquish border spacing:

border-collapse: collapse;

border-spacing: LENGTH;

Border collapse can take one of two values: separate or collapse. The default value is “collapse”.

Border-spacing is specified in pixels and is naturally set higher than zero.

Both border-collapse and border-spacing are used with the CSS table selector, as shown in the examples given below here.

Take a look at the four example table images shown below:

Comparison of Table Border Creation Methods

2px table and td border

2px table and td collapsed border

2px table and td (non collapsed) border with zero spacing

No borders defined but 2px border spacing

Table One

Table Two

Table Three

Table Four

table one has a 2 pixel border set for both the <table> and <td> tags

table two has a 2 pixel border set for both the <table> and <td> tags but border-collapse set to “collapse”

table three has a 2 pixel border set for both the <table> and <td> tags but border-spacing set to zero

table four has no borders set but has border-spacing set to 2 pixels and contrasting background colors stated for both the <table> and <td> tags

tables two and four have well defined, thinly drawn borders without spacing gaps between them

table three has a well defined border surrounding its cells that is apparently twice as thick as the border described in tables two and four.

Consider table one and its method of creation binned.

Tables two and four look the same. They each have a 2 pixel border running around their cells and surrounds; and they each have the same width and height. The only difference is that table two has its border properties explicitly stated in its CSS whereas table four has no borders specified. Take a look at their CSS if you don’t believe me.

Table two uses the collapsed-borders property. Unfortunately, the collapsed-borders property has one slight complication. In fact, it’s a huge complication that makes double-bordering appear pretty pleasant in comparison: collapsed borders crumble to a mess when a table and its internal cells both have styled borders.

To prove that, look at the next two tables, tables five and six. Both tables have a 20 pixel grooved table border and a 5px grooved data cell border defined but table five has collapsed borders and table six has zero border spacing.

Getting Real Ugly

Collapsed Grooved Borders

Non Collapsed Grooved Borders with Zero Spacing

Table Five

Table Six

It is hard to believe that table five is supposed to look like table six. It is another example of why I dislike and discourage the use of the CSS “border-collapse: collapse;” property value.

Table six is similar to example table three. The exception is that its borders are thicker and grooved. It illustrates the benefit of specifying a value for border-spacing for your table’s CSS.

There is a downside to defining both <table> and <td> tag borders even when border-spacing is configured to zero pixels: the table can appear a little unbalanced when the <td> tag’s borders have a different width to the <table> tag’s borders. Try it for yourself to see what I mean.

Is it possible to style a border without specifically defining a table border?

Definitely!

There is another little used CSS property that creates a bit of a ghost image:

outline: COLOR STYLE WIDTH

The outline property draws a styled or unstyled shadow around the object it is defined to affect.

Outline has a few behavioral properties that are worth noting:

outlines do not increase the pixel size of an object

outlines take up no extra screen space

outlines overlap other items

most recently drawn outlines overlap outlines drawn prior to them

the outline rendered last will cover any outline rendered earlier than it

A couple of those notes are reiterations of each other but I thought they needed drilling in to clear up any ambiguity. Just to make sure you get it… if two objects are drawn next to each other, one stacked on top of the other, the lower edge of the top object will be covered by the upper edge outline of the bottom object. The top object will not be displaced by the outline of the bottom object. Think of an outline as being an object’s shadow – it may be cast over other objects without disturbing them.

We can draw a styled “border” for a table’s cells without specifying a border width by setting the table’s <td> tag’s outline to a width equal to the table’s border-spacing’s width; if we want a defined outline for the <table> tag that does not overlap items placed next to it then we can specify a margin for the <table> tag that is equal to the outline defined for it. The results, as can be expected, are slightly different to those for tables with styled, non-spaced borders.

The 10 pixel margin used in table eight is equal to its <table> tag’s outline width and serves to prevent the outline from overlapping other page elements. Used in a real page layout, that margin would be set only on the sides that touch other page elements.

Styling WordPress Tables
The tables used in WordPress posts may be easily styled with the help of the header-footer plugin. Visit the plugin’s settings and add this code into the second text area which has the annotation “HTML code to be inserted in the head section of each page”:

you can even center them by adding “margin-left: auto;” and “margin-right: auto;” to #content .entry table {}.

This will work for most WordPress themes.

Sometimes, it is preferential to have double-borders, especially when table borders are styled. My personal preference is to use a neatly drawn single width line around the table and between its cells without any spacing between the borders.

As shown above, there are three nice ways to create tables with borders that do not have an ugly gully space between them:

Method One

define a background color for the <table> tag

define a contrasting background color for the <td> tag

control the border width with the CSS table selector’s border-spacing property

Method Two

define a <table> tag border

define a <td> tag border

set both borders to an equal width

set the border-spacing to zero

Method Three

define the table as per method one

use the outline property to define <table> and <td> border styles

set a margin for the <table> tag for the sides that touch other page elements

set the border-spacing width equal to the <td> tag’s outline’s width

Method two can result in double-borders when the borders are styled. Method three is a styled version of any table created via method one.

As with most things aesthetic, beauty is in the eye of the beholder. However you style your tables, my opinion is that it is often neater to specify separate background colors for <table> and <td> tags instead of using border-collapse to remove double bordering within tables.

How do you like to style your tables? Leave a comment and let us know.

While fiddling around with
the CSS3 box-shadow property, I stumbled across a method to put a
double border on a single element. I thought to myself, that’s pretty cool, but
obviously, it will only work in newer browsers that support box-shadow.