HTML Table Border
This page contains HTML table border code -
HTML codes for specifying or changing the border
of your tables within your blog or web page.
HTML table borders are specified using Cascading
Style Sheets (CSS). To set the border of an HTML
table, use the CSS border property.
Typical Table Border
Here's a common way to set borders on a table:
table {
border-collapse: collapse;
}
td, th {
border: 1px solid orange;
}
This provides that "grid" like effect, where the
border surrounds each cell as well as the whole
table.
1
Like this:
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid orange;
padding: 10px;
text-align: left;
}
</style>
<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
2
Notice that I used border-collapse:collapse; against
the <table> element. This collapses the border so
that you don't see any space between the cells and
the outside of the table.
Without Collapsing the Border
Here it is without collapsing the border. I've also
applied the border against the <table> element in
order to demonstrate the effect:
<style>
table, th, td {
border: 1px solid orange;
}
th, td {
padding: 10px;
3
}
</style>
<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
You can see that I've also added padding to
the th and td selectors but not to the table itself. If
we include the padding against the table, we'd end
4
up with extra padding between the outer cells and
the outside of the table.
So we'd end up with this:
<style>
table, th, td {
border: 1px solid orange;
padding: 10px;
}
</style>
<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
5
There's nothing wrong with that if that's what you
want. However, if you don't want padding between
the table and its cells, you'll need to apply the
padding to just the cells.
Bottom Border
The above examples use the CSS border property
to set the borders. This is a shorthand property to
set border width, style, and color on all sides of the
table.
If you don't want the border to go all around the
table (or if you want a different border on each side
of the table), you can use any of the following
properties: border-top, border-right, border-bottom,
and border-left.
6
Here's an example of setting the border to only
appear at the bottom of each table cell.
<style>
table.bottomBorder {
border-collapse: collapse;
}
table.bottomBorder td,
table.bottomBorder th {
border-bottom: 1px solid yellowgreen;
padding: 10px;
text-align: left;
}
</style>
<table class="bottomBorder">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
7
</table>
Border and Alternating Background Colors
A common usage of tables is for each row to have
alternating background colors.
You can apply borders against these tables just like
any other table:
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
tr:nth-child(even) {
background-color: #eee;
8
}
tr:nth-child(odd) {
background-color: #fff;
}
</style>
<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
9
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
Rounded Corners
Here's an example of adding a border with
curved/rounded corners to the table. In the CSS3
specification, rounded corners are specified using
the border-radius property.
Note that we need to remove the border-
collapse property for this work.
10
I also set the border-spacing property to zero, so that
the cell borders continue smoothly without being
interrupted by a space. Remove this property and
click Run to see what I mean.
<!DOCTYPE html>
<title>Example</title>
<style>
table.roundedCorners {
border: 1px solid DarkOrange;
border-radius: 13px;
border-spacing: 0;
}
table.roundedCorners td,
table.roundedCorners th {
border-bottom: 1px solid DarkOrange;
padding: 10px;
}
table.roundedCorners tr:last-child > td {
border-bottom: none;
}
</style>
<table class="roundedCorners">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
11
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
The Border Properties
12
CSS provides quite a number of border related
properties to assist you in creating borders. These
properties can be applied to any HTML element, not
just tables.
For a full list of border properties, go to CSS
Properties and filter by "border".
13
