Table Styling: Spacing and Borders

August 1, 2009 at 9:43 am 4 comments

Table borders divide rows and columns into discrete cells that organize and display tabular data. You can use CSS styles to define the border around the outside of the table and to divide the cells within the table. You can use border-collapse to separate or collapse the borders, and border-spacing with separated borders to specify the horizontal and vertical cell spacing. This blog shows you how.

The basic table below uses an automatic table and column width that expands and shrinks to adjust to the size of the data, and a 1px blue border around the outside of the table and between the cells. It also uses the col property to set the background for the left and middle columns. You can read about the col and colgroup properties in my Basic Table Styles blog.

<style type='text/css'>
 table{width:auto; border: 1px solid #00008b; margin-bottom:15px;}
 th,td{width:auto; border: 1px solid #00008b; }
 *.col1{background:lightyellow;}
 *.col2{background:#cccccc;}
</style>

<table>
<col class="col1" />
<col class="col2" />
<thead>
 <tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>
</thead>
<tbody>
 <tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
 <tr><td>Row 2 data 1</td><td>Row 2 data 2</td><td>Row 2 Data 3</td></tr>
</tbody>
</table>

simpletable

Cell Spacing

Here, the border-collapse property is used at the table level and has two possible two settings: collapse and separate. Borders are separated by default so this is how the table looks with the border-collapse property set to collapse:

 table{width:auto; border: 1px solid #00008b; margin-bottom:15px;
 border-collapse:collapse;}

bordercollapse
With border-collapse set to separate, you can use border-spacing to set the vertical and horizontal spacing between the cell borders. This example separates the cell borders by 10px horizontally and vertically.

 table{width:auto; border: 1px solid #00008b; margin-bottom:15px;
 border-collapse:separate; border-spacing:10px;}

equalborderseparation
This next example separates the cell borders by 10px horizontally and 20px vertically.

 table{width:auto; border: 1px solid #00008b; margin-bottom:15px;
 border-collapse:separate; border-spacing:10px 20px;}

moreverticalseparation

Table Borders

Just like with any block element, you can style the borders or choose not to have visible borders. With tables you can style the outside table border separately from the cell borders. This example styles the left and top borders 2px in medium gray, and the bottom and right borders 1px in light gray.

 table{width:auto; border-top: 2px solid #333333; border-left:2px solid #333333;
 border-bottom: 1px solid #666666; border-right: 1px solid #666666;
 border-collapse:separate; border-spacing:10px 20px;}

outerborders
This example makes all four cell borders 2px and adds 4px padding inside the cell:

 th,td{width:auto; border: 2px solid #00008b; padding:4px; }

cellborders

Styling Collapsed Borders

With collapsed borders, adjoining borders merge and the browser decides which setting to use. So, you could have a situation where you style a general table with separated borders that has a wide table border and a narrow border for the cells:

<style type='text/css'>
 table{border-collapse:separate; border: 5px solid #009900;}
 td{border: 2px solid #009900; padding:4px; }
</style>

<body>
<table id="table1">
 <tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td></tr>
 <tr><td>Row 2 data 1</td><td>Row 2 data 2</td></tr>
</table>

separatedborders
You also might want to use the same general settings for all tables, but have a design for a collapsed-border table with all narrow borders and looks the same in all browsers. This is how the same table looks with border-collapse set to collapse where the top, bottom, left, and right cell borders merge with their adjoining table borders. With merged borders, the browser decides which setting to use. In the case of my Firefox browser, the table border setting is used around the outside of the table, and the cell settings are used for the inner row and column borders. This makes complete sense, but you cannot depend on every browser handling it this way, and in cases where you have different border settings for groups of rows and/or columns, the browser could choose settings that give the table an appearance you did not intend.

<style type='text/css'>
 table{border-collapse:collapse; border: 5px solid #009900;}
 td{border: 2px solid #009900; padding:4px; }
</style>

<body>
<table id="table1">
 <tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td></tr>
 <tr><td>Row 2 data 1</td><td>Row 2 data 2</td></tr>
</table>

collapsedstyles
However, there is a way to control what happens with styled collapsed borders. The secret is in understanding that a collapsed table has six types of borders, styling them explicitly, and tagging the table. A collapsed table has the four outer borders referred to as:

1. Top border
2. Bottom border
3. Left table border
4. Right table border

It also has interior row and column borders, which are referred to as:

5. Interior column border
6. Interior row border

Basic Table with Collapsed Borders

This is the code for the same table, but with tagging to accommodate settings for collapsed borders. The next sections will add the settings one-by-one to transform the collapsed table into having a 1 px red border around the table and the cells.

<style type='text/css'>
 table{border-collapse:collapse; border: 5px solid #009900;} td{border: 2px solid #009900; padding:4px; }
</style>

<body>
<table id="table1">
 <tr class="row1"><td class="cell1">Row 1 Data 1</td><td class="cell2">Row 1 Data 2</td></tr>
 <tr class="row2"><td class="cell1">Row 2 data 1</td><td class="cell2">Row 2 data 2</td></tr>
</table>

Styled Top and Bottom Table Borders

Now I’ll override the top and bottom border settings for the table and cells by assigning styles to border-top and border-bottom for table and td.

<style type='text/css'>
 table{border-collapse:collapse; border: 5px solid #009900;}
 td{border: 2px solid #009900; padding:4px; }
/*Top table border*/
#table1, td{border-top: 1px solid #990000;}
/* Bottom table border*/
 #table1, td{border-bottom: 1px solid #990000;}
</style>

<body>
<table id="table1">
 <tr class="row1"><td class="cell1">Row 1 Data 1</td><td class="cell2">Row 1 Data 2</td></tr>
 <tr class="row2"><td class="cell1">Row 2 data 1</td><td class="cell2">Row 2 data 2</td></tr>
</table>

topbottomscollapsed

Styled Left and Right Table Borders

Next I’ll override the left and right border settings for the table and cells by assigning styles to border-left and border-right for table and td.

<style type='text/css'>
  table{border-collapse:collapse; border: 5px solid #009900;}
  td{border: 2px solid #009900; padding:4px; }

/*Top table border*/
#table1, td{border-top: 1px solid #990000;}

/* Bottom table border*/
#table1, td{border-bottom: 1px solid #990000;}

/* Left table border */
#table1, td{border-left: 1px solid #990000;}

/* Right table border */
#table1, td{border-right:1px solid #990000;}
</style>

<body>

tableleftcollapsed

Styled Interior Column Borders

You could stop there or add additional styling to the interior column borders by, for example, assigning dotted line styles to border-left and border-right for the column cells.

<style type='text/css'>
 table{border-collapse:collapse; border: 5px solid #009900;}
 td{border: 2px solid #009900; padding:4px; }
/*Top table border*/
 #table1, td{border-top: 1px solid #990000;}
/* Bottom table border*/
#table1, td{border-bottom: 1px solid #990000;}
/* Left table border */
#table1, td{border-left: 1px solid #990000;}
/* Right table border */
 #table1, td{border-right:1px solid #990000;}
/*Interior column border*/
 *.cell1{border-right:1px dotted #990000;}
*.cell2{border-left:1px dotted #990000;}
</style>

<body>
<table id="table1">
 <tr class="row1"><td class="cell1">Row 1 Data 1</td><td class="cell2">Row 1 Data 2</td></tr>
 <tr class="row2"><td class="cell1">Row 2 data 1</td><td class="cell2">Row 2 data 2</td></tr>
</table>

interiorcolscollapsed

Styled Interior Row Borders

And lastly, I add a dotted line style for the interior row borders.

 <style type="text/css">
table{border-collapse:collapse; border: 5px solid #009900;}
 td{border: 2px solid #009900; padding:4px; }
/*Top table border*/
 #table1, td{border-top: 1px solid #990000;}
/* Bottom table border*/
#table1, td{border-bottom: 1px solid #990000;}
/* Left table border */
 #table1, td{border-left: 1px solid #990000;}
/* Right table border */
 #table1, td{border-right:1px solid #990000;}
/*Interior column border*/
 *.cell1{border-right:1px dotted #990000;}
 *.cell2{border-left:1px dotted #990000;}
/*Interior row border*/
 *.row1 td{border-bottom:1px dotted #990000;}
 *.row2 td{border-top:   1px dotted #990000;}
</style>

<body>
<table id="table1">
 <tr class="row1"><td class="cell1">Row 1 Data 1</td><td class="cell2">Row 1 Data 2</td></tr>
 <tr class="row2"><td class="cell1">Row 2 data 1</td><td class="cell2">Row 2 data 2</td></tr>
</table>

interiorcollapsed

Source Code

Cell Spacing & Table Borders

<head>
<title>All Things Tables</title>
<style type='text/css'>
 table{width:auto; border-top: 2px solid #333333; border-left:2px solid #333333;
   border-bottom: 1px solid #666666; border-right: 1px solid #666666;
   border-collapse:collapse; border-spacing:10px 20px;}
   th,td{width:auto; border: 2px solid #00008b; padding:4px; }
 *.col1{background:lightyellow;}
 *.col2{background:#cccccc;}
</style>

<body>
<table>
<col class="col1" />
<col class="col2" />
<thead> <tr><th>Heading 1</th>
<th>Heading 2</th><th>Heading 3</th></tr>
</thead>
<tbody>
 <tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
 <tr><td>Row 2 data 1</td><td>Row 2 data 2</td><td>Row 2 Data 3</td></tr>
</tbody>
</table>
</body>
</html>

Styling Collapsed Borders

<head>
<title>All Things Tables</title>
<style type='text/css'>
 table{border-collapse:collapse; border: 5px solid #009900;}
 td{border: 2px solid #009900; padding:4px; }
/*Top table border*/
 #table1, td{border-top: 1px solid #990000;}
/* Bottom table border*/
 #table1, td{border-bottom: 1px solid #990000;}
/* Left table border */
 #table1, td{border-left: 1px solid #990000;}
/* Right table border */
 #table1, td{border-right:1px solid #990000;}
/*Interior column border*/
 *.cell1{border-right:1px dotted #990000;}
 *.cell2{border-left:1px dotted #990000;}
/*Interior row border*/
 *.row1 td{border-bottom:1px dotted #990000;}
 *.row2 td{border-top:   1px dotted #990000;}
</style>

<body>
<table id="table1">
 <tr class="row1"><td class="cell1">Row 1 Data 1</td><td class="cell2">Row 1 Data 2</td></tr>
 <tr class="row2"><td class="cell1">Row 2 data 1</td><td class="cell2">Row 2 data 2</td></tr>
</table>
</body>
</html>

Like this:

Be the first to like this post.

Entry filed under: See All, Tables. Tags: border-spacing, borders, collapsed, separated, styling borders, styling tables, Tables.

Basic Table Styles Table Layouts

4 Comments Add your own

1. Marilyn | August 7, 2009 at 3:12 pm

Thank you! I was trying to use the border-collapse on the td element with no success, but now I realize it needs to be on the table itself. Thanks for your comprehensive post!
Reply
2. teinby | August 10, 2009 at 6:26 am

thank you! I really liked this post!
Reply
3. Bill Bartmann | September 3, 2009 at 12:40 pm

Cool site, love the info.
Reply
4. Alan | January 16, 2011 at 11:35 am

Table styling can be complicated. Your comprehensive post takes most of the pain out of styling tables. Thanks.
Reply

Web Design & Development Tips