Tables

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.

Twelfth Night	As You Like It	Much Ado About Nothing
Comedy of Errors		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):

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	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

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.

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	Shakespeare's Plays		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>

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

Drawing Pictures

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

I've never found any practical use for this, but it's kind of cool. The   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

HTML by Robert Delaney
rdelaney@aurora.liunet.edu

<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>

<TD width=110>	<TD width=200>	<TD width=300>
<TD height=50>
<TD height=100>