Table Tricks

Extra Space On The Bottom Of Your Cell

If you find you are having a problem with extra space inside the table cell under cell content, try moving the closing table cell tag </td> up onto the line that precedes it.

Note: MSNTV users will not see the space under the image in the sample (left) below. This extra space problem doesn't happen on MSNTV, but MSNTV users should take note of this for computer users who maybe viewing their web pages.

Notice the spacing under the image in this cell. The space is gone when the closing </td> is moved up.

Here is the html code for the table above (right). Note how the closing table cell tag </td> has been placed up on the same line of code with the image.

Using Cellpadding & Cellspacing

If you do not use the cellpadding or cellspacing tags in your tables, the cellpadding will default to a value of 1, the cellspacing will default to a value of 2. So be sure to add cellspacing="0" and cellspacing="0" to your tables if you do not desire either of these two values in your table cells.

I have added a red border around the sample tables below (MSNTV users can not see this red border), so you can clearly see the extra space in the table when not using cellspacing="0" and cellpadding="0".

Without
cellpadding="0"
cellspacing="0" With
cellpadding="0"
cellspacing="0"

Joining A Split Image

There are times when you might want to split an image for your web site. Either for faster downloading of the image or other effects that can be used with a split image (this also deters people from stealing your images). This lesson will show you the proper way to create a table to join the pieces of the image together to form one seamless image.

This sounds good, but how do you split an image into pieces that can be joined together without losing some of the image in the process ? The answer is with a software program. There are many such programs on the internet that you can download for free, go to Download.Com and search for "image split". The program I used to split the image for this lesson is Splitz, it was easy to use and free.

Left Half Of The Image Right Half Of The Image

Now lets take the two images above and join them together using tables. The image on the left (below) is properly coded and the image on the right (below) is not. When the table code is written correctly, the two images will join together seamlessly.

Good Image Using
cellpadding="0"
cellspacing="0" Bad Image Not Using
cellpadding="0"
cellspacing="0"

Below is the html code for the table that joins the two images together seamlessly (left). Note how we used the above two previous table tricks to achieve joining the two images together without any space between or under them. Be sure to incorporate both previous lessons when you are writing this table code to insure that your final image will be seamless.

Holding Open An Empty Table Cell

On Internet Explorer and MSNTV you can hold open an empty table cell by just adding the width and height into the table cell line of code. For example:

<td width="50" height="75">, but if you view that cell coded in this manner on Netscape, the cell will collapse. Netscape needs some type of cell content to hold it open to the assigned width and height.

The best way to hold a empty cell open to a proper width and height, is to use a one pixel clear image. You place the one pixel clear image inside the cell that you would like to hold open as an empty cell and assign a width and/or height to the clear image itself. This will add content to the cell and keep it from collapsing on Netscape.

Below is a sample table code with three cells on a single table row. The first and third cell with have the Draac.Com logo image placed within them. The second cell (middle cell), will have a clear image placed within it, with an assigned width and/or height to hold it open. I will add a border of 1 so you can clearly see the three cells in the sample table. In this case it is only necessary to add the width to the clear image, the height is not a factor.

Below is the html code for the above table, note the use of the clear image with it's assigned width to hold the empty cell open and keep it from collapsing on Netscape. Get in the habit of using this method of holding open an empty cell in your table codes, it will assure your tables look as planned on all browsers.

Using The Nowrap Attribute

Adding the nowrap attribute to your table cell line of code will prevent text placed within the cell from breaking down to the next line. When the nowrap attibute is used, the text will only break down to the next line when you manually break the text with

Note: Do not set a width in the table cell that you want to use the nowrap attribute in or it will prevent the nowrap attribute from doing it's job.

Below is a table created with a width of 200, the nowrap attribute overrides the table width attribute.

Draac.Com is the place to learn about tables.

Below is the same table created with a width of 200, without the nowrap attribute.

Draac.Com is the place to learn about tables.

Below is the html code for the sample table above using the nowrap attribute.

<table border="1" cellpadding="10" cellspacing="0" width="200">
<tr><td align="left" valign="middle" nowrap>
<font size="2" color="#c71585" face="verdana"><b>
Draac.Com is the place to learn about tables.
</b></font>
</td></tr></table>

Two Tables - Side By Side (Nesting)

There are times when you might want to have two complete, individual, table codes placed side by side on a web page. The trick to placing the two tables side by side is to build another table around these two individual tables.

Each one of the individual tables will be placed into a table cell of the table that surrounds them. This is called "nesting tables".

Tip: This idea of "nesting tables" can apply to more than just two individual tables as shown here in this lesson. Many times whole web pages are created by nesting tables within cells of other table(s).

Below is a sample of two complete, individual tables, "nesting" within cells of a table that surrounds them both. I will add a border of 1 to the sample table so you can clearly see the individual tables and the table that surrounds them.

This is a complete individual table. Number 1

This is a complete individual table. Number 2

Below is the html code for the sample table above. Notice the two complete table codes placed into the cells of the table that surrounds them. I have colored the text of these individual table codes dark red in the code below, so they can be easily seen within the surrounding table code.

<table cellpadding="20" cellspacing="0" border="1">
<tr><td align="center" valign="middle" bgcolor="lightblue">
<font size="1" color="#c71585" face="verdana"><b>
This is a complete individual table. Number 1
</b></font>
</td></tr></table>

</td><td align="center" valign="middle" width="200">

<table cellpadding="20" cellspacing="0" border="1">
<tr><td align="center" valign="middle" bgcolor="lightgreen">
<font size="1" color="#c71585" face="verdana"><b>
This is a complete individual table. Number 2
</b></font>
</td></tr></table>

</td></tr></table>