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).

Typical Table Border

To set the border of an HTML table, use the CSS border property.

Preview Editor

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.

Preview Editor

Collapse the Border

You can remove the space in between the cells by applying the CSS border-collapse property to the table element.

Preview Editor

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.

Preview Editor

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.

Preview Editor

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.

Preview Editor

Note that some browsers don't support the border-radius feature at the time of writing, but they do support their own proprietry properties for rounded corners. 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.

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:

Related