Spacing your table

The spacing of a table is the cellpadding and cellspacing. Cellpadding is the spaces between the text and cell border (the margin). Cellspacing is the spacing between each cell. You can add cellspacing and cellpadding in the <table> tag.

An example of a table cellspacing="5px" and cellpadding="5px" will look like this:

Cell	Cell
Cell	Cell

Normally, the default settings of a table is cellspacing="2px" and cellpadding="2px". And so you can change this to a lower or higher number. If you don't want any spacing, then just set the cellspacing and cellpadding to "0".

Top

Valign and align

Valign is vertical align while align is horizontal align. In a cell, the default valign setting is center. You can change this to "top" or "bottom". Align is used in a table to position the text to center, left, or right. We will now use these two in an example.

To use valign, you will use it in the <td> tag. Align can be used in both <td> or <table> tag. The <td> will only effect the cell while the <table> will effect the whole table.

Valign examples

<td valign="top">

<td>

<td valign="bottom">

If you don't change the valign to top or bottom, the default setting will take place and everything in the cell will be vertically centered.

Align examples

<td align="left">

<td align="center">

<td align="right">

To use the align in the <table> tag, you would just add align="" to the tag:

You can choose left, center, or right as the align value. By placing the align code in the table tag, you will be able to change the align of the content. But if you want to align your table you will have to use the <div align=""> tag. This will be added before the <table> tag and the closing tag will go after the </table> tag.

The align="" value can be left, center, or right. You can change it to whichever you prefer.