Computers > Web Design

Make an HTML Table Border Using Nested Table Approach

How to make an HTML table border without using the border attribute

One easy way to make table borders is by nesting a table inside another table. This looks nice for displaying consistent thin outlines around tables rather than using the default HTML border attribute. The HTML border attribute will not provide the exact same look in Internet Explorer and Mozilla browsers like Firefox.

Figure 1: Default attribute border = 1

TABLE CONTENT GOES HERE

Figure 2: Example of a nestled table border

TABLE CONTENT GOES HERE

Here are some other examples of how they might be used.

We have launched table borders into the 21st century!

Your Link One
Your Link Two
Your Link Three
Your Link Four
Your Link Five

CONTENT HEADING

Your text content could go here. This is a simple example with an additional table cell added to the background table to provide a content heading.

Steps to Make Nested Table Borders

The code view below you can see the first <table> tag is filled with background bgcolor=#000000 (black) and has a cellpadding of "1". This is what surrounds the inner table or nested table. The nested inner table is set at 100% width but the other attributes can be set to anything desired. For domonstration purposes keep cellspacing at zero "0". I would recommend using this as a model.

Example 3 showing the HTML code for nestled table border

Code View of a Nested table border using HTML

Simply highlight the code below and copy/paste it into your HTML page after the <BODY> tag. This will give you a model to start with.