Step 15 – Tables

Sometimes, may want to add more structure to the way your text is formatted. For instance, when you have data to display. You might not want it displayed using the full screen width, but you want to show it in columns instead, like a spreadsheet. This is what you use tables. In the past, tables were also used to create layouts of websites, but we use CSS and divs to do this now. Tables are now just used for formatting data.

Let’s create two columns. 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 following lines

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

we start a table with the first row and the first column. Let’s take a closer look:

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

With the above code, we open and end the TABLE-tag. With WIDTH we state 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.
You can also add a HEIGHT.
With BORDER you can define the thickness of the table border. 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. Note: It’s actually best to use CSS to add borders to tables. CSS provides you with more options for borders (like dotted lines, only showing the top border of a cell. It’s like the options Excel provides as well.)

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>

Back in the day, when tables were used to create website layouts, CELLPADDING=0 and CELLSPACING=0 were used to merge several pictures together, making it one without people knowing about it. This was done to reduce the load time of websites, but this is now useless thanks to high speed internet. Nevertheless, it’s good to know that you can use CELLPADDING to decrease or increase the spacing within a cell. CELLSPACING increases or decreases the spacing between the cells. This is also something you can control using the padding and margin functions within CSS.

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

With <TR> you open the first row of the table. TR is short for Table Row. You can only use a table 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. It’s like a cell in Excel. These data cells support all kinds of content: 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.