This week's lesson is about gaining more control over the layout of your Web pages. Through the use of tables and frames (next week) you can add more precision to the layout of your pages and placement of graphics. We will begin this week's journey with the exploration of tables. (No, not the kind you eat off of!)

Simple Table Commands:

The table above shows some of the On-line classes a student must complete to attain a Webmasters Certificate. But it does more than that, it helps organize the data into informational blocks. Here is what the underlying source code looks like.

<table>
<tr>
     <td>CIS-16 HTML</td>
     <td>CIS-17 Java</td>
</tr>

<tr>
     <td>CIS-5 DMTML</td>
     <td>CIS-17A JavaScript</td>
</tr>
</table>

• <TABLE></TABLE> this pair of flags start and end the entire table. If you are working on a table that refuses to show up in your Web browser look for a missing closing table tag - </TABLE>.
• <CAPTION></CAPTION> places a caption over your table. In my example the caption is "On-Line Classes".
• <TR></TR> declares a table row.
• <TD></TD> declares a Table Data cell

Remember tables are nothing more than playing with building blocks. You can start out small and get progressively more advanced. Let's dress up our table a bit.

Some Intermediate Table Commands

Here a list of some of the new command we will be using (in table format, of course!)

Activating Cells for Links

You can use table to organize words, images and even links as in the table below. Which is some of my favorite place to get and review software.

• <TD> declares the start of the cell
• <A HREF> declares the creation of a link
• Description - Tell the viewer where they are going (Kind of a nice thing to do.)
• </A> end the declaration of the link
• </TD> completes the cell

Placing Images Inside Cells

This is a technique I use a a lot to align images in relation to the text I want people to follow along with. I especially use it when I am trying to step someone through a procedure. Here's an example.

	Coalinga, California on a clear summer's day.
The local mountain range taken with a blue filter. Makes for a cold dreary looking day.

Here the source code:

<table width="58%" border="1" cellspacing="10" align="center">
<tr>
<td width="33%"><img src="coalinga.jpg" width="203" height="130"></td>
<td width="67%"><font color="#3366FF"><b><font size="5">Coalinga, California on a clear summer's day.</font></b></font></td>
</tr>
<tr>
<td width="33%"><font color="#000099"><b><font size="5">The local mountain range taken with a blue filter. Makes for a cold dreary looking day.</font></b></font></td>
<td width="67%"><img src="moutians.jpg" width="203" height="130"></td>
</tr>
</table>

Remember if I wanted to heighten the effect I could always change the border setting to 0.

Anything can and will go inside a table, even another table. Learning to use tables effectively takes time, but I promise you it is time well spent. Are there advanced table commands? Come on, I know your 're ready.

Advanced Table Commands

This section of the lesson will deal with only three command. They can be very powerful and add just the right touch of added control to fill out your background on table techniques.

Spanning Columns

Let's look at the simple table below.

As you can see our title line didn't exactly make it out of the first cell. In order for the text to SPAN the three COLUMNS we need to use a table flag called <COLSPAN> and specify the number of column we want to span. Let's look at the table a second time, but using the <COLSPAN> command.

Here's the command line that fixed our problem.

<TD COLSPAN="3">

In other words take the contents of this cell and let it span three columns.

Spanning Rows

Here another example using the <ROWSPAN> command.

Specifying an Exact Table Width

There will be tine when you want to specify the exact width of a table to ensure it is viewed as you intended. Using percentages helps keep cells somewhat equal between different browsers and monitors. Let's look at the table below.

Here is the source code that did the work.

<CENTER>
<TABLE WIDTH=75%>

<TR>
<TD>This table is taking up 75%</TD>
<TD>of the screen's space and is</TD>
<TD>in the center of the screen</TD>
</TR>

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

</TABLE>
</CENTER>

The two key lines that do the work are <TABLE WIDTH=75%> in which the width of the table is set to 75% of the screen width. And the <CENTER> command which says center everything that follows on the screen.

Changing a Table Cell Color

You can change the color of the cells inside the table for emphasis. Although I do not suggest you go to quite the extent I did here. Changing the colors is easy, but I suggest you stick to very basic colors to avoid to many conflict with various browsers and monitor settings. You can use either words like "YELLOW" or the Hex equivalent of "#FFFF00". It is safer to use the Hex numbers.

Here is the code that did it:

<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=%4>
<TD BGCOLOR="#ffff00">Yellow Stars
<TD BGCOLOR="#00ff00">Green Clovers
<TR>
<TD BGCOLOR="#ff00ff">Purple Moons
<TD BGCOLOR="00ffff">Blue something or other...
</TD>
</TR>
</TABLE>

Changing the Color of the Text

Here's the code the did it:   

At least here's the top left cell.

<TD BGCOLOR="#ffff00"><FONT COLOR="#800517">Yellow Stars</FONT>

You can look at the source code to see the rest of the table. Again it is best not to go to wild and to always watch your background color vs. your text color. I think you will agree the white text on the light blue background is not the best choice I could have made.

Create a calendar for the month of August of this year* (table) with the following activities:

• Every Monday: A planning meeting with your boss a 10:00 a.m.
• Every Friday: A department meeting at 3:00 p.m.
• August 1st: Initial meeting with Jones Inc. on a new Web site 1:30 p.m.
• August 8th: Follow up meeting with Jones Inc. 9:00 a.m.
• August 15th: Strategy meeting on Jones account (gathering company information)
• August 22st: Logo presentation to Jones Inc.
• August 29th: Final contract negotiations with Jones. Inc

Table parameters:

• Save table as wk4asgn.html
• Set table width to 100% of display area
• Modify each cell in the table, changing the cell for Sundays to 16% of the table width, and make the remaining cells 14% of the table.
• Insert the days of the week in the cells of the table header row starting with Sunday
• Make the table border equal to 5
• Align the date to the top of the cell and make a different color from the text

*Table in example is based on August 2007

Here's how I did it.

Material for this lesson has been adapted from the HTML GOODIES site created by Joe Burns located at http://www.htmlgoodies.com/