Everywhere on the web you will find that the web pages follow a structured design - the text is placed in proper order, the images are aligned properly, the navigation buttons are perfectly placed and so on. All these are possible because of the table based web page layouts. Tables allow you to control the appearance of your web site design by breaking the web pages into precise segments while controlling the placement for text and graphics.

Tables were first used in web page design to present rows and columns of tabular data. However, later, the designers found that tables can be used as a wonderful tool for controlling the layout of web pages. You can create columns and grids - which can contain images and text. The cells of tables can be utilized as templates to give more uniform look and through the use of color, you can add visual contrast to your business website.
 
With tables, it is very easy to arrange information – by creating columns of text, holding white space between elements, and restricting the dimension of the page’s content in ways, other HTML formatting tags cannot. 
 
Table is an extremely powerful tool to divide a page into different sections. Today, almost all major websites use hidden tables for defining the layout of the pages. The most important aspects in this case are:

• You can easily divide the page into different sections – hidden tables are best for this purpose.
• Creating menus become easy with tables – typically one color for the main menu while other for the links following.
• Table columns are resized automatically, so table always fills different screen widths.
• You can create fast loading headers for the page – a colored table with a header text loads very fast.
• Aligning images is easy, especially images that have been cut into smaller pieces.

Table Tags

The basic HTML tag for creating a table is <table> tag. This tag begins the table; you place what you want inside the tag and end the table with </table> tag.

A table is of no use if it doesn’t have rows and columns, as rows and columns are needed to add contents to the table. To insert rows <tr> tag is used while <td> tag is used to divide rows into columns. Here, td stands for table data and tr stands for table row. 

Here is what you have to write in your HTML code while inserting a table (with rows) in your page:

<table>
<tr><td>This is the left side of first row</td><td>This is the right side of first row</td></tr>
<tr><td>This is the left side of second row</td><td>This is the right side of second row</td></tr>
</table>

You can add a number of properties to the table tags. You can set the alignment (left, right, center) of content inside the table, change background color, border thickness and color, cell spacing (space between cells), and cell padding (distance between cell and content). You can also set the minimum width of table in pixels, or minimum width in percentage of window size.

While the properties used in table tags are used for the entire table, some properties are there which you can use for rows and columns tags. In this case, the properties are set only for the particular row or column, doesn’t affect the entire table.

There are some settings, which are only valid for <td> tags or column tags. These are:

 Note: Settings for columns have higher priority than settings of rows. Settings for cells have higher priority than settings for the table as a whole.

Add a Border

This is how you can add border to the table:

<table border=”2”>
<tr><td>This is the left side of first row</td><td>This is the right side of first row</td></tr>
<tr><td>This is the left side of second row</td><td>This is the right side of second row</td></tr>
</table>

See, the table now has border in it.

You can set the border to be as big or small as you like by changing the number inside the quote marks. If you set border=”0”, the table will appear without border. This is commonly known as hidden table.

More spacing between cells

You can use cellspacing=” “ and cellpadding=” “ commands to add more space around each cell and inside each cell respectively.

Let’s take the above example and add cellspacing=”12”

<table border=”2” cellspacing=”12”>
<tr><td>This is the left side of first row</td><td>This is the right side of first row</td></tr>
<tr><td>This is the left side of second row</td><td>This is the right side of second row</td></tr>
</table>

Now, the same table will look like this:

Alignment

To align the contents of your table cell, you only need to add the align=” “ command to your <td> tag. You can align the text in three ways:

• To align content to the left of the cell, use align=”left”
• To align content to the right of the cell, use align=”right”
• To align content to the center of the cell, use align=”center”

Now, let’s see how we can align cell content

<TABLE width="450" border="2" cellspacing="7" cellpadding="7">
<TD align="left">
This is left aligned!
</TD>
<TD align="right">
This is right aligned!
</TD>
</TABLE>

The first cell is aligned to left while the second cell is right aligned. This is how it looks:

You can add just anything inside the cell – links, images, headings, paragraphs and more. Just place the tag inside <td> tag, it will work.

For example, to put a link inside the cell, use the link tag (anchor tag) inside the <td> tags.

<td>
<a href=”http://www.mysite.com”>My Website</a>
</td>

You will have a link on My Website inside the cell.

Images in Tables

Though the usage of tables started for arranging text, tables were no more restricted for text only. Table contents can be images, or even multimedia files.

To place an image inside a cell, you need to do this:
 

<td>

<img src=”myimage.jpg”>

</td>

 

If you want to put image in the center of the cell, write the same code in the following way:

 

<td align=”center”>

<img src=”myimage.jpg”>

</td>

Adding colors

Let’s make a single row table with two cells. We will add background color to add a different and colorful look to the table. 

<table border=”2” bgcolor=”green”>
<tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr>
</table>

This is how it looks:

Here, bgcolor specifies the background color; hexadecimal color codes or color names are accepted. Instead of the color name green, you can also write #00CC00 – the result will be same.  

Now, lets try to put different colors in different cells – blue for the first cell while red for the second cell. In this case, we have to use bgcolor attribute of <td> tag. 

<table border="2">
<tr>
<td bgcolor="#FF0000">First Cell</td>
<td bgcolor="#0000FF">Second Cell</td>
</td>
</table>

This is how it looks when you open the page in browser:

Tables within tables
Tables within tables or nested tables are quite useful for creating table based web page layout. This can give control over positioning without 
having to revert to absolutely positioned elements. Suppose, you would like the navigational part of the page on the left and content on the right. 
A good way to create this kind of effect is by using nested tables. The big table will contain two other tables. One of the two inner tables will be quite 
narrow – the left one, which will be used for navigation. The other table, on the right (for page content) will have majority of space available. 
You have to write the following code for this:
<table width="500" cellspacing="2" border="1">
<tr>
<td><div align="center"><b>The main table</b></div> 
<table width="150" cellspacing="7" cellpadding="7" align="left" border="1">
<tr>
<td>A nested table for navigation</td>
</tr>
</table>
<table width="400" cellspacing="8" cellpadding="7" align="right" border="1">
<tr>
<td>This is another nested table for page content</td>
</tr>
        
</table>

        </td>
        
</tr>
        
</table>    
        
        
Here the code written in blue is for the main table or containing table. This table is 500 pixels in width. It contains two other tables. Code written in black is for the left table while code written in red is for the right table. 
        
The result will be something like this:
        

        
However, it is suggested not to nest many tables too deeply in a page, as this can be pretty complex later. 
        

        
Problems with tables
        
 
        
Though tables are used popularly for designing web page layout, tables may sometimes be problematic for your web page design. Table based web pages 
        
sometimes load more slowly than plain text. The reason – most of the browsers first place all the items of the tables and then show the table. Therefore, it 
        
takes more time for the page to download, unless the table widths are specified explicitly. Tables can be faster if you make separate table for each row. Then you 
        
might face alignment problem.
        

        
Note: All Content Copyright © Website Source, Inc.