CSS Tables

HTML tables can be greatly improved with CSS:

CSS Table Borders

The CSS border property is used to specify the width, style, and color of table borders.

The border property is a shorthand property for:

• border-width - sets the width of the border

• border-style - sets the style of the border (required)

• border-color - sets the color of the border

The example below specifies a 1px solid border for <table>, <th>, and <td> elements:

Example

table, th, td {

  border: 1px solid;

}

CSS Table Border Color

The example below specifies a 1px solid green border for <table>, <th>, and <td> elements:

Example

table, th, td {

  border: 1px solid green;

}

Why Double Borders?

Notice that the tables in the examples above have double borders. This is because both the <table>, <th>, and <td> elements have separate borders.

To remove double borders, take a look at the example below.

CSS Collapse Table Borders

The CSS border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

This property can have one of the following values:

• separate - Default value. Borders are separated; each cell will display its own borders

• collapse - Borders are collapsed into a single border when possible

The following table has collapsed borders:

Example

table
{

  border-collapse: collapse;

}

CSS Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:

Example

th, td
{

padding: 10px;
}

CSS Border Spacing

The CSS border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is set to "separate".

The following table has a border-spacing of 15px:

Example

table
{

  border-collapse: separate;
  border-spacing: 15px;
}

CSS Outside Table Borders

If you just want a border around the table (not inside), you specify the border property only for the <table> element:

Example

table
{
  border: 1px solid;

}