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 Code

Result

<table border="1">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table 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 Code

Result

<table style="border:1px solid black;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table 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 Code

Result

<table style="border:1px dotted black;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Source Code

Result

<table style="border:1px dashed black;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Source Code

Result

<table style="border:3px dashed blue;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Source Code

Result

<table style="border:5px double black;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table 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 Code

Result

<table style="border:1px solid black;">
<tr>
<th style="border:1px solid red;">Table Header</th><th style="border:1px solid red;">Table Header</th>
</tr>
<tr>
<td style="border:1px solid red;">Table cell 1</td><td style="border:1px solid red;">Table cell 2</td>
</tr>
<tr>
<td style="border:1px solid red;">Table cell 3</td><td style="border:1px solid red;">Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table 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 Code

Result

<table style="border:1px solid black;border-collapse:collapse;">
<tr>
<th style="border:1px solid red;">Table Header</th><th style="border:1px solid red;">Table Header</th>
</tr>
<tr>
<td style="border:1px solid red;">Table cell 1</td><td style="border:1px solid red;">Table cell 2</td>
</tr>
<tr>
<td style="border:1px solid red;">Table cell 3</td><td style="border:1px solid red;">Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table 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 Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:50%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4

Another Example

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

Source Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }
.myOtherTable th { background-color:#BDB76B;color:white;width:50%; }
.myOtherTable td, .myOtherTable th { padding:5px;border:0; }
.myOtherTable td { border-bottom:1px dotted #BDB76B; }
</style>
<!-- End Styles -->
<table class="myOtherTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

Table Header	Table Header
Table cell 1	Table cell 2
Table cell 3	Table cell 4