`Introduction to Tables -- 465: Fall 98

Introduction to Tables -- 465: Fall 2001

Some additions, including a few links to real world tables., Enjoy!

When you're ready for it, Here's my reference table of TABLE tags and hints -- pretty heavy stuff.

Tables gave word processors some of the qualities of spreadsheets and databases. Originally they were used to separate data into columns and rows and to show patterns of variation or repetition in time, quantity, and other values.

Although not part of the original HTML specification, Tables were added very early and have been seized upon as the fundamental tool for traditional HTML layout in controlling whitespace and margins, synchronizing blocks and columns of text, and executing graphics layouts on the screen.

But recently the W3C CSS1 and CSS2 specifications have taken over many of the layout functions for margins and indents through styles and stylesheets instead of through tables.

Tables are coded and painted on the screen from top to bottom (rows) and then from left to right (columns). Most viewers do not mind scrolling (or paging) down for a tall table, but wide tables that require scrolling to the right (off the screen) are annoying and contrary to habit.

Long and complex tables will cause an obvious delay as the browser calculates how to paint the screen. There are two ways to shorten the delay: divide long tables into several short ones to fill the first screen or two rapidly, and specify the pixel sizes of the cell widths and, if possible, heights.

There are many excellent books and articles for learning more about intermediate HTML features (including tables).

NOTE: Test tables which display correctly in Internet Explorer, which is quite tolerant of tag omissions, may fail to display correctly (if at all) with Netscape, which is far stricter in handling errors.

When you're ready for it, Here's my reference table of TABLE tags and hints -- pretty heavy stuff.

1: Preformatted Text Instead of Tables

Use <PRE> -- instead of a TABLE -- to hold together existing columns of imported text. Columns separated by a mixture of tabs and spaces will display unpredictably. If possible, convert all the tabs to spaces to preview the result. The default font for PRE is monospaced type but colors, sizes, and other attribute tags may be used. 

<PRE>
-------------------------------------------
Name       Height     Weight     Eye Color
-------------------------------------------
Alison      5'4"       140         Blue
Tom         6'0"       165         Blue
Susan       5'1"        97         Brown
-------------------------------------------
</PRE>

2: The Basic Table Tags

The basic tags are <TABLE>, <TR> for table row, and <TD> for table detail (columns). The closing </TABLE> tag is required, but the other closing tags are recommended.

Basically, the resulting Table will have one row for each TR tag and one column for each TD tag. We will see later that cells can also include multiple rows or columns.

By default, the browser will make the rows and columns large enough to contain the data for the largest cell in each group.

Here's the code for a Table of three rows and two columns, showing the border for clarity. The code for this table appears on the right. Notice that the default alignment is left, center,

Top left Top right
Middle left Middle right
Bottom left Bottom right 

 <TABLE BORDER>
 <TR>
 <TD> Top left
 <TD> Top right
 <TR>
 <TD> Middle left
 <TD> Middle right
 <TR>
 <TD> Bottom left
 <TD> Bottom right
 </TABLE>

Here's the same table without a BORDER.

Top left Top right
Middle left Middle right
Bottom left Bottom right 
 <TABLE>
 <TR>
 <TD> Top left
 <TD> Top right
 <TR>
 <TD> Middle left
 <TD> Middle right
 <TR>
 <TD> Bottom left
 <TD> Bottom right
 </TABLE>

3: The Border tag:

Omitting the BORDER tag is the same as BORDER=0. Including the BORDER tag without an explicit value is the same as BORDER=1. The value of the BORDER tag may be increased, but it easily becomes intrusive. Here's BORDER=10:

Table Border 10 Weight

Name Height Weight Eye Color
Alison 5'4" 140 Blue
Tom 6'0" 165 Blue
Susan 5'1" 97 Brown

4: Cellpadding and Cellspacing

The spacing of cells can be controlled by CELLPADDING within each cell or CELLSPACING between each cell. The differences between these two tags is greatest when the borders are visible.

The CELLPADDING tag goes within the TABLE tag:
<TABLE BORDER CELLPADDING=10>

Name Height Weight Eye Color
Alison 5'4" 140 Blue
Tom 6'0" 165 Blue
Susan 5'1" 97 Brown

The CELLSPACING tag goes within the TABLE tag:
<TABLE BORDER CELLSPACIGN=10>

Name Height Weight Eye Color
Alison 5'4" 140 Blue
Tom 6'0" 165 Blue
Susan 5'1" 97 Brown

5: The TH Tag: Top and Side Headings:

The <TH> tag is a centered, boldened <TD> tag.

To run Table Headings across the top row, all the cells in the first row should be TH rather than TD.

Drive Plate Front Cover
39-49 19-23

To make a Table with side headings, the first cell in each row should he a table header (TH).

Drive Plate 39-49
Front Cover 19-23

6: Horizontal and Vertical Alignment

Use ALIGN=LEFT, CENTER or RIGHT for horizontal alignment.

Use VALIGN=TOP, MIDDLE, or BOTTOM for vertical alignment.

Alignment Options
Horizontal Alignment
 
Left        
 		  
    Center    
 		  
      Right
 
Vertical Alignment
Top
 
 		 Middle  

  Bottom

7A: Autosizing Column Height & Row Width size.

If cell dimensions are not specified, the rows and columns will expand automatically to fit the largest members of each group. The borders are on for clarity and BGCOLOR=TAN appears in the BODY tag..

Top left yada yada yada yada yada yada yada yada yada Top right
Middle left Middle right
Bottom left Bottom right
yada yada yada
yada yada yada

7B: Cellpadding without Cellspacing

If there seems to be not enough space between the cells and their borders, let's add CELLPADDING=5. If there's too much white space between cells, lets set CELLSPACING=0. We're also overriding the color of one cell.

Top left yada yada yada yada yada yada yada yada yada Top right
Middle left Middle right
Bottom left Bottom right
yada yada yada
yada yada yada 


<TABLE ALIGN=CENTER BGCOLOR=TAN BORDER=1 CELLPADDING=5 CELLSPACING=0>
<TR>
<TD> Top left yada yada yada yada yada yada yada yada yada
<TD> Top right
<TR>
<TD> Middle left
<TD> Middle right
<TR>
<TD BGCOLOR=ivory> Bottom left
<TD> Bottom right<BR>
yada yada yada <BR>
yada yada yada
</TABLE>

7C: Cells separated by color (no borders, spacing, or padding)

Let's give each cell a different color, and null the padding and spacing values without a border.

This is a sample table
Title 1 Title 2
Top left yada yada yada yada yada yada yada yada yada Top right
Middle left Middle right
Bottom left Bottom right
yada yada yada
yada yada yada

7D. Specifying table and cell widths.

This is another sample table in which the default sizing -- just enough to handle the data -- is changed by arbitrarily specifying the width of a cell as a percentage.

Title 1 Title 2 (width=50%)
Top left yada yada yada yada yada yada yada yada yada Top right
Middle left Middle right
Bottom left Bottom right
yada yada yada
yada yada yada

Table elements specified as percentages will flow to fill the available screen space in the case of flexible text contents. Although table elements specified as pixels give more control over layouts, they make assumptions about available monitor size which may be too optimistic (exceeding the screen) or too cautious (leaving unwanted empty space). (Not illustrated.)

One way to insert whitespace into layout is to specify the moderate width, usually 5% to 10%, of empty (or nearly empty) column or cells. To avoid irregularities in how some browsers display "empty" cells, insert an invisible entity or tag, such as a non-breaking space (&nbsp;) or break tag (<BR>). (Not illustrated.)

8: The Caption Tag

Let's add a CAPTION line, some table headers (TH), center the text in the light-colored cell, and align it right in the cell above it.

This is a sample table
Title 1 Title 2
Top left yada yada yada yada yada yada yada yada yada Top right
Middle left Middle right
Bottom left Bottom right
yada yada yada
yada yada yada 


<TABLE ALIGN=CENTER BGCOLOR=TAN BORDER=1 CELLPADDING=5 CELLSPACING=0>
<TR>
<TD> Top left yada yada yada yada yada yada yada yada yada
<TD> Top right
<TR>
<TD> Middle left
<TD> Middle right
<TR>
<TD BGCOLOR=ivory> Bottom left
<TD> Bottom right<BR>
yada yada yada <BR>
yada yada yada
</TABLE>

9A: A Center Text Divider with Cellspacing

To make blocks of text easier to read, add a center divider between two columns of text with the CELLSPACING tag. Since the border would be intrusive in a large block of text, is omitted here. .

NOTE 1: You must divide the text columns manually since HTML has no automatic column wrap.

NOTE 2: Note: Add a <BR> tag in empty cells to defeat a bug in some browsers which prevents empty columns from being formed correctly.

yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada 


<TABLE BORDER=0 CELLSPACING=7>
<TR>
<TD>yada yada yada ...
<TD><BR>
<TD>yada yada yada ...
</TABLE>

9B: Larger Cellspacing Values and Empty Columns

Here's the effect of increasing the value to CELLSPACING=15 and adding three empty columns (left, right, and center) for more whitespace.


yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada 


<TABLE BORDER=0 CELLSPACING=15>
<TR>
<TD><BR>
<TD>yada yada yada ...
<TD><BR>
<TD>yada yada yada ...
<TD><BR>
</TABLE>

10: Specifying Column Widths as Percentages

More complex column layouts are possible by using the WIDTH attribute in text and spacer columns.

The width percentages here for the left and right margins are 15% and 10% respectrively, with a smaller center divider of 5%. No border, cellpadding, or cellspacing tags are used. Notice how the wider side margins and narrower columns improve readability. The columns are slightly off-center to creat a dynamic effect.


yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada 


<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD width=15%><BR>
<TD width=35%> yada yada yada ...
<TD width=5%><BR>
<TD width=35%> yada yada yada ...
<TD width=10%><BR>
</TABLE>

11: The "pullquote" or "callout" text:

Tables can control columns anmd rows for interesting layouts with different background colors, text colors, text fonts, and text sizes.

Here the left margin is used for a "callout" text or "pullquote" highlight a selected passage. The table values are Cellpadding=5 and Cellspacing=10.

In addition, the top headline is 4 columns wide and is colored gray, and the side headline uses reversed italic type.

NOTE 1: ordinarily top and side headlines would not be used together in the same table.

NOTE 2: Since the BGCOLOR is usually ignored by printers, reversed "white" text will not print. To work around this bug, set the text value not to "white," which is "#FFFFFF" expressed in hexidecimal (16-base) values, use but to a very high but not absolutely white value, such as "#FEFEFE".

The skinny as never told before on yada yada yada!
The skinny and full lurid details never told before on yada yada yada! yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada 


<TABLE BORDER=0 CELLPADDING=5 CELLSPACING=10 WIDTH=100%>
<TR>
<TH COLSPAN=4 align=right><font size=+1 FONT COLOR=gray>
The skinny ...
<TH><BR>
<TR>
<TD width=15% BGCOLOR="gray">
<FONT COLOR="white"><i><font size=+1>
The skinny ...
</i></font></font>
<TD width=35%> yada yada yada ...
<TD><BR>
<TD width=35%> yada yada yada ...
<TD width=15%><BR>
</TABLE>

12: Multiple Columns and Rows for a layout with a graphic.

There are three columns of text and two small spacer columns, each just 24 pixels wide. The headline straddles all five columns. The width of the text columns follow the amount of text to be contained. Cellspacing is 10, and borders are turned on for demonstration. Some tags are quoted in the text. Teh iomage, stretched to 100 pixekls, loses definition.


Title here runs across 5 visible & invisible columns

ROWSPAN=2 Text 1: yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada //yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
Text 2: yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
Text 3: yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
COLSPAN=3

Good old Rutgers!

13: Table of Contents: Icons with Text:

There are seven columns here: three for spacers, two for images, and two for texts. No borders are used but Cellspacing=5 and Cellpadding=5 are used here. (Experiment on you own with other values.)

The Headline Goes Here, Spanning Across All Seven Columns
[Spacer] [Icon] [Text] [Spacer] [Icon] [Text] [Spacer]

yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada

yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada

yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada 


<TABLE CELLSPACING=5 CELLPADDING=5>
<TR>
<TH colspan=7><font size=+1>The Headline Goes Here ...</font>
<TR>
<TD><I>[Spacer]</I>
<TD><I>[Icon]</I>
<TD><I>[Text]</I>
<TD><I>[Spacer]</I>
<TD><I>[Icon]</I>
<TD><I>[Text]</I>
<TD><I>[Spacer]</I>
<TR><P>
<TR>
<TD><BR>
<TD><IMG SRC="1766.gif" VALIGN=TOP ALIGN=LEFT>
<TD BGCOLOR=ivory>yada yada yada ...
<TD><BR>
<TD><IMG SRC="1766.gif" VALIGN=TOP ALIGN=LEFT>
<TD BGCOLOR=tan>yada yada yada ...
<TD><BR>
<TR><P>
<TR>
<TD><BR>
<TD><IMG SRC="1766.gif" VALIGN=TOP ALIGN=LEFT>
<TD BGCOLOR=ivory>yada yada yada ...
<TD><BR>
<TD><IMG SRC="1766.gif" VALIGN=TOP ALIGN=LEFT>
<TD BGCOLOR=tan>yada yada yada ...
<TD><BR>
<TR><P>
<TR>
<TD><BR>
<TD><IMG SRC="1766.gif" VALIGN=TOP ALIGN=LEFT>
<TD BGCOLOR=ivory>yada yada yada ...
<TD><BR>
<TD><IMG SRC="1766.gif" VALIGN=TOP ALIGN=LEFT>
<TD BGCOLOR=tan>yada yada yada ...
<TD><BR>
</TABLE>

14: A thin vertical headline

To obtain the vertical effect use <p> separators between single characters. 



H

e

a

d

l

i

n

e
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada

yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada

yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada

yada yada yada yada yada yada yada yada yada yada yada yadayada yada yada yada yada yada yada yada yada yada yada yada yada yada yada 


<TABLE CELLSPACING=10 CELLPADDING=10 WIDTH=80% ALIGN=CENTER>
<TR>
<TD WIDTH=5% BGCOLOR="RED" VALIGN=TOP><FONT COLOR="#FEFEFE">
<PRE><FONT size=+1><B>
<P>
H<p>
e<P>
a<P>
d<P>
l<P>
i<P>
n<P>
e<P>
</B></font></PRE>
<TD>
yada yada yada ...<P>
yada yada yada
<P> yada yada yada ...
<P>
yada yada yada
</table>

15: A Navigation bar using tables and style sheets.

Here tables are used to create text navigation buttons usually made as GIFs.

In Netscape 4.x and other recent browsers which recognizes Stylesheets, the hot links appear in reverse type and without underlines. This effect is not visible in Netscape 3.x and other older browsers which will revert to default blue color for these links. Be careful not to use BGCOLOR=blue in this situation in older browsers: the blue links on a blue background become invisible.

english-newark.rutgers.edu/runedge-top.html" target="_top">
    NO FRAMES    
 http://english-newark.rutgers.edu/index.html" target="_top">
    FRAMES    
 http://english-newark.rutgers.edu/runedge-top.html" target="_top">
    HOME    
http://english-newark.rutgers.edu/help.html" target="bottom">
    HELP    
english.rutgers.edu/. http://camden-www.rutgers.edu/dept-pages/english/" target="_top">
   CAMDEN     


<STYLE>
<!--
h6 {color: #FEFEFE; font-weight: bold; font-family: Verdana, Arial;
text-decoration: none; }
-->
</STYLE>

<CENTER>
<TABLE BGCOLOR="red" border=0 cellpadding=0 cellspacing=2>
<TR>
<TD valign=top><A HREF="http://english-newark.rutgers.edu/runedge-top.html" target="_top">
<FONT FACE="Verdana, Arial, Helvetica"><h6> &nbsp;&nbsp;&nbsp;NO FRAMES &nbsp;&nbsp;&nbsp;</h6></a></TD>

<TD valign=top><A HREF="http://english-newark.rutgers.edu/index.html" target="_top">
<FONT FACE="Verdana, Arial, Helvetica"><h6> &nbsp;&nbsp;&nbsp;FRAMES &nbsp;&nbsp;&nbsp;</h6></A></TD>

<TD valign=top><A HREF="http://english-newark.rutgers.edu/runedge-top.html" target="_top">
<FONT FACE="Verdana, Arial, Helvetica"><h6>&nbsp;&nbsp;&nbsp; HOME &nbsp;&nbsp;&nbsp; </h6></A></TD>

<TD valign=top><A HREF="http://english-newark.rutgers.edu/help.html" target="bottom">
<FONT FACE="Verdana, Arial, Helvetica"><h6> &nbsp;&nbsp;&nbsp;HELP &nbsp;&nbsp;&nbsp;</h6></A></TD>

<TD valign=top><A HREF="http://english.rutgers.edu/" target="_top">
<FONT FACE="Verdana, Arial, Helvetica"><h6> &nbsp;&nbsp;&nbsp;N. BRUNS. &nbsp;&nbsp;&nbsp;</h6></A></TD>

<TD valign=top><A HREF="http://camden-www.rutgers.edu/dept-pages/english/" target="_top">
<FONT FACE="Verdana, Arial, Helvetica"><h6> &nbsp;&nbsp;&nbsp;CAMDEN &nbsp;&nbsp;&nbsp;</h6></a></TD>
</TABLE>
</center>

Supplement:

16A. Rowspan and Colspan Examples

Normally the correct number of rows and columns will provide a rectangular table. If there are excessive or insufficient cells, the browser will guess at the proper fill as in the bottom right cells below.

NormalA NormalB NormalC ROWSPAN 5A v
COLSPAN 2A Col 1A
ROWSPAN 3A COLSPAN 2B
NormalDNormalE
NormalFNormalG
COLSPAN 3A 


<table border cellspacing=0 cellpadding=5>
<tr>
<td>NormalA
<td>NormalB
<td>NormalC
<td rowspan=5 bgcolor=gray><font size=+2><b>ROWSPAN 5A</b></FONT>
<tr>
<td colspan=2 bgcolor="red"><COLSPAN 2A>
<td>Col 1A
<tr>
<!-- TD Col 1B -->;
<td rowspan=3 bgcolor="yellow">;ROWSPAN 3A
<td colspan=2 bgcolor="red">COLSPAN 2B
<tr>
<!-- TD ROWSPAN=3 BGCOLOR="yellow" Rowspan 3A -->
<td>NormalD<td>NormalE
<tr>
<td>NormalF<td>NormalG
<tr>
<td colspan=3 bgcolor="green"><font color="pink">COLSPAN 3A
<TABLE>

16B: More Rowspan and Colspan

Serving Deserts
Cold Warm
Type Frozen Chllled Warm Hot
Frozen Yogurt Chllled Yogurt Warm Yogurt Hot Yogurt Old Yogurt 

<table border bgcolor=yellow cellspacing=0>
<tr>
<td><td colspan=4 valign=BOTTOM align=CENTER>
<font size=+1><b> Serving Deserts</b></font>
<tr>
<td></TD>
<td colspan=2 align=CENTER>Cold
<td colspan=2 align=CENTER>Warm
<tr>
<th rowspan=2>Type
<td>Frozen
<td>Chllled
<td>Warm
<td>Hot
<tr>
<td>Frozen Yogurt
<td>Chllled Yogurt
<td>Warm Yogurt
<td>Hot Yogurt
<td>Old Yogurt
</TABLE>

17A. Table Widths in Relative Percentages

The display sizes will fill a relative percentage of available space, which will depend on window sizing and browser and monitor characteristics.

Try changing window sizing or the default settings. Relative sizes will be maintained.

WIDTH=20%

WIDTH=40%

WIDTH=60%

WIDTH=80%

WIDTH=100%

WIDTH=120%

18. Table Widths as Absolute Pixels

The display sizes will follow pixel characteristics of each monitor. An image made for 480x600 displays will seem small on a high resolution monitor. Only part of an image made for a high resolution monitor can bs displayed on a 480x640 screen.

Try changing window sizing or the default settings. Absolute sizes will be maintained.

WIDTH=100

WIDTH=200

WIDTH=300

WIDTH=400

WIDTH=500

WIDTH=600

WIDTH=700

WIDTH=800

WIDTH=900

WIDTH=1000

WIDTH=1200

19. Wraparound text

A. Narrow table aligned left, close wrap-around text at right

Red Yellow Blue
Red Red Orange Purple
Yellow Orange Yellow Green
Blue Purple Green Blue

One way to add color to your Web pages is to add images; images can provide a splash of color in amongst the black and gray and white. Several extensions to HTML however, however, allow you also to change the colors of the page itself, including changing the background color of the page, changing the color of the text and links on that page, and to add "spot color" to individual characters on that page.

B. Narrow table aligned right, spaced wrap-around text at left
Notice effects of a) HSPACE=10, b) VSPACE=10, and c) <BR> in "empty" cell.


 Red Yellow Blue
Red Red Orange Purple
Yellow Orange Yellow Green
Blue Purple Green Blue

One way to add color to your Web pages is to add images; images can provide a splash of color in amongst the black and gray and white. Several extensions to HTML however, however, allow you also to change the colors of the page itself, including changing the background color of the page, changing the color of the text and links on that page, and to add "spot color" to individual characters on that page. One way to add color to your Web pages is to add images; images can provide a splash of color in amongst the black and gray and white. One way to add color to your Web pages is to add images; images can provide a splash of color in amongst the black and gray and white.

C.Table with left alignment, no wrap around due to <BR CLEAR=LEFT> tag

Red Yellow Blue
Red Red Orange Purple
Yellow Orange Yellow Green
Blue Purple Green Blue

 

<BR CLEAR=LEFT>
Test your browser to see if text wraps around or clears if TABLE relies on default (left) alignment.

One way to add color to your Web pages is to add images; images can provide a splash of color in amongst the black and gray and white. Several extensions to HTML however, however, allow you also to change the colors of the page itself, including changing the background color of the page, changing the color of the text and links on that page, and to add "spot color" to individual characters on that page.

20. Using small images

Vegetable Planting Schedule
Vegetable Planting Schedule
Vegetable Planting Time Transplants OK? Days to Maturity Varieties
Tomato May-June 55-90 Many; the most popular include:
  • Early Girl
  • Beefmaster
  • Celebrity
  • Roma
Carrot Mar-May 60-80
  • Gold-Pak
  • Hybrid Sweetness
Lettuce Mar-May, Aug-Sep 45,60
  • Salad Bowl
  • Black-Seeded Simpson

21. Table puzzle

How was the double underline done?

22. Some additional table tricks:

Use the WIDTH=20 and HEIGHT=20 tags in TD to create a paragraph indent, here combined with an oversized, bold initial letter.

Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada

23. Make a vertical rule that wll be the same height as the text by creating a narrow cell (WIDTH=1) with a black BGCOLOR.

yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada


yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada

24. When you're ready for it, Here's my reference table of TABLE tags and hints -- pretty heavy stuff.

Luckily for the beginner, the browser will automatically build a table with rows and columns of sufficient size to accommodate the data cells. Text inside cells will wrap to provide sufficient lines.

HTML tags are shown here in BLOCK CAPITALS.

Table Tags
NameTagDefaultsOptionsNotes
Table <TABLE> Left ALIGN=Right/Left 1 Closing </TABLE> required
Middle VALIGN=Top/Bottom
No Border BORDER=nBORDER defaults to 1
WIDTH 2Use percent or pixels
CELLSPACING=2CELLSPACING=n 3
CELLPADDING=1CELLPADDING=n
BGCOLOR="#nnnnnn" or name
Caption <CAPTION> Center, Top VALIGN=Bottom Closing </CAPTION> required
Table row <TR> Left ALIGN=Right/CenterValues apply to entire row
Middle VALIGN=Top/Bottom/Baseline
BGCOLOR"#nnnnnn" or name
Table data <TD> Normal, Left ALIGN=Center/right
Middle 4 VALIGN=Top/Bottom/Baseline
ROWSPAN=1ROWSPAN=n
COLSPAN=1COLSPAN=n
BGCOLOR="#nnnnnn" or name
Wrap on NOWRAP
WIDTH 2
Table header <TH > Bold, Center VALIGN=Left/Right otherwise identical to TH
Table © Heyward Ehrlich 1998

Notes

1 If a table appears surrounding by text, it will interrupt the text flow and take up the full screen width by default. To force text to flow alongside the Table, add ALIGN=LEFT or ALIGN=RIGHT within the TABLE tag.

2 WIDTH specifications for tables, rows, and cells can be given in percentages or pixels. For text, the beginner will find percentages easier to manage since less attention is needed to the user's window size and monitor characteristics. But for graphics, screen painting goes more smoothly if the pixel specification (usually WIDTH) is provided.

3 Using the BORDER tag raises the CELLSPACING default to 4.

4 The default VALIGN=middle may leave unwanted vertical space above text blocks. To avoid this, use the VALIGN=TOP tag.

Hints:

  1. Turn borders on when building or testing tables

  2. Tables may be nested. Often the outer table has no borders.

  3. Table cells accept Lists, Links, Forms, and a full range of HTML BODY elements

  4. TR and TH tags can be mixed anywhere, although usually TH is reserved for a set of top or side headers. In practice the closing /TR and /TH tags are often omitted, but for tight graphics work, be sure to include a closing tag on the same code line as the image data; if not, the browser may interpret the hard return before the next cell as an unwanted space.

  5. Since ALIGN=CENTER is not supported in the TABLE tag, put the table entirely inside <CENTER>...</CENTER> or <DIV ALIGN=CENTER>...</DIV> tags.

  6. BGCOLOR can be expressed as color names, such as black, white, etc., or as additive two-digit hexidecimal values (from 0 to F) for red-green-blue, where black="#000000," the three miminum hex values, which means no color, and white="#FFFFFF," the three maximum hex values, which means all color.

  7. Empty cells: To make a null cell (no borders), use <TD></TD>

  8. Empty cells: To make a hollow cell (just borders), use <TD><br></TD> or <TD>&nbsp;</TD>

Invisible gif spacers: are they magic? .

25. Real World Tables.

  • http://www.cnet.comCNET, originator of colored side margins
  • http://home.netscape.com Netscape as a portal
  • http://www.microsoft.coma visually interesting home page
  • http://www.sun.com/styleguide Sun's styleguide page
  • http://www.ibm.com IBM's home page
  • http://www.rutgers.edu Rutgers home page
  • http://www.yahoo.com Yahoo home page
  • http://www.zdnet.com Ziff-Davis net home page
  • http://www.nbci.com NBCi portal
  • http://www.about.com About portal
  • http://www.aol.com Main AOL page
  • http://www.apple.com Apple home page [End]

    26. Addenda: The Style Sheets Revolution and Tables

    • Prior to Style Sheets, tables reverted to the default font face, size, and color -- even though body tags changed the display characterist cics elsewhere in the file. To remedy this, font tags had to be placed rather tediousy in every cell in the table to control font characteristics.

      Now with style sheets, the TD font attributes and values can be stated just once for every cell in every table in the entire file.

    • Tables were formerly used along with invisible gifs for indenting, spacing, and alignment.

      Now style sheets have taken over control of margins and indents. These characteristics can be defined in classes which can be applied anywhere in the file. Standard margins and indents also can be assigned to external syle sheets which can be called by any file in the web site.

    • Tables were also used formerly as the only way to manage sidebars, callouts, and other layout features.

      Now style sheets can control either absolute or relative positioning of text blocks, their stacking, their visibility, and even their transparency.

    27. Using Tables to Control Browser Displays

    Code for the first line above -- Head takes up full screen width:
    <H2>27. Using Tables to Control Browser Inconsistencies in SPAN and DIV </h2>

    "27. Using Tables to Control Browser Displays"

    Code for the second line above -- Head takes up only enough width to contain text :
    <TABLE><TR><TD><H2>27. Using Tables to Control Browser Displays </h2> </TABLE>

    27A. Using Tables to Control Browser Rendering of DIV and SPAN Areas

    Three Hints:

  • Local difficulties with the display of DIV and SPAN areas often may be solved by enclosing them within tables.

  • On the other hand, global difficulties with the display of tables may often be solved by enclosing them within DIV or SPAN containers.

  • Interesting results may be obtained by using both the TABLE BORDER tag and the border attibute in a DIV or SPAN container.

    28. Tables within Tables within Tables ...

    A few hints:

  • Layout problems of alignment, display size, image-text combinations, and positioning often may be solved by nesting tables inside each other.

  • To nest tables make a TD cell the parent for a new child TABLE. Be sure to close each child and parent table in the correct place.

  • Nested tables will be slower to load than flat tables.

  • Netscape 6 is unforgiving about small errors in coding -- a complex table that draws correctly in IE5+ may produce a blank screen in NS6+ until the violations are removed. IE5+ assumes you are a careless coder, but NS6+ assumes you code carefully. Be sure to close all /TD and /TR elements correctly and to avoid any missing or extraneous table tags.

  • Although inserting child tables will usually correctly display to unexpected depths of nesting even beyond the second and third degree. check carefully in all the standard browsers (IE5+. NS4+, and NS6+) for any irregularities of display. Look especially for irregularites in handling face, color, and other style sheet instructions at higher degrees of nesting.

    29. When NOT to use a table

    This text sample could be aligned-right as 1:TABLE (border shown)
    1:TABLE:Minor corrections, revisions, and additions, Sept. 1, 2001

    <TABLE align=right border=1><TR><TD align=right>1:TABLE:Minor corrections, revisions, and additions, Sept. 1, 2001</table>

    but an easier way to code this for recent browsers is 2:DIV (no border here -- but one could be added using STYLE):

    2:DIV: Minor corrections, revisions, and additions, Sept. 1, 2001
    <div align=right> 2:DIV: Minor corrections, revisions, and additions, Sept. 1, 2001</div>