CKWS Core Page
Design Tips
Example Sites
PDF Tips
css resources
Tools
Bibliography
Book Sales
Master Links
Feedback


Killer Tables - Alignment

Objects and text in cells can be aligned in several ways.

Table with Text and Images Horizontally Spaced
Text Left Text Center Text Right

<table border=1 cellspacing=0 cellpadding=0 width=300>
<tr>
<td width=100 align=left>Text Left</td>
<td width=100 align=center>Text Center</td>
<td width=100 align=right>Text Right</td>
</tr>

<tr>
<td width=100 align=left><img width=25 height=25 border=0 SRC="../resources/dot_red.gif"></td>
<td width=100 align=center><img width=25 height=25 border=0 SRC="../resources/dot_red.gif"></td>
<td width=100 align=right><img width=25 height=25 border=0 SRC="../resources/dot_red.gif"></td>
</tr>
</table>



Table with Text and Images Vertically Spaced
Text Top Text Middle Text Bottom Text Baseline

<table border=1 cellspacing=0 cellpadding=0 width=401>
<tr>
<td width=1 rowspan=2><img width=1 height=150 border=0 SRC="../resources/dot_clear.gif"></td>
<td width=100 valign=top>Text Top</td>
<td width=100 valign=middle>Text Middle</td>
<td width=100 valign=bottom>Text Bottom</td>
<td width=100 valign=baseline>Text Baseline</td>
</tr>

<tr>
<td width=100 valign=top><img width=25 height=25 border=0 SRC="../resources/dot_red.gif"></td>
<td width=100 valign=middle><img width=25 height=25 border=0 SRC="../resources/dot_red.gif"></td>
<td width=100 valign=bottom><img width=25 height=25 border=0 SRC="../resources/dot_red.gif"></td>
<td width=100 valign=baseline><img width=25 height=25 border=0 SRC="../resources/dot_red.gif"></td>
</tr>
</table>



Next: Blank Cells

Buy Creating Killer Web Sites from Amazon.com
Follow the Fish!
Core | Top | Feedback