Sue's HTML Help Pages

Basic Tables

Laying out your pages

One of the most common questions in the Help forums have to do with aligning images and text; links and columns. The best way to do this in most cases is to use Tables. Tables intimidate some people, but again, once you understand the basic structure, and the meaning of the tags, it all becomes easy. This section isn't going to go into great depth about tables, but hopefully will provide you with enough information to start to experiment with them. Remember, that's the BEST way to learn how to use them...by experimenting with how things look in your browser. Remember, you do not need to be online to open your browser, and it's a great preview tool.

The very most important thing to remember with Tables is my first rule of HTML: IF YOU OPEN IT, CLOSE IT. Sorry for shouting, but especially in Netscape, if the table isn't closed properly, the page doesn't display. It just quits showing up at the start of your table. And that's usually unacceptable.

The Tags
The first tags you're going to use are the <TABLE> </TABLE> tags. Put those in first, and we don't have to remember about closing them later. Those tags are self explanatory...it alerts the browser to look for a table.
The next tags you're going to be concerned with are the <TR> </TR> tags. The "T" is alerting the browser we have a part of the Table here, and the "R" is telling it we have the start and end of a Row. Again, it's very important you close these. So right now, our table looks like this:
<TABLE>
<TR>
</TR>
</TABLE>

Now, we dont have anything entered yet, so we have to create a Data Cell. This is just a fancy name for the stuff that goes into the table. The tags you're going to be using to let the browser know we have "stuff" in this table are <TD> </TD>. The "T" again stands for Table, and the "D" means "Data." Sure beats typing out Table Data and Table Row, doesn't it? Our Table now looks like this:
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>

If you want to have, for example, two images on each side of some text, you're going to need more "data cells" to put all that stuff in. You don't need any more rows, so we don't have to worry about our TR tags. One row, three places to put our stuff in. We will add two more of our TD tags to the table. Your code should look like this:
<TABLE>
<TR>
<TD>
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>

Now we get to add our stuff. We have two images...and text. We want the images on the left and right ends, and the text in the middle. The images will go in the First and Last pairs of the TD tags. Let's say we want to add a rose. We put our image tags in now.
<TABLE>
<TR>
<TD>
<IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89">
</TD>
<TD>
</TD>
<TD>
<IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89">
</TD>
</TR>
</TABLE>
Now we want to add our text...and we want to do this in the form of a Heading. This goes, of course in the Middle set of Data cells. And we just add it the way we would normally, making sure, like our images, that they're between the opening and closing set of the middle<TD></TD> tags. Our table now looks like this:
<TABLE>
<TR>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
<TD>
<H1 ALIGN="CENTER">Welcome to my Garden</H1>
</TD>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
</TR>
</TABLE>
This is how it will look:

Welcome to my Garden

Hmmm...That isnt exactly centered is it? which is what we want it to be. So guess which tags we're going to enter next? You've got it...the CENTER tags. We want to put them outside of the TABLE tags, because that's what we want centered, the entire table.
<CENTER>
<TABLE>
<TR>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
<TD>
<H1 ALIGN="CENTER">Welcome to my Garden</H1>
</TD>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
Now it will look a little better:

Welcome to my Garden

If we want a second row below that, we need to add a NEW set of TABLE ROW tags (our <TR> and </TR>). And let's say we only want two places to put our "stuff" in. Let's say, maybe our guest book view and sign images and links. Right AFTER our closing </TR> tags, we need to add our new set of <TR></TR> tags.
<CENTER>
<TABLE>
<TR>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
<TD>
<H1 ALIGN="CENTER">Welcome to my Garden</H1>
</TD>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
</TR>
<TR>
</TR>
</TABLE>
</CENTER>
Now, since we only want two "cells" we add three more sets of <TD></TD> in between our NEWset of Row tags. This might sound strange, but you have to add all three, even though you're only going to fill up the left and right one, and leave the middle blank. If you don't do this, you're going to end up with a table that has one cell filled properly, and the other is going to be a "double wide" one, and will not look the way we want it to. This can be worked around, with alignment, and other attributes, but for now, we'll just use a blank cell to keep things neat. If you only wanted ONE place for your stuff, then you could add just the one set of <TD></TD> tags, and it would work. If, for example you had a wide divider bar or banner. That will be our next addition after this. :-)
<CENTER>
<TABLE>
<TR>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
<TD>
<H1 ALIGN="CENTER">Welcome to my Garden</H1>
</TD>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>
</CENTER>

Time to fill it up. We know how to turn images into "hot links" or anchors from earlier lessons, so we'll just add our anchors and our images inside our <TD></TD> tags...one image and anchor to a cell .
<CENTER>
<TABLE>
<TR>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
<TD>
<H1 ALIGN="CENTER">Welcome to my Garden</H1>
</TD>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
</TR>
<TR>
<TD>
<CENTER><A HREF=A HREF="/cgi-bin/geoplus_apps/ans_entry"><IMG SRC="sign.gif"></A></CENTER>
</TD>
<TD>
</TD>
<TD>
<CENTER><A HREF=A HREF="geobook.html"><IMG SRC="read.gif"></A></CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
Now we have something that looks like this:

	Welcome to my Garden

Now we want to add our banner across the bottom. Once again, we add another set of Row tags after our last closing </TR> tag.
<CENTER>
<TABLE>
<TR>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
<TD>
<H1 ALIGN="CENTER">Welcome to my Garden</H1>
</TD>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
</TR>
<TR>
<TD>
<CENTER><A HREF=A HREF="/cgi-bin/geoplus_apps/ans_entry"><IMG SRC="sign.gif"></A></CENTER>
</TD>
<TD>
</TD>
<TD>
<CENTER><A HREF=A HREF="geobook.html"><IMG SRC="read.gif"></A></CENTER>
</TD>
</TR>
<TR>
</TR>
</TABLE>
</CENTER>

And then our ONE set of Data cells.
<CENTER>
<TABLE>
<TR>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
<TD>
<H1 ALIGN="CENTER">Welcome to my Garden</H1>
</TD>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
</TR>
<TR>
<TD>
<CENTER><A HREF=A HREF="/cgi-bin/geoplus_apps/ans_entry"><IMG SRC="sign.gif"></A></CENTER>
</TD>
<TD>
</TD>
<TD>
<CENTER><A HREF=A HREF="geobook.html"><IMG SRC="read.gif"></A></CENTER>
</TD>
</TR>
<TR>
<TD>
</TD>
</TR>
</TABLE>
</CENTER>

And now we can add our banner to the cell:
<CENTER>
<TABLE>
<TR>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
<TD>
<H1 ALIGN="CENTER">Welcome to my Garden</H1>
</TD>
<TD>
<CENTER><IMG SRC="rose18.gif" ALT="rose" BORDER="0" WIDTH="100" HEIGHT="89"></CENTER>
</TD>
</TR>
<TR>
<TD>
<CENTER><A HREF=A HREF="/cgi-bin/geoplus_apps/ans_entry"><IMG SRC="sign.gif"></A></CENTER>
</TD>
<TD>
</TD>
<TD>
<CENTER><A HREF=A HREF="geobook.html"><IMG SRC="read.gif"></A></CENTER>
</TD>
</TR>
<TR>
<TD>
<CENTER><IMG SRC="html.jpg" ALT="logo" BORDER="0" WIDTH="350" HEIGHT="75"></CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
And now we have something like this:

	Welcome to my Garden

And there you have it...the basics of a table. There are so many more ways to play with them, and attributes to add, but this will be added at a later time. For now, the best way is to practice using the three basic sets of tags, and using your browser to preview. I will be adding the other stuff at a later date, so be sure to check back. Also new will be a section on how to make frames.

To Be Continued...