CSS Tables
HTML tables can be greatly improved with CSS.
Example
A table styled with collapsed borders, padding, striped rows, and a colored header.
<style> block, collapse the table borders, make it full width, give th/td light borders and padding with left-aligned text, shade even rows light gray, and give the header row a green background with white text. Add a table with Company, Contact, Country columns and a few rows.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<table>
<tr><th>Company</th><th>Contact</th><th>Country</th></tr>
<tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr>
<tr><td>Berglunds snabbkop</td><td>Christina Berglund</td><td>Sweden</td></tr>
<tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr>
<tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr>
</table>
</body>
</html>
CSS Table Borders
The border property sets the width, style, and color of table borders.
It is a shorthand for border-width, border-style (required), and border-color.
Example
A 1px solid border is set on the <table>, <th>, and <td> elements.
<style> block, give the <table>, <th>, and <td> elements a 1px solid border. Add a small table with a header row and two data rows.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
CSS Table Border Color
You can set the color of the table borders too.
Example
A 1px solid green border is set on the table, th, and td elements.
<style> block, give the <table>, <th>, and <td> elements a 1px solid green border. Add a small table with a header row and two data rows.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid green;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
Why Double Borders?
In the examples above, the tables have double borders. This happens because the <table>, <th>, and <td> elements each have their own separate borders. The next example shows how to remove them.
CSS Collapse Table Borders
The border-collapse property sets whether table borders collapse into a single border or stay separate as in standard HTML.
It can take these values:
separate— the default. Each cell shows its own borders.collapse— the borders merge into a single border where possible.
Example
Setting border-collapse: collapse removes the double borders.
<style> block, give the table, th, and td a 1px solid border, and set the table's border-collapse to collapse so the double borders merge into one. Add a small table.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
CSS Table Padding
To control the space between the border and the content of cells, use the padding property on <td> and <th> elements.
Example
Each cell gets 10px of padding.
<style> block, give the table/th/td a 1px solid border with collapsed borders, and give th and td 10px of padding. Add a table with First Name, Last Name, and Savings columns and a few rows.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
CSS Border Spacing
The border-spacing property sets the distance between the borders of neighboring cells.
Note: This only works when border-collapse is set to separate.
Example
The cells are spaced 15px apart.
<style> block, give the table/th/td a 1px solid border, and on the table set border-collapse to separate and border-spacing to 15px. Add a small table.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
}
table {
border-collapse: separate;
border-spacing: 15px;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
CSS Outside Table Borders
If you only want a border around the table and not inside it, set the border property on just the <table> element.
Example
Only the table has a border; the cells do not.
<style> block, give just the <table> element a 1px solid border (no border on th or td). Add a small table.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border: 1px solid;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th></tr>
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>