Isn't it time you
updated your site?

HTML Tables

You might think of tables as being a simple spreadsheet format, but in HTML, they are probably the most versatile tags you can use. In addition to using them to display straightforward tables, you can also use them to:

Tables can also become quite complex to mark up, so it's well worth learning how to use them and what you can do with them.

-Basic Structure of HTML Tables-

Each of these tags offers a number of attributes, allowing you to control the size or alignment of cells in the table. For a complete list of table-related tags and their attributes, see:
The HTML 3.0 specifications for tables
http://www.w3.org/pub/WWW/MarkUp/html3/tables.html

-Examples-

The markup for each examples is displayed directly after it. If one of these examples respresents a table you can use, you can return to this page, highlight the sample markup, copy and paste it into your own page, then edit the text.

Table 1: A simple table with a BORDER attribute

<P><TABLE BORDER="1">
<TR>
<TD>ANIMAL</TD>
<TD>VEGETABLE </TD>
<TD>MINERAL</TD>
</TR>
<TR>
<TD>cats</TD>
<TD>asparagus</TD>
<TD>quartz</TD>
</TR>
<TR>
<TD>dogs</TD>
<TD>chard</TD>
<TD>iron</TD>
</TR>
</TABLE></P>

Table 2:CELLPADDING=5 CELLSPACING=5 & CAPTION

CELLPADDING & CELLSPACING are attributes of the TABLE DATA tag that control the size of each cell. CELLPADDING controls the interior size of the cell, and CELLSPACING controls the distance of the cells from one another.

CAPTION adds a comment outside of the table.

<P>
<TABLE BORDER=2 CELLPADDING=5 CELLSPACING=5>
<CAPTION ALIGN=top><B><I>Scattergories Entries: Letter G</I></B></CAPTION>
<TR><TH>Things at a Football Game</TH>
<TH>Things in a Medicine Cabinet</TH>
<TH>Reasons for being late</TH></TR>

<TR><TD>Gargantuan men</TD>
<TD>Gleem toothpaste</TD>
<TD>Gored by a bull</TD></TR>

<TR><TD>Goalposts</TD>
<TD>Glycerine</TD>
<TD>act of God</TD></TR>

<TR><TD>Grass</TD>
<TD>Gel (for hair)</TD>
<TD>'Gator nearly bit my leg off</TD></TR>
</TABLE></P>

Table 3: No Border CELLPADDING=5

You can control the size of the border around a table or delete it altogether. Borderless tables are a means of using the table tags to produce something like columns or tab keys.

<P>
<TABLE CELLPADDING=5>
<CAPTION ALIGN=top><B><I>Scattergories Entries: Letter G</I></B></CAPTION>
<TR><TH>Things at a Football Game</TH>
<TH>Things in a Medicine Cabinet</TH>
<TH>Reasons for being late</TH></TR>

<TR><TD>Gargantuan men</TD>
<TD>Gleem toothpaste</TD>
<TD>Gored by a bull</TD></TR>

<TR><TD>Goalposts</TD>
<TD>Glycerine</TD>
<TD>act of God</TD></TR>

<TR><TD>Grass</TD>
<TD>Gel (for hair)</TD>
<TD>'Gator nearly bit my leg off</TD></TR>
</TABLE></P>

Table 4: Using Table tags to create a simple text box.

You can also use this as a simple way of making rectangular images look like buttons.

<P><TABLE BORDER=3 CELLPADDING=3>
<TR>
<TD><B><FONT SIZE="5">Table Tag Examples</FONT></B>
</TD></TR></TABLE> </P>

Table 5: Defining the size of a table with the WIDTH attribute

<TABLE BORDER=3 CELLPADDING=4 WIDTH=100%><TR><TD ALIGN=center><B><FONT SIZE="5">Table Tag Examples</FONT></B></TD></TR></TABLE>

Table 6: Using tables to create newspaper columns of text

<P><TABLE WIDTH=100% CELLSPACING=5>
<TR><TH>What is this?</TH>
<TH>Why would you do this?</TH>
<TH>Details and drawbacks:</TH></TR>

<TR VALIGN=top><TD WIDTH=34%>HERE'S WHERE THE TEXT FOR THE 1ST COLUMN GOES</TD>

<TD WIDTH=33%> HERE'S WHERE THE TEXT FOR THE 2ND COLUMN GOES</TD>

<TD WIDTH=33%> HERE'S WHERE THE TEXT FOR THE 3RD COLUMN GOES</TD></TR>

</TABLE></P>

Table 7: Controlling Images

You may notice that if you have a long line of text next to an image, the text doesn't center well next to the image.

<P><TABLE><TR>
<TD><IMG SRC="http://www.lib.berkeley.edu/TeachingLib/HTML/Images/smallmona.jpg" ALT=""></TD>
<TD ALIGN=center><FONT SIZE="5"><B>Using a table to gain control over the image and text is how you handle that problem.</B></FONT></TD>
</TR></TABLE></P>

Table 8: More image control

<P><TABLE><TR>
<TD><IMG SRC="http://www.lib.berkeley.edu/TeachingLib/HTML/Images/smallmona.jpg" ALT=""></TD>
<TD ALIGN=center><FONT SIZE="5"><B>You can also use this method to center text between two images. Be sure to use the ALIGN=RIGHT attribute on one of the images.</B></FONT></TD>
<TD ALIGN=right><IMG SRC="http://www.lib.berkeley.edu/TeachingLib/HTML/Images/smallmona.jpg" ALT=""></TD>
</TR></TABLE></P>

Table 9: Item 2 has the COLSPAN=2 attribute.

<P><TABLE BORDER=2>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE> </P>

Table 10: Item 1 has the ROWSPAN=2 attribute, Item 2 has the COLSPAN=3 attribute.

<TABLE BORDER=2>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD COLSPAN=3>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>

How you might use this:

The example above is Table 10, just with more complex contents of within each cell. The only change is that Item 2 (HSP Workshops) has been aligned to the center.

Copyright©1996 University of California, Berkeley.Used with permission.

[ HTML Basics ] [ Headlines ] [ Paragraphs ] [ Links ] [ Free Links ] [ Mail-to ] [ Bold Italic ] [ Font Color ] [ Font Size ] [ Background Image ] [ Graphics ] [ Background Color ] [ Aligning Text ] [ Aligning Images ] [ HTML -Adding Audio ] [ HTML - Frames ] [ HTML Tables ] [ Meta Tags ] [ Forms ] [ Mouse Over ] [ Mega Search ] [ Browser Support ]

[ Webdesign ] [ Banners and Graphics ] [ Promotional Services ] [ HTML Tutorials ] [ Consulting ] [ Hosting ] [ Domain Registration ] [ WIN PRIZES!! ]

Webmaster-at-Large:     webmasteratlarge@planetwebdesign.com  

™
®PLANETWeBDESIGN TECHNOLOGIESº© 

  PO Box 22157  Knoxville, Tennessee 37933-0157

Telephone:    865-300-3804      FAX:    865-692-9247