Table Border

This page demonstrates how to set the table border within your web pages and other HTML documents.

In HTML, there are two ways of adding a border to your tables. The first is to use the HTML border attribute. The other is to use CSS.

Below are some examples of applying a table border in HTML.

HTML Table Border

You can get a quick border around your table by using the HTML border attribute. You determine the width of the border using a number. For example, for a thin border, use the number "1". For a thicker border, use a greater number.

Like this:

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

As you can see, this is a quick and easy way to get a table border, but you don't actually have any control over the way the border looks. The way it looks will depend on the user's browser and you won't be able to change it. Unless...

If you want to change the way your table border looks, you can use CSS. CSS allows you to change the color, width, and style of your table borders.

Using CSS, you use the border property to define the table border. You can apply this property against the whole table or each cell (or a single cell, if that's what you prefer).

Examples below.

CSS Table Border

When you apply CSS border code to the table element (i.e. the <table> tag), the border only appears around the actual table - not the individual cells.

Like this:

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

You can also change the border style to thick, dotted, dashed, or anything that CSS understands. You can change its color too. Here's some examples:

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4
Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4
Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4
Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Borders on Table Cells

To the table cells within the table, you need to apply the border code against the individual table cells.

In the following example, I've applied a border against the table cells and the table header cells. I've also applied a different colored border around the table (as I did in the previous example). The different color will help distinguish between the table border and the cell borders:

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Border Collapse

You can remove the space between the different borders by using the CSS border-collapse property. You can apply this property against the HTML table element.

When you apply this against the table element, you'll notice that the table border simply disappears, or "collapses". You'll also notice that the space between the cells collapse too.

Example:

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Using CSS Classes

If you're familiar with HTML and CSS, you'll probably know about the benefits of CSS classes. CSS classes allow you to set all your styles in one place, rather than adding them to each HTML element as you code. This saves time in coding and time in maintaining your website. It also reduces the possibility of error, helps with download time, and helps keep your code nice and clean.

Here's an example of using an embedded style sheet to define the border of your HTML tables. Note that the styles are set in between the opening and closing <syle> tags.

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

Another Example

Here are more examples of using CSS borders around your HTML tables.

Source CodeResult
Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

My Related Sites

Here are some of my other sites: