| Ok, what we've got is
this...
<TABLE>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
...which gives us this:
First lets make it look more like a table
and give it a border. Every time you make a change and want to
see how it looks, you can hit the Reload button on
your browser. If your browser doesn't have a reload button, get
another browser.
<TABLE BORDER=1>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
How about a bigger border?
<TABLE BORDER=5>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
How about a HUGE border?
<TABLE BORDER=25>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
How about NO border?
<TABLE BORDER=0>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
As you can see, the default is no border.
Let's stick with a modest border for now.
<TABLE BORDER=3>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
When no sizes are specified the table is only as big as it needs
to be.
<TABLE BORDER=3>
<TR>
<TD>Geetham and KJ</TD>
</TR>
</TABLE>
Specifying a table size is pretty simple
though.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Geetham and KJ</TD>
</TR>
</TABLE>
How about this?
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Geetham and KJ</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
Let's reduce the table size to 50% of the browser window.
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
Now we will specify a width of 50 instead of 50%.
<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
Now 100.
<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
As you can see there are two ways to specify table width. Each
style has its uses. Which style to use for what is unimportant
now.
We can also mess around with the height.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
We can control where in the cell the data
will appear.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Geetham</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Geetham</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Geetham</TD>
</TR>
</TABLE>
As you can see, the default value is 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>Geetham</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Geetham</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Geetham</TD>
</TR>
</TABLE>
Default is middle.
I will take a second now to show you something else. Images can
also be used and manipulated in a table data cell. In the folder
that contains this document you will find a small picture named geetham.gif.
Copy it into the folder that you are working out of (the one
where you put tables1.html). Substitute an IMG
tag for Geetham.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG
SRC="geetham.gif" WIDTH=32 HEIGHT=32></TD>
</TR>
</TABLE>
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. I
won't go into details, but doing so makes it easier for the
browser and avoids any nasty little surprises.
<--BACK
NEXT-->
|
