Posted by

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:


Table headerTable header
Table cell 1Table cell 2



HTML Code:

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:


Table headerTable header
Table cell 1Table cell 2


HTML Code:

Collapse the Border

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


Table headerTable header
Table cell 1Table cell 2


HTML Code:

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:




Table headerTable header
Table cell 1Table cell 2



HTML Code:

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.



Table headerTable header
Table cell 1Table cell 2


HTML Code:

Curved Edges

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, so but they do support their own proprietry properties, so if you want wider browser support (instead of W3C compliant code), you can add two other properties -webkit-border-radius and -moz-border-radius.

Note that we need to remove the border-collapse property for this work.
Example:



Table headerTable header
Table cell 1Table cell 2


HTML Code:

Email Post

Comments

Post a Comment

leave your comment to help us to develope the website.

Popular Posts