IUPUI integrated images

Web by Design logo
Home Tutorials Resources Kudos CV

 

 

Web Tables

Tables can be used for a variety of things. Be creative in your use of tables on home pages: calendars, charts, "tabbed" lists, and "button bars."

Simple tables are comprised of three primary tags:

<TABLE>
<TR>
<TD>

These indicate: table, table row and table cell, respectively. These basic tags can be augmented with options. For example, you can specify the width of the cell's border, the distance between the cells, and the distance between the information in the cell and the cell itself. You can also specify how many rows or columns a given cell should span. You can indicate a caption for table if you'd like.

Example table code might look like:

<CENTER><TABLE BORDER="1" CELLPADDING="5" CELLSPACING="2">
<CAPTION>Your Title Here</CAPTION>
<TR>
<TD>Table Data</TD>
<TD>More Table Data</TD>
</TR>
<TD>More Table Data</TD>
<TD>Table Data</TD>
</TR>
</TABLE>
</CENTER>

The sample code above would result in the following table:

Your Title Here
Table Data More Table Data
More Table Data Table Data

The remainder of this page are some sample tables that have been created for use on home pages. Choose the menu option VIEW : Source to see how they vary from the previous example.

 

Sample One—row span cell & wide borders

Center Design Sponsored by:
Center for Teaching & Learning
E-Mail to:
opd@iupui.edu
URL: http://www.hypermedia96.iupui.edu/home.html Last update: April 8, 1996

 

Sample Two—"tabbed columns"

  Meals Lodging
Contiguous United States $24.00/day Actual
Japan, China, Taiwan, United Kingdom, and Germany $50.00/day Actual
Other Foreign $30.00/day Actual

 

Sample Three—"attention box"

Copyright Management Center
IUPUI University Library, UL 1125
755 West Michigan Street
Indianapolis, IN 46202-5195

TEL: (317) 274-4400
FAX: (317) 278-2300

E-Mail: copyinfo@iupui.edu

 

Sample Four—column span cell

Supplies and Expenses
10. Office Supplies $x,xxx
11. Telephone (long-distance only) $xxx
12. Duplicating $x,xxx
13. Mailing  
14. Laboratory Expendables $xxx
15. Total Supplies and Expenses $xx,xxx

 

Sample Five—a navigation bar with caption

A navigation bar caption
Web by Design Center for Teaching & Learning Indiana University School of Nursing

 

Sample Six—putting it all together

Life In Indy
Indianapolis, Indiana Things to Do in May Things to Do in Dec
Plant Garden Hang Christmas Lights
Avoid 16th & Georgetown Discontinue Diet until Jan
Throughout the Year
Dispense Hugs Smell Roses Smile

For more information about tables, check out the Tables page from www.w3.org.

For another great source for tables, check out the TableMaker. TableMaker gives you a fill-in-the-blank way to create a table, test it, then save the coding that created it to insert into your own html page.

Return to:
Beyond HTML Basics, Creating Tables

 

HomeReturn Home

alid HTML 4.01 Transitional Valid CSS