Webmaster Online Seminar - HTML Alignment

HTML Tutorial - HTML Alignment

How to Align Tables and Table Properties

Tables or table properties are by default aligned to the left of the screen or the table. If the attribute align is not specified, the table or content inside the table will be aligned to the left. A table or it's content can also be right aligned or center aligned. Below is an example of a center aligned table with border and a width of 100%, with 1 row and 2 cells. The left table cell is left aligned by default, and in the right cell the align attribute was added with the value: align="right"

<table align="center" border="3" width="100%">
<tr>
<td>This cell is left aligned by default</td>
<td align="right">This cell is right aligned</td>
</tr>
</table>

Here is what the center aligned table with one left aligned, and one right aligned cell looks like:

This cell is left aligned by default

This cell is right aligned

The alignment for a table or the table cells can be set for the table itself and/or each of it's cells individually.

How To Align Images with HTML

The alignment of images works pretty much the same way as the table alignment. The align attribute is being added to the image source code element: <img src="">
Here is an example of a top aligned image in a table with text:

<table align="center" border="3" width="100%">
<tr>
<td>
<img src="images/image.gif" alt="test image" align="top">
Image Test</td>
<td align="right">This cell is right aligned</td>
</tr>
</table>

Here is what the table with the top aligned image looks like:

Image Test

This cell is right aligned

How to Set Vertical Alignment

By default the text next to an image is bottom aligned as you can see in the next example below. We have added vertical alignment since by default the text in a table cell is aligned in the vertical middle of the cell, which doesn't look very nice, so the alignment for the content of the right table cell is set to align to the top:
valign="top"

<table align="center" border="3" width="100%">
<tr>
<td>
<img src="images/image.gif" alt="test image">
Image Test</td>
<td align="right" valign="top">This cell is top-right aligned</td>
</tr>
</table>

Here is what the table without the top aligned image and the top aligned text in the right table cell looks like:

Image Test

This cell is top-right aligned

To find out how to add cellspacing, cellpadding, table height and width, table cell height and width, background color and background images to a table please continue to:

Back
Next

HTML Related Links

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:

Copy the code below and paste into your web page

<a href="http://www.webmasterseminar.com/htmlalignment.php">
Webmaster Seminar</a><br />
HTML Alignment - Free Information, Tutorials and HTML Resources