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
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.
Collapse the Border
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.
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. In this example, we use a dotted border instead.
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
Note that we need to remove the
border-collapse property for this work.
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:
Enjoy this page?
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!