We can control where in the cell the data will appear.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="center">Ed</TD>
</TR>
</TABLE>

Ed


<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="right">Ed</TD>
</TR>
</TABLE>

Ed


<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left">Ed</TD>
</TR>
</TABLE>

Ed

As you can see, the default value is (usually) ALIGN="left". You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.


We can also control where data will appear vertically in a cell.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="top">Ed</TD>
</TR>
</TABLE>

Ed


<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="bottom">Ed</TD>
</TR>
</TABLE>

Ed


<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="middle">Ed</TD>
</TR>
</TABLE>

Ed

Default is usually middle.


I will take a second now to show you something else. Images can also be used and manipulated in a table data cell. Take Ed here*, Ed and save him to the folder you are working out of (the one where you put tables1.html). Then substitute an <IMG> tag for Ed.

* To save an image off of a web page, right click on it and choose Save Image As (or something similar).

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="middle"><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32 ALT="Ed"></TD>
</TR>
</TABLE>

Ed

I suppose that now is also a good time to stress that it is good practice to include size attributes with all your image tags. When your browser knows in advance how big your image is going to be, it loads the page faster.

<< BACK         NEXT >>