The B. Davis Schwartz Memorial Library

TABLES

Tables let you arrange text or graphics into rows and columns. On a more sophisticated level, they're a powerful tool for creating an interesting layout for your page by positioning text and graphics just about anywhere you want. They're also probably the most complicated thing in HTML, so you may want to come back to this section after you've become comfortable with the basics.

Start off with the <TABLE> tags (I'll discuss the border command later):

<TABLE border>


</TABLE>

Mark off each row with the <TR> tags. In this case, we want three rows:

<TABLE border>

<TR>
</TR>

<TR>
</TR>

<TR>
</TR>

</TABLE>

Each row is divided into datacells with the <TD> tags to make up the columns. We want three datacells in each row:

<TABLE border>

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

</TR>

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

</TR>

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

</TR>

</TABLE>

Put your text or graphics in each datacell:

<TABLE border>

<TR>
<TD>Twelfth Night</TD>
<TD>As You Like It</TD>
<TD>Much Ado About Nothing</TD>
</TR>

<TR>
<TD>Comedy of Errors</TD>
<TD><IMG src="happy.gif" alt="sample graphic" width=50 height=50></TD>
<TD>Love's Labors Lost</TD>
</TR>

<TR>
<TD>Merry Wives of Windsor</TD>
<TD>A Midsummer Night's Dream</TD>
<TD>Two Gentlemen of Verona</TD>
</TR>

</TABLE>

The result looks like this:

Twelfth Night As You Like It Much Ado About Nothing
Comedy of Errors sample graphic Love's Labors Lost
Merry Wives of Windsor A Midsummer Night's Dream Two Gentlemen of Verona

Note that inside the datacell, the text size is reset to the default, and the color will be the one specified in the <BODY> tag. If you want to change the look, you must place the appropriate text appearance tags inside each datacell.



Browser Problems

Not all browsers will display tables. In one of these browsers, the above HTML will display like this:

Twelfth Night As You Like It Much Ado About Nothing Comedy of Errors sample graphic Love's Labors Lost Merry Wives of Windsor A Midsummer Night's Dream Two Gentlemen of Verona

This makes the information in the table virtually incomprehensible to the user, especially if your table contains rows of numbers that are supposed to line up in a certain way. However, by putting a little extra care into the construction of the table, this problem can be avoided. One solution is to place a paragraph tag <P> at the beginning of each datacell. Or you can place a line break <BR> at the end of each datacell. You can also combine the <P> and <BR> to create a fancier alternate display:

<TABLE border>

<TR>
<TD><P>Twelfth Night<BR></TD>
<TD>As You Like It<BR></TD>
<TD>Much Ado About Nothing<BR></TD>
</TR>

<TR>
<TD><P>Comedy of Errors<BR></TD>
<TD><IMG src="happy.gif" alt="sample graphic" width=50 height=50></TD><BR>
<TD>Love's Labors Lost<BR></TD>
</TR>

<TR>
<TD><P>Merry Wives of Windsor<BR></TD>
<TD>A Midsummer Night's Dream<BR></TD>
<TD>Two Gentlemen of Verona<BR></TD>
</TR>

</TABLE>

In a browser that supports tables, this will display exactly the same as the first example. But in a browser that does not support tables, it will now display like this:

Twelfth Night
As You Like It
Much Ado About Nothing

Comedy of Errors
sample graphic
Love's Labors Lost

Merry Wives of Windsor
A Midsummer Night's Dream
Two Gentlemen of Verona

In some cases, it just may not be possible to create a meaningful alternate display, but in most cases it will be. Try to keep your webpage accessible to as many people as possible.



Table Commands

Several commands can be placed inside the <TABLE> tag to control the table's appearance. Any or all of these commands can be used at once, but the examples below will show only the command being discussed. As always, not all of these features will be supported by all browsers.


Cellpadding

The cellpadding command determines the number of pixels wide the margins will be inside each datacell.

<TABLE border cellpadding=6>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

<TABLE border cellpadding=12>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona



Cellspacing

The cellspacing command determines the number of pixels in between each datacell.

<TABLE border cellspacing=6>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

<TABLE border cellspacing=12>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona



Border

The border command causes the lines to be displayed around the rows and datacells. It also determines the number of pixels wide the border outside the table will be.

<TABLE border> or <TABLE border=1>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

<TABLE border=10>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

<TABLE border=25>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

<TABLE> or <TABLE border=0>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

When the border is turned off, you can see the potential that tables have for placing things on the page exactly where you want them. The footer at the bottom of this page uses tables to arrange the text and graphics.

Borders were intended to be used on the default gray background where a highlight and shadow make them appear to be "carved" onto the page. On a colored or graphic background, they may not look as nice.


Width and Height

The table automatically adjusts itself to the size that it needs to be in order to hold its contents. You can override this by specifying the number of pixels wide and high it will be. (Avoid making it wider than 640 pixels, or it may not fit on everyone's screen.) An alternative method would be to specify the percentage of the screen width that you want the table to use. At 640x480 resolution, 200 pixels and 45% will appear about the same size. At higher resolutions, 200 pixels will appear to be smaller.

<TABLE width=200>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

<TABLE width=45%>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

<TABLE width=600>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

<TABLE width=900>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

<TABLE width=600 height=500>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona



Positioning the Table on the Page

Normally, text will be above or below the table. The align command allows text to be placed along side a table. Hspace and vspace control how many pixels of horizontal or vertical space will be around it. (See the discussion of hspace and vspace in the graphics section for more examples). The entire table can be placed inside the <CENTER> tag.


<TABLE align=left hspace=12>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona
Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures.










Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona
<TABLE align=right>

Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures.







<CENTER> <TABLE> ... </TABLE> </CENTER>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona



Color

You can use hexadecimal numbers to set the background color of all the datacells.

<TABLE bgcolor="#FF0000">

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

Be careful with the colors that you choose. Suppose that the page background is white. You set the datacell background to be black and the inside text to be white. Browsers that don't support this feature will then be displaying white text on the white page background.


Datacell and Row Commands

The following commands let you control what happens in each individual datacell. In addition, all of the text layout and text appearance tags can be used inside datacells. Datacells can also contain graphics, links, lists, and even other tables.


Text Alignment

Align controls the horizontal alignment of the text or graphic inside the datacell (left, right, center). Valign controls the vertical alignment (top, middle, bottom):

<TD align=left
valign=top>

<TD align=center
valign=top>

<TD align=right
valign=top>

<TD align=left
valign=middle>

<TD align=center
valign=middle>

<TD align=right
valign=middle>

<TD align=left
valign=bottom>

<TD align=center
valign=bottom>

<TD align=right
valign=bottom>

Align=left and valign=middle are the default settings if you don't use this command to specify. These commands can also be placed inside the <TR> tag to control all the datacells in that row.


Table Headers

<TH> can be used in the place of <TD> to define a datacell that is the header of one of the rows or columns. It will cause the text to be bold and centered.

Thus <TH>...</TH> means the same thing as:
<TD align=center><B>...</B></TD> but with less typing on your part.

Comedies

Tragedies
Histories

Twelfth Night

Hamlet
Richard III

As You Like It

King Lear
Henry V

Comedies

Twelfth Night
As You Like It

Tragedies

Hamlet
King Lear

Histories

Richard III
Henry V



Datacell Width and Height

The table automatically adjusts the datacells to the size that they need to be in order to hold their contents. Sometimes this can cause a column or row to be a different size from the others, or the text to wrap to another line when you wanted it all on one line, or something else to not look as nice as you want it to. You can override the automatic sizing of individual datacells by specifying the number of pixels wide and high each datacell will be or by specifying the percentage of the table width each datacell will be. Avoid making the total size wider than 640 pixels, or it may not fit on everyone's screen.

<TD width=25%>

<TD width=75%>

<TD width=110>

<TD width=200>
<TD width=300>

<TD height=50>



<TD height=100>





Before:

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

After: <TD height=50>

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

Sometimes, the complexity of what you're trying to do causes the datacells to still display the wrong size even with the width and height commands set correctly. In these cases, you can try some of the tricks in the indenting and positioning section. These can also be used the force the datacell to a particular size. The one pixel GIF is particularly popular for this purpose.

Of course, you cannot make two datacells in the same column be different widths or two datacells in the same row be different heights. However, this kind of effect can be achieved with the colspan and rowspan commands discussed below.


Colspan and Rowspan

Colspan will make a datacell span horizontally over more than one column:

Shakespeare's Plays

Twelfth Night

Hamlet
Richard III

As You Like It

King Lear
Henry V

<TABLE border cellpadding=6 cellspacing=6 width=500>
<TR>
<TD colspan=3 align=center><B>Shakespeare's Plays</B></TD>
</TR>

<TR>
<TD><P>Twelfth Night<BR></TD>
<TD>Hamlet<BR></TD>
<TD>Richard III<BR></TD>
</TR>

<TR>
<TD><P>As You Like It<BR></TD>
<TD>King Lear<BR></TD>
<TD>Henry V<BR></TD>
</TR>
</TABLE>

Rowspan will make a datacell span vertically over more than one row:

Shakespeare's Plays

Twelfth Night
Hamlet

Richard III

As You Like It

King Lear

Henry V

<TABLE border cellpadding=6 cellspacing=6 width=500>
<TR>
<TD rowspan=3 align=center><P><B>Shakespeare's Plays</B></TD>
<TD>Twelfth Night<BR></TD>
<TD>Hamlet<BR></TD>
</TR>

<TR>
<TD><P>Richard III<BR></TD>
<TD>As You Like It<BR></TD>
</TR>

<TR>
<TD><P>King Lear<BR></TD>
<TD>Henry V<BR></TD>
</TR>
</TABLE>



It can take a bit of mental calculation to figure out how to lay out the colspans and rowspans so that the datacells end up where you want them. You may want to draw the finished table on paper first. Once you have the hang of it, you can combine them for a variety of designs:

SHAKESPEARE'S PLAYS

Comedies

Tragedies

Twelfth Night

Love's Labors Lost

Hamlet

Othello

As You Like It

Comedy of Errors

King Lear

Macbeth

<TABLE border cellpadding=6 cellspacing=6 width=600>
<TR>
<TD colspan=4 align=center><B>SHAKESPEARE'S PLAYS</B></TD>
</TR>

<TR>
<TD colspan=2 align=center width=300><P><B>Comedies</B><BR></TD>
<TD colspan=2 align=center width=300><B>Tragedies</B><BR></TD>
</TR>

<TR>
<TD><P>Twelfth Night<BR></TD>
<TD>Love's Labors Lost<BR></TD>
<TD><P>Hamlet<BR></TD>
<TD>Othello<BR></TD>
</TR>
<TR>
<TD><P>As You Like It<BR></TD>
<TD>Comedy of Errors<BR></TD>
<TD><P>King Lear<BR></TD>
<TD>Macbeth<BR></TD>
</TR>
</TABLE>



SHAKESPEARE'S
PLAYS

Comedies

Tragedies

Twelfth Night

Love's Labors Lost

Hamlet

Othello

As You Like It

Comedy of Errors

King Lear

Macbeth

He wrote lots of other plays besides these

<TABLE border cellpadding=6 cellspacing=6>
<TR>
<TD rowspan=3 align=center><P><B>SHAKESPEARE'S<BR> PLAYS</B></TD>
<TD colspan=2 align=center><P><B>Comedies</B><BR></TD>
<TD colspan=2 align=center><P><B>Tragedies</B><BR></TD>
</TR>

<TR>
<TD><P>Twelfth Night<BR></TD>
<TD>Love's Labors Lost<BR></TD>
<TD><P>Hamlet<BR></TD>
<TD>Othello<BR></TD>
</TR>
<TR>
<TD><P>As You Like It<BR></TD>
<TD>Comedy of Errors<BR></TD>
<TD><P>King Lear<BR></TD>
<TD>Macbeth<BR></TD>
</TR>

<TR>
<TD colspan=5 align=center><P><I>He wrote lots of other plays besides these</I><BR></TD>
</TR>
</TABLE>



If you're feeling really bold, you can try stuff like this:

Twelfth Night

Romeo and Juliet
Hamlet
Othello
King Lear

Shakespeare's
Plays

Macbeth

As You Like It
Comedy of Errors
Henry V
Love's Labors Lost
The Tempest
Richard III

<TABLE border cellspacing=6 cellpadding=6 width=550 height=300>

<TR>
<TD align=center><P><I><B>Twelfth Night</B></I><BR></TD>
<TD align=center><I><B>Romeo and Juliet</B></I><BR></TD>
<TD align=center><I><B>Hamlet</B></I> <BR></TD>
<TD align=center><I><B>Othello</B></I> <BR></TD>
</TR>

<TR>
<TD align=center><I><B>King Lear</B></I><BR></TD>
<TD colspan=2 rowspan=2 align=center><font size=6><P><I><B>Shakespeare's <BR>Plays</B></I></font> <BR></TD>
<TD align=center><P><I><B>Macbeth</B> </I><BR></TD>
</TR>

<TR>
<TD align=center><I><B>As You Like It</B></I><BR></TD>
<TD align=center><I><B>Comedy of Errors</B></I><BR></TD>
</TR>

<TR>
<TD align=center><I><B>Henry V</B></I><BR></TD>
<TD align=center><I><B>Love's Labors Lost</B></I><BR></TD>
<TD align=center><I><B>The Tempest</B></I><BR></TD>
<TD align=center><I><B>Richard III</B></I><BR></TD>
</TR>

</TABLE>



sample graphic sample graphic
sample graphic sample graphic
sample graphic

<TABLE border cellpadding=0 cellspacing=10>

<TR>
<TD colspan=2 align=center><IMG src="happy.gif" alt="sample graphic" width=210 height=100></TD>

<TD rowspan=2 align=center><IMG src="happy.gif" alt="sample graphic" width=100 height=210></TD>
</TR>

<TR>
<TD rowspan=2 align=center><IMG src="happy.gif" alt="sample graphic" width=100 height=210></TD>

<TD align=center><IMG src="happy.gif" alt="sample graphic" width=100 height=100></TD>
</TR>

<TR>
<TD colspan=2 align=center><IMG src="happy.gif" alt="sample graphic" width=210 height=100></TD>
</TR>

</TABLE>

Sometimes, the complexity of what you're trying to do causes the datacells to display the wrong size so that they don't line up the way you want. In this case, you can try some of the tricks in the indenting and positioning section to force the datacell to a particular size. The one pixel GIF is particularly popular for this purpose.

Keep in mind that the more complex you make your table, the less sense it will make in browsers that don't support tables or support only a few of these features.


Datacell Color

You can use hexadecimal numbers to set the background color of each of the datacells.

<TD bgcolor="#RRGGBB">

Twelfth Night

As You Like It
Much Ado About Nothing

Comedy of Errors

sample graphic
Love's Labors Lost

Merry Wives of Windsor

A Midsummer Night's Dream
Two Gentlemen of Verona

Be careful with the colors that you choose. Suppose that the page background is white. You set the datacell background to be black and the inside text to be white. Browsers that don't support this feature will then be displaying white text on the white page background.


Drawing Pictures

If you want to be obnoxiously clever, you can put all these commands together to draw pictures:

   
 
 
 
 
 
 
 
 
 
 
 
 

<TABLE width=500 cellspacing=0 cellpadding=0>
<TR>
<TD width=200 rowspan=7 bgcolor="#0000BB">&nbsp;</TD>
<TD width=300 bgcolor="#FF0000">&nbsp;</TD>
</TR>
<TR>
<TD width=300 bgcolor="#FFFFFF">&nbsp;</TD>
</TR>
<TR>
<TD width=300 bgcolor="#FF0000">&nbsp;</TD>
</TR>
<TR>
<TD width=300 bgcolor="#FFFFFF">&nbsp;</TD>
</TR>
<TR>
<TD width=300 bgcolor="#FF0000">&nbsp;</TD>
</TR>
<TR>
<TD width=300 bgcolor="#FFFFFF">&nbsp;</TD>
</TR>
<TR>
<TD width=300 bgcolor="#FF0000">&nbsp;</TD>
</TR>
<TR>
<TD colspan=2 bgcolor="#FFFFFF">&nbsp;</TD>
</TR>
<TR>
<TD colspan=2 bgcolor="#FF0000">&nbsp;</TD>
</TR>
<TR>
<TD colspan=2 bgcolor="#FFFFFF">&nbsp;</TD>
</TR>
<TR>
<TD colspan=2 bgcolor="#FF0000">&nbsp;</TD>
</TR>
<TR>
<TD colspan=2 bgcolor="#FFFFFF">&nbsp;</TD>
</TR>
<TR>
<TD colspan=2 bgcolor="#FF0000">&nbsp;</TD>
</TR>
</TABLE>

I've never found any practical use for this, but it's kind of cool. The &nbsp; is an entity for a nonbreaking space which displays as a blank space. Each datacell must have something in it, or it may not display correctly.



Previous Section
Table of Contents
Next Section



Return to the Library Home Page

HTML by Robert Delaney
rdelaney@aurora.liunet.edu



     Return to Long Island University Home Page                        
                Return to  C.W. Post Campus Home Page