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.
Typical Table Border
Here's a common way to set borders on a table:
This provides that "grid" like effect, where the border surrounds each cell as well as the whole table.
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:
You can see that I've also added padding to the
td selectors but not to the table itself. If we include the padding against the table, we'd end up with extra padding between the outer cells and the outside of the table.
So we'd end up with this:
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.
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:
Here's an example of setting the border to only appear at the bottom of each table cell.
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:
No Border on Table Headers
You can also remove the border from the
You can either remove the border from the styles by using
border: none; against the
th selector (but it has to follow the border declaration), or just not apply the border in the first place.
Here's an example of the later:
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
Note that we need to remove the
border-collapse property for this work.
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.
The Border Properties
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".