HTML Table Borders
HTML Borders Tutorial and Information

• HTML Basics

HTML Tutorial -
HTML Table Borders

The border attribute is considered a presentation related attribute in HTML. The border attribute is still allowed with transitional standards (XHTML) and can be used with transitional DTD's (Document Type Declaration). However, new web sites should use CSS (Cascading Style Sheet), which conforms with the strict DTD.

For more information about table borders and borders with CSS please visit our CSS and XHTML tutorials.

How To Set The Border Of A Table

In order to specify a table border, the attribute border must be added to the table element. The value for the table border is set to "20" in order to make the border a little thicker and easier to view:

<table border="20">
  <tr>
    <td>This is row 1/columnv1 with cell 1</td>
    <td>This is row 1/columnv2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/columnv1 with cell 3</td>
    <td>This is row 2/columnv2 with cell 4</td>
  </tr>
</table>

Here is what this table with the border set to 20 looks like:

This is row 1/columnv1 with cell 1	This is row 1/columnv2 with cell 2
This is row 2/columnv1 with cell 3	This is row 2/columnv2 with cell 4

Here you can see the table border with the default 3-D shadow very clearly. The table border sets the width for the outside border and cellspacing sets the width for the inside border of a table!

How to Set No Table Border

If you do not want your table to have a visible border just remove the border attribute from the table tag or the table element:

<table>
  <tr>
    <td>This is row 1/column 1 with cell 1</td>
    <td>This is row 1/column 2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/column 1 with cell 3</td>
    <td>This is row 2/column 2 with cell 4</td>
  </tr>
</table>

Here is what this table with no border looks like:

This is row 1/column 1 with cell 1	This is row 1/column 2 with cell 2
This is row 2/column 1 with cell 3	This is row 2/column 2 with cell 4

How to Set the Color of a Table Border

The attributes bordercolor, bordercolorlight, and bordercolordark are deprecated and not valid with XHTML.
Therefore, we do not recommend the use of border color attributes!

Table border colors should be specified with CSS (Cascading Style Sheet)! For more information about XHTML standards please visit Webmaster Seminar's XHTML tutorial.

If you are still interrested in how to add borders and border colors the old fashioned way please read on. The color of a table border can be set with the attribute bordercolor, which must be added to the table element. The following table example shows a red colored border:

<table border="20" bordercolor="red">
  <tr>
    <td>This is row 1/column 1 with cell 1</td>
    <td>This is row 1/column 2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/column 1 with cell 3</td>
    <td>This is row 2/column 2 with cell 4</td>
  </tr>
</table>

Note: Table border colors might not be compatible with all web browsers! While newer versions of Internet Explorer, Mozilla Firefox, and Netscape Navigator display border colors a little different from each other, web browsers like Opera may not display border colors at all.
Another Note: According to W3C recommendations borders should be created with CSS (Cascading Style Sheet)!
Here is what the table with a red border color looks like:

This is row 1/column 1 with cell 1	This is row 1/column 2 with cell 2
This is row 2/column 1 with cell 3	This is row 2/column 2 with cell 4

How to Set Light and Dark Border Colors

The attributes bordercolor, bordercolorlight, and bordercolordark are not valid with XHTML. Therefore, we do not recommend the use of border color attributes!

The light and dark border color of a table can be specified as well, however, only newer versions of Internet Explorer can read this HTML code. Most other web browsers are not able to display light and dark border colors. So, if you are using Internet Explorer you can see the red and blue table border color, if you are using any other web browser you might not be able to see the table border color:

<table border="20" bordercolorlight="red" bordercolordark="blue">
  <tr>
    <td>This is row 1/column 1 with cell 1</td>
    <td>This is row 1/column 2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/column 1 with cell 3</td>
    <td>This is row 2/column 2 with cell 4</td>
  </tr>
</table>

Here is what this table with the different border colors looks like in a web browser:

This is row 1/column 1 with cell 1	This is row 1/column 2 with cell 2
This is row 2/column 1 with cell 3	This is row 2/column 2 with cell 4

To find out how to add cellspacing, cellpadding, table height and width, table cell height and width, background color and background images to a table please continue to:

• HTML Table and Table Properties Alignment
• HTML Background and Table Background
• HTML Table Borders
• HTML Table Properties

• Back
• Next

HTML Related Links

• How to Get a Web Site or Online Business Started
• CMS - Content Management System
• How to Choose and Register the Right Domain Name
• Making Revenue - How to Make Money With a Website
• Server and Hosting

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:

Copy the code below and paste into your web page

<a href="http://www.webmasterseminar.com/htmlborders.php">
Webmaster Seminar</a><br />
HTML Borders - Free Information, Tutorials and HTML Resources