Flash cards
Review the key moves
What is the main idea behind CSS Tables?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___, th, td {Put the learning moves in the order that makes the concept easiest to apply.
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 |
Example
table, th, td {
border: 1px solid;
}Live preview
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 |
Example
table, th, td {
border: 1px solid green;
}Live preview
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
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
Example
table {
border-collapse: collapse;
}Live preview
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 |
|---|
Example
th, td {
padding: 10px;
}Live preview
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
table {
border-collapse: separate;
border-spacing: 15px;
}Live preview
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 |
Example
table {
border: 1px solid;
}Live preview