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 border is specified using Cascading Style Sheets (CSS).
Typical Table Border
To set the border of an HTML table, use the CSS border property.
Example:
| Code | Result | ||||
|---|---|---|---|---|---|
|
|
Table Cell Borders
You'll notice that the above example created a border around the table. This is great if all you want is a border around the outside of the table, but what if you want a border around each cell too?
To specify a border for your table cells, you'll also need to apply the border property to each cell.
Example:
| Code | Result | ||||
|---|---|---|---|---|---|
|
|
|
Collapse the Border
You can remove the space in between the cells by applying the CSS border-collapse property to the table element.
Example:
| Code | Result | ||||
|---|---|---|---|---|---|
|
|
|
My Best Tip? Use Classes
The above examples use inline style sheets to set the CSS properties. This is because it's easier for demonstration purposes. It's much more efficient to use a CSS class defined in an external style sheet, or at least an embedded style sheet, to set your styles.
By giving your table a class, you can use this to set all that table's styles (without affecting other tables on your website). Plus you can apply CSS properties against all of the table's decendent elements (eg the tr tag, the td tag, the th tag etc).
Below is an example that takes all the styles from the previous example, and places them into an embedded style sheet. I'd actually recommend using external style sheets if possible, however, for the purposes of this example, it was easier to use embedded style sheets.
I've also added padding to this example, so as to create some space between the text and the table border.
Example:
| Code | Result | ||||
|---|---|---|---|---|---|
|
|
|
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.
Here's an example of setting the border to only appear at the bottom of each table cell. In this example, we use a dotted border instead.
| Code | Result | ||||
|---|---|---|---|---|---|
|
|
|
Curved Corners
Here's an example of adding a border with curved edges around the table. In the CSS3 specification, curved edges are specified using the border-radius property. Note that some browsers don't support the border-radius feature at the time of writing, but they do support their own proprietry properties, so if you want wider browser support (instead of W3C compliant code), you can add the other properties -webkit-border-radius, -moz-border-radius, -ms-border-radius, and -o-border-radius.
Note that we need to remove the border-collapse property for this work.
Example:
| Code | Result | ||||
|---|---|---|---|---|---|
|
|
|
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.
Here's a list of the border related properties:
- border
- border-collapse
- border-color
- border-spacing
- border-style
- border-top
- border-right
- border-bottom
- border-left
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- border-width
