Home Site Map Gallery Your Two Cents Service Order

               

Home 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

Get Your Free E-Mail Account


Isn't it time you
updated your site?


WEB DEVELOPMENT
AID

 

 

 

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:

bullet

Create simple boxed headings

bullet

Display newspaper-style columns of text

bullet

Increase the amount of text that displays on the opening screen of any page

bullet

Gain more control over image placement on a page

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-

The Table tag

<TABLE> </TABLE>

signals the beginning and end of a table

The Table Row tag

<TR> </TR>

defines a row

The Table Data tag

<TD> </TD>

defines a single cell in the table; justifies to the left

The Table Header tag

<TH> </TH>

like Table Data, only it bolds and centers the text

The Caption tag

<CAPTION> </CAPTION>

creates a line of plain text above the table

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

ANIMAL

VEGETABLE

MINERAL

cats

asparagus

quartz

dogs

chard

iron

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

"Scattergories Entries: Letter G

 

Things at a Football Game Things in a Medicine Cabinet Reasons for being late

Gargantuan men

Gleem toothpaste

Gored by a bull

Goalposts

Glycerine

act of God

Grass

Gel (for hair)

'Gator nearly bit my leg off

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

Scattergories Entries: Letter G

 

Things at a Football Game Things in a Medicine Cabinet Reasons for being late

Gargantuan men

Gleem toothpaste

Gored by a bull

Goalposts

Glycerine

act of God

Grass

Gel (for hair)

'Gator nearly bit my leg off

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

Table Tag Examples

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

<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

What is this? Why would you do this? Details and drawbacks:

It's yet another table. You can also use tables to create something like columns of text on a page. If you'd like your page to look something like newspaper columns, you'd use the table tag to do it. This is a really

You want to be able to put as much information as you can on the first screen of any page, so that the user doesn't have to scroll through a long list.

Note that you can also put links in the text of your table data. You can also put lists or control the font size and color inside the table data.

You want to be sure the TABLE ROW is vertically aligned to the top, and you want to use the WIDTH attributes of the TABLE tag and the TABLE DATA tags to keep each column balanced and symetrical.

 

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




Using a table to gain control over the image and text is how you handle that problem.

<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

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.

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

Item 1

Item 2

Item 3

Item 4

Item 5

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

Item 1

Item 2

Item 3

Item 4

Item 5

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

Planetwebdesign Workshops

Week 1

bullet

Windows 95

bullet

Room rules

bullet

Get acquainted

Week 2

bullet

Design issues

bullet

HTML editors

bullet

FTP & UNIX

Week 3

bullet

Tables

bullet

Colors

bullet

Backgrounds

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

BizRate Customer Certified (GOLD) Site We are members of the Chamber or Commerce!

Verify our security!
Verify Our Security

Better Business!

OVER 28 MULTIPLE 
AOL Members Choice Award
AWARD WINNING SITES

 


Webmaster-at-Large:     webmasteratlarge@planetwebdesign.com  

Planet T-Shirt Logo
®PLANETWeBDESIGN TECHNOLOGIESº© 

  PO Box 22157  Knoxville, Tennessee 37933-0157

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

PlanetWebDesign LogoCopyright © 1998, 1999, 2000 PLANETWEBDESIGN TECHNOLOGIES, Inc. All rights reservedBye Bye!!