Setting HTML table border color and other styles with examples

The table border

Generally, the tables are shown with the borders to distinguish information within rows and columns. However, by default no border is shown for HTML tables. i.e. if you do not specify or use border attribute it will be taken as “0”.

Note that, the border property in HTML table tag is not supported in HTML 5. Rather, you should use the border property in CSS. The examples below will show you both ways, specifying HTML table border in HTML table tag as well as in the CSS.

The syntax of border attribute is:

<table border=”1”>

If you use bigger value for the border property the border line will be thicker.

An example of HTML border

In the following example, we are using “0” value for the border. See the output by clicking the link below:

You can see, no border line is visible in the table.

HTML border example with a bigger value

In the following example, we are going to use bigger value than “0” for the border property in HTML table. Click the link below to see its output:

An example of table border with CSS

Using CSS, you can set the table border as well. Not only the table border but also table header and table data borders can be set separately. See the following example:

As you can see, the table border, table heading <th> border and <td>’s border are set separately along with padding and other properties in the CSS block.

Using the class name of CSS for the Table border

You may refer table properties by CSS class name or by id as well. In the above example, we used direct table name, td, and tr, however, what if you have more than one tables in your web page and need different styles for each? The example below shows how to create CSS class and use it in the HTML table tag.

The table border color

You can also define the color of HTML border by using the CSS property. The default color is black. However, to blend it to the other parts of the web page you may need to set some other color of the border of a table.

The border color of HTML table can be set by using CSS. See example below to give color to an HTML table.

Experience this online

You an see in this line: border:1px solid red that specifies border properties as 1 pixel thick, solid line and color of the border as red. To learn more about the border color property of CSS, go to its chapter.

Also see HTML href | HTML Tutorial

Was this article helpful?

Related Articles

Leave A Comment?