shadowline
Table, TR & TD << Width, Border, Align, Valign >> Cellpadding & Cellspacing
The TABLE tag has the following properties :

WIDTHWidth of the TABLE in pixels or percentage.
BORDERThickness of the TABLE borders in pixels.
ALIGNAligns the TABLE to the LEFT, RIGHT, or CENTER.

None of these settings are mandatory to create a TABLE, but they help form and design the TABLE.

WIDTH specifies how far across the TABLE is going to be. The number for this property can be specified as a number (in pixels) or a percentage of the screen width. If the WIDTH property is not specified, the TABLE automatically adjusts itself to be as long as the information contained within it.

WIDTH as a number:
<table width="200">
<tr>
<td>
some text
</td>
</tr>
</table>

some text

WIDTH as a percentage:
<table width="75%">
<tr>
<td>
some text
</td>
</tr>
</table>

some text

If the visitor adjusts their window size, the fixed width table remains at 200 pixels wide and the percentage table adjusts itself to the window area. Some people prefer to use the percentage value so the table will adjust itself to the screen size of any resolution.

BORDER specifies a pixel wide border around the TABLE. This creates a similar effect as a frame around a picture. If this property is not specified, the default is 0.

A TABLE with 0 border:
<table border="0">
<tr>
<td>
sample image coding here
</td>
</tr>
</table>
car picture

A TABLE with 5 border:
<table border="5">
<tr>
<td>
sample image coding here
</td>
</tr>
</table>
car picture

A TABLE with 15 border:
<table border="15">
<tr>
<td>
sample image coding here
</td>
</tr>
</table>
car picture

ALIGN will place the table to the left, right or center of the width of the screen.

<table width="200" align="right">
<tr>
<td>
some text
</td>
</tr>
</table>

some text


The TR tag has the following properties :

ALIGNAligns row contents to the LEFT, RIGHT, or CENTER. (default LEFT)
VALIGNAligns row contents to the TOP, MIDDLE, or BOTTOM. (default MIDDLE)

<table width="100%" border="1">
<tr>
<td width="50%" >
Text.
<p> Text2. </p>
</td>
<td width="50%">
Text3.
</td>
</tr>
</table>
Text.

Text2.
Text3.

<table width="100%" border="1">
<tr align="right">
<td width="50%" >
Text.
<p> Text2. </p>
</td>
<td width="50%">
Text3.
</td>
</tr>
</table>
Text.

Text2.
Text3.

<table width="100%" border="1">
<tr align="right" valign="top">
<td width="50%" >
Text.
<p> Text2. </p>
</td>
<td width="50%">
Text3.
</td>
</tr>
</table>
Text.

Text2.
Text3.



The TD tag has the following properties :

ALIGNAligns row contents to the LEFT, RIGHT, or CENTER. (default LEFT)
VALIGNAligns row contents to the TOP, MIDDLE, or BOTTOM. (default MIDDLE)
WIDTHAssigns a pixel or percentage width to the cell. (default cell content width)
HEIGHTAssigns a pixel or percentage height to the cell. (default cell content height)

Without any of these properties declared, the TABLE code automatically calculates the properties of the data cells according to it's contents.

<table border="1" width="100%">
<tr>
<td width="50%" align="right">
Text1.
<p> Text2. </p>
</td>
<td width="50%" valign="bottom" height="300">
Text3.
</td>
</tr>
</table>
</table>
Text1.

Text2.
Text3.

When defining the WIDTH of data cells, the total data cell WIDTH should match the WIDTH of the TABLE tag. Anything in a WIDTH defined cell will wrap to the next line when it reaches the cell border.

Note : The HEIGHT property is not widely used. Some browsers have difficulty processing it and will default the cell height to the content height.
Table, TR & TD << Width, Border, Align, Valign >> Cellpadding & Cellspacing
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow