Step 15 – Tables

Sometimes you want to have more control over where the text will be within your design. You don’t want it to use the full screen width, but you may want to have it in two columns. To get this effect by using tables. Open the HTML file index.html and add the following code:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<FONT FACE=”Verdana” SIZE=2>

<CENTER>
<IMG SRC=”images/logo.gif” WIDTH=400 HEIGHT=161 ALT=”logo”>
<H2>A short introduction</H2>
</CENTER>

<TABLE WIDTH=100% BORDER=0>
<TR VALIGN=TOP><TD WIDTH=50%>

<FONT COLOR=”#FF9B6A”><B>Nora Tol Virtual Publishing</B></FONT> was founded about 12 years ago when owner <FONT COLOR=”#FF9B6A”>Nora Tol</FONT> started offering her web design services.
<P>
By demand she quickly expanded her services with <U>designing logos and artwork (DTP)</U> and even started various <U>Internet- and marketing services</U>.
</TD>
<TD>
This is a short list of the services Nora Tol Virtual Publishing offers:
<OL>
<LI> Web design
<LI> DTP
<LI> Web hosting
<LI> Domain registration
<LI> (press)mailings for artists
</OL>
</TD></TR>
<TR><TD COLSPAN=2>
<P>
<CENTER>
<FONT SIZE=4>Take a look at her <A HREF=”http://www.noratol.nl/”>homepage</A> for more information.
<BR>
Or send her an E-mail!</FONT>

<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>

</TD></TR></TABLE>

</BODY>
</HTML>

Save this document and take a look at in a browser.

With the codes

<TABLE WIDTH=100% BORDER=0>
<TR><TD WIDTH=50%>

we don’t only open a table we also open the first row and the first column. Lets take a closer look:

<TABLE WIDTH=100% BORDER=0>
</TABLE>

With the above code we open and end the TABLE-tag. With WIDTH we say how big the table is allowed to be. By using percentages the width of the table will adjust to the screen width of the browser. Certain lay-outs require the width in pixels. This allows you to set the exact location of certain texts or even images. Pay close attention to the difference in MSIE and other browsers.
You can also add a HEIGHT. This is nice to know in case you want a graphic in the exact center of a browser. You create a table. Set WIDTH and HEIGHT to 100% and center the content.
With BORDER you can define the thickness of the tableborder. I’ve chosen for an invisible border. If you want to know exactly what you’re doing set this to 1 (pixel) and view the page in a browser.

Example:

<TABLE WIDTH=100% BORDER=1 BORDERCOLOR=#000000>
</TABLE>

Adding BORDERCOLOR=#000000 is not necessary for making the border visible. This piece of code makes sure the border is black in MSIE.

<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
</TABLE>

Adding CELLPADDING=0 and CELLSPACING=0 is mostly used when a table is used to combine a few pictures, making it one. With CELLPADDING you decrease or increase the spacing within a cell. It’s now turned off, which would make the text touch the border if the border was set to 1.
With CELLSPACING you increase or decrease the spacing between the cells. It’s also turned off now making the texts touch each other.

<TABLE WIDTH=100% BORDER=1>
<TR>
</TR>
</TABLE>

With <TR> you open the first row of the table. TR is short for Table Row. A table will only become usable when a table row includes cells:

<TABLE WIDTH=100% BORDER=1>
<TR><TD>
</TD></TR>
</TABLE>

The TD-tag is always located within the TR-tag. TD stands for Table Data. You can place whatever you want in there: texts, graphics and forms.

The above example generates 1 column that has a width of 100%. More cells are made this way:

<TABLE WIDTH=100% BORDER=1>
<TR><TD>my first column</TD><TD> my second column</TD></TR>
</TABLE>

The cell will be as big as the data allows. The data usually determines the width and height of the cells.

Making a second row is done like this:

<TABLE WIDTH=100% BORDER=1>
<TR><TD>my first column</TD><TD> my second column</TD></TR>
<TR><TD>my third column</TD><TD> my fourth column</TD></TR>
</TABLE>

You can add as many rows as you like in your table and each row can contain as many cells as you want. You will be limited by your screen width and the content of your table.

When you’ve used two cells in the first row of your table this will become default for your table. Every row following is expected to contain two cells. When you want to use the full length again, you add:

<TABLE WIDTH=100% BORDER=1>
<TR><TD>my first column</TD><TD> my second column</TD></TR>
<TR><TD COLSPAN=2>my third column</TD></TR>
</TABLE>

When you look at this in your browser you’ll see that the thirs column used the default table width of 100%. With COLSPAN you define how big the column should be. In this case it should have the width of 2 cells/columns.

You can also do this with rows:

<TABLE WIDTH=100% BORDER=1>
<TR><TD ROWSPAN=2>my first column 1</TD><TD> my second column</TD></TR>
<TR><TD> my third column</TD></TR>
</TABLE>

With ROWSPAN you define how many rows this cell should contain. Two, in this care. The second row will start filling the second column.

You can add values to the TR- and the TD-tag. When you do this with <TR>, the values count forthe whole row. When you do this with <TD> the values apply for that cell only:

<TABLE WIDTH=100% BORDER=1>
<TR ALIGN=RIGHT VALIGN=TOP><TD ROWSPAN=2>my first column</TD><TD> my second columns</TD></TR>
<TR><TD> my third column</TD></TR>
</TABLE>

Adding ALIGN=RIGHT and VALIGN=TOP will change the alignment of the content. These are all the alignments you can use:

ALIGN=LEFT
ALIGN=RIGHT
ALIGN=CENTER

VALIGN=TOP
VALIGN=BOTTOM

You can also add values regarding the background:

<TABLE WIDTH=100% BORDER=1>
<TR><TD BGCOLOR=#FFFFE7 ROWSPAN=2>my first column</TD><TD> my second column</TD></TR>
<TR><TD> my third column</TD></TR>
</TABLE>

Adding BGCOLOR=#FFFFE7 I’ve changed the background color of the first column only. You can also use background images:

<TABLE WIDTH=100% BORDER=1>
<TR><TD BACKGROUND=”images/background.gif” ROWSPAN=2>my first column</TD><TD>my second column</TD></TR>
<TR><TD> my third column</TD></TR>
</TABLE>

Adding a background image to the whole table can also be done when opening the TABLE-tag. But you should check the results in Netscape. Netscape repeats the image in each column, giving it a very strange effect at times.

Step 15b – fonts in tables:
You may have noticed that the FONT-tag in index.html won’t work as it did before now that we’re using tables. To get the same result in a table change the code to:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

<CENTER>
<IMG SRC=”images/logo.gif” WIDTH=400 HEIGHT=161 ALT=”logo”>
<H2>A short introduction</H2>
</CENTER>

<TABLE WIDTH=100% BORDER=0>
<TR VALIGN=TOP><TD WIDTH=50%>

<FONT FACE=”Verdana” SIZE=2>

<FONT COLOR=”#FF9B6A”><B>Nora Tol Virtual Publishing</B></FONT> was founded about 12 years ago when owner <FONT COLOR=”#FF9B6A”>Nora Tol</FONT> started offering her web design services.
<P>
By demand she quickly expanded her services with <U>designing logos and artwork (DTP)</U> and even started various <U>Internet- and marketing services</U>.
</FONT>

</TD>
<TD>

<FONT FACE=”Verdana” SIZE=2>

This is a short list of the services Nora Tol Virtual Publishing offers:
<OL>
<LI> Web design
<LI> DTP
<LI> Web hosting
<LI> Domain registration
<LI> (press)mailings for artists
</OL>

</FONT>

</TD></TR>
<TR><TD COLSPAN=2 ALIGN=CENTER>
<BR>
<FONT FACE=”Verdana” SIZE=2>

<FONT SIZE=4>Take a look at her <A HREF=”http://www.noratol.nl/”>homepage</A> for more information.
<BR>
Or send her an E-mail!</FONT>

</FONT>

<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>

</TD></TR></TABLE>

</BODY>
</HTML>

Because the above method often leads to the use of many HTML tags a lot of designer choose to use Cascade Style Sheets (CSS). With one line you define that all text within a TD-tag should be printed in a particular style.

Step 15c – nesting tables:
It’s possible to place one table in another table:

<TABLE BORDER=0 BGCOLOR=#000000>
<TR><TD>
<FONT COLOR=#FFFFFF>
table one:
<P>
<TABLE BORDER=0 BGCOLOR=#FFFFFF>
<TR><TD>
table two
</TD></TR>
</TABLE>

</FONT>
</TABLE>

As you can see one table surrounds the other. The FONT-tag will only apply to the data from table one.
Make sure you close all the tags!

Step 15d – table troubleshooting:
Always check the tables in MSIE and other browsers. When you run into problems, turn the border on (set it to 1) to see what is happening.

Go to Step 16

Bookmark the permalink.

Comments are closed