Tables Part III

Tables
Part III

Here is simple page that displays a 5 day schedule.

Within each day, events are listed.

The schedule is 3 columns. The day of the week spans the three columns and has a background color of silver. In the second row, the date is in a smaller font and the room cell spans two columns.

The times are in a <TH VALIGN=TOP> container.

Example 2

Supposed you wished to create a page where you had a name, a logo, three pages to link to along with an e-mail link. The following table could present such a heading:

The Name Goes Here

My
Logo
Here Page link 1

Page Link 2

Page Link 3

Email Us

The HTML for this page is:

<TABLE BORDER=2 width=100% bgcolor=silver>
<TR>
	<TH align="left" colspan=2>
		<FONT SIZE="+2">The Name Goes Here </FONT></TH>
</TR>
<TR>
	<TD rowspan=3 align=center valign=center>
		<FONT SIZE="+3" COLOR="#408080">My<BR>Logo<BR>Here</FONT>
	</TD>
	<TD align=center>
		<FONT COLOR="#004080">Page link 1</FONT>
	</TD>
</TR>
<TR>
	<TD align=center><FONT COLOR="#004080">Page Link 2</FONT></TD>
</TR>
<TR>
	<TD align=center>
		<FONT COLOR="#004080">Page Link 3</FONT>
	</TD>
</TR>
<TR>
	<TD colspan=2 align=center><FONT COLOR="#808000">Email Us</FONT></TD>

</TR>
</TABLE>

By using the default background color and setting the border to zero, one can make the items appear to float around the page.

Example 3

In this example, you can see how using nested tables along with the background colors can make for intresting configurations.

K & R
Web Page Developers

Services

Professional Pages

Custom CGI

Logo Design

Research

Javascript

The source the above table is:

<TABLE BORDER=0 width=100% align=center cellpadding=0 cellspacing=0 bgcolor=beige>
<TR>
<TD rowspan=2 >
	<IMG SRC="images/krwpd.gif" WIDTH="302" HEIGHT="190">
</TD>
<TD align=center valign=center  bgcolor="#808080">
	<FONT SIZE="+3" COLOR="#804000" FACE="Arial Rounded MT Bold">K & R</FONT>
	<BR> <FONT COLOR="#800000" FACE="Arrus BT">Web Page Developers</FONT>
</TD>
</TR>
<TR>
<TD align=center valign=center bgcolor="#408080">
	<TABLE BORDER=0 cellpadding=0 cellspacing=0>
	<TR>
		<TH align="left" bgcolor="#808040">
		<FONT COLOR="#FFFF80" FACE="Courier New" size="-1">Services</FONT>
	</TH>
	</TR>
	<TR><TH align=center bgcolor="#C0C0C0">Professional Pages</TH></TR>
	<TR><TH align="center" bgcolor="#C0C0C0"> Custom CGI </TH></TR>
	<TR><TH align="center" bgcolor="#C0C0C0"> Logo Design</TH></TR>
	<TR> <TH align="center" bgcolor="#C0C0C0"> Research </TH> </TR>
	<TR> <TH align="center" bgcolor="#C0C0C0"> <EM>Java</EM>script </TH> </TR>
	</TABLE>
</TD>
 </TR>
</TABLE>

Example 4

In this page that makes heavy use of background colors and nested tables.

Note how within a cell, another table is used and how it is positioned within the cell.

These nested tables also make use of the WIDTH= to shrink them. When using a nested table, the width when specified in percent is that of the cell its self.

The graphics are also aligned within the cells. Since the cells are of different colors, you can see where cells span.

Example 5

Creating a flush righ copyright or disclaimer type statement is easily accomplished with a nested table.

A nested table is needed because if you use the <P ALIGN=RIGHT> container, multiple lines will not align left as can be seen from:

This is easily fixed by creating a table with one cell. That cell is aligned right and within the cell there is a table with one (could be more) cells.

©R. Glass
All Rights Reserved
glassr@sunynassau.edu

The HTML for the above is:

<TABLE BORDER=0 width=100%>
<TR>
<TD align=right>
	<TABLE BORDER=0>
	<TR>
	<TD>
		<FONT COLOR="#004040" size=-1>©R. Glass<BR>
		All Rights Reserved<BR>
		glassr@sunynassau.edu </FONT>
	</TD>
	</TR>
	</TABLE>
</TD>
</TR>
</TABLE>

What is critical above is the WIDTH=100% and the ALIGN=RIGHT on its <TD> tag on the outer table.

Example 6

Nesting of the tables is used to create a paneled effect in this example.

I am not going to discuss the entire structure but note of is placing a frame about an image with the following code:

<table border=5>
<tr>
	<td>
        <IMG SRC="images/kandr2.gif" WIDTH="183" HEIGHT="216">
	</td>
</tr>
</table>

By nesting this within another table, a raised (or depressed) picture frame effect can be generated.

Example 7

One of the more novel ideas I have seen with tables is some work done by some people called Cybertowers on a page belonging to OT-Online. . By nesting tables and making judicous use of borders, cellspacing and cellpadding, an apartment complex was generated.

Before running out and trying this, I would suggest using all images within the tables. The reason for this being that font size differnces either within a particular bowser or due to a setting could ruin the tower effect.

Example 8

It is possible to make an image wrap around text as can be see by this example. As can be seen here:


	Place your text here (or another table)

First, take the image you wish to wrap and and break it into horizontal and vertical componenents and
Create a two by two table with zero cellspacing and cellpadding. <TABLE CELLPADDING="0" CELLSPACING="0" border=0 width=100%>
Place the horizontal image in a <TD> that spans the two cells. You must align this cell bottom. You may also need to align the image.
```
<TR>
<TD align="left" colspan=2 valign=bottom>
<IMG SRC="cur1a.gif" WIDTH="494" HEIGHT="92" border=0 align=top>
</TD>
</TR>
```
In the second row, the first <TD> is
```
<TD align="left" valign=top>
<IMG SRC="" border=0 WIDTH="131" HEIGHT="176" align=bottom>
</TD>
```
The image within the cell has a vertical alignment equal to top.
As stated, you may have to align the image. When an image has an alignment of top, that means the top of the image is aligned with the text baseline (you move the image down). An align of bottom means the bottom of the image is aligned with the text baseline.