CSS Tables
HTML tables can be greatly improved with CSS:
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
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:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
CSS Table Border Color
The example below specifies a 1px solid green border for <table>, <th>, and <td> elements:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
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 borderscollapse- Borders are collapsed into a single border when possible
The following table has collapsed borders:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
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:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
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:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Example
Using the border-spacing property:
table
{
border-collapse: separate;
border-spacing: 15px;
}
Try it Yourself »
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:
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
