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 borderborder-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
, , and elements:
Firstname
Lastname
Peter
Griffin
Lois
Griffin
Example
table, th, td {
border: 1px solid;
}
CSS Table Border Color
The example below specifies a 1px solid green border for
, , and elements:
Firstname
Lastname
Peter
Griffin
Lois
Griffin
Example
table, th, td {
border: 1px solid green;
}
Note: Why Double Borders? Notice that the tables in the examples above have double borders. This is because both the
, , and 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
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
and elements:
First Name
Last Name
Savings
Peter
Griffin
$100
Lois
Griffin
$150
Joe
Swanson
$300
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:
Firstname
Lastname
Peter
Griffin
Lois
Griffin
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
element:
Firstname
Lastname
Peter
Griffin
Lois
Griffin
Example
table
{
border: 1px solid;
}
CSS Tables – FAQs Quick answers about learning CSS Tables in CSS.
What does this CSS Tables note cover? + This free note from CodingNow 2.0 explains CSS Tables in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.
Is this CSS Tables tutorial free? + Yes. Every CSS topic on CodingNow 2.0, including CSS Tables, is 100% free with no signup required.
How long does it take to learn CSS Tables? + With focused practice, most students grasp CSS Tables in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.
Where can I practise CSS Tables after reading? + Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.
Talk to Advisor
