T3L5
Tables
Introduction
Tables enable web pages developers to present data in rows and columns. They also can be used to control the layout of objects on the page, and to manipulate white space.
When you finish this lesson, you should be able to:
- Add tables to a web page.
- Manipulate element placement within a table.
- State how tables can manipulate object placement on a web page.
This lesson is divided into the following sections:
- Adding Tables To A Web Page
- Manipulating Table Elements
- Using Tables to Manipulate Object Placement on a Web Page
Additional Resources
- The Compendium of HTML Elements [[ is an excellent reference to the different HTML tags, attributes and arguments. It is also a great reference for browser compatibility issues.
- The Bare Bones Guide to HTML [[
This short and sweet document lists nearly all the basic HTML tags.
- The Basic, Basic Table [[
The bare facts about tables.
Adding Tables to a Web Page
There are three basic units in any table: the table, the table row, and the table cell. The tags for these are:
Table: <table>
Table row: <tr>
Table cell: <td>
Here is a simple table:
[[Brett Bixler created these graphics. Permission for IST to use it is given]]
And here's the code:
<TABLE BORDER=1>
<TR>
<TD>
<P>Row 1, Column 1 cell</P>
</TD>
<TD>
<P> Row 1, Column 2 cell </P>
</TD>
<TD>
<P> Row 1, Column 3 cell </P>
</TD>
</TR>
<TR>
<TD>
<P> Row 2, Column 1 cell </P>
</TD>
<TD>
<P> Row 2, Column 2 cell </P>
</TD>
<TD>
<P> Row 2, Column 3 cell </P>
</TD>
</TR>
</TABLE>
Manipulating Table Elements
The Table tag can accept many arguments. Here are the most commonly-used ones.
align=left|right|center - lines the table up with the text flow
border=# - specifies the width (in pixels) of the border around the outside of the table. The default value is 1.
cellpadding=# - sets the white space (in pixels) between the cell border and the contents of the cell.
cellspacing=# - sets the space (in pixels) between cells.
There many additional arguments and tags that you can use to manipulate tables. See an HTML reference for more details, or visit the following sites:
- The Compendium of HTML Elements [[ is an excellent reference to the different HTML tags, attributes and arguments. It is also a great reference for browser compatibility issues.
- The Bare Bones Guide to HTML [[
This short and sweet document lists nearly all the basic HTML tags.
Just remember - not all browsers support all these additional commands.
Using Tables to Manipulate Object Placement on a Web Page
Tables were originally included in HTML as a way to display rows and columns of data, much as one would use a spreadsheet for display. However, developers soon discovered that tables could be used to control object placement on a web page as well. Used in this way, tables can:
- provide text alignment.
- provide a page template.
- provide a multipart image container.
Text Alignment
Tables can be used to emulate printed pages of text, complete with large white spaces. Look at the following example as it appears on a web page:
[[Uncle Sam graphic came from ArtToday site. Brett Bixler, registered member]]
Now look how it is really set up in a table:
Tables can be used to manipulate text and other objects so that no matter what browser and platform is used, the display is consistent and under the control of the designer.
Page Template
Extending the simple example above, some designers set up entire pages using tables. Thus, they can exert a great deal of control over how the page appears to the user. Multiple columns are easy to create, and one can even set up a navigation "bar" on one side of the page consisting of a single column.
Multipart Image Container
Tables can also be used to assist developing navigational features. For example, consider this graphic:
As one large graphic, the standard way to make the text at the bottom of the image "hot" would be to develop a server-side imagemap. In conjunction with a CGI script, you could make this graphic serve as a navigational bar.
Using tables is an alternative to this. If you break up the graphic image into tiny chunks, then display them in a table with cellspacing, padding, etc. set to zero, you can accomplish the same thing:
It is then easy to assign each cell as a hot spot with a hypertext link.
Tables Summary
Tables enable web pages developers to present data in rows and columns. They also can be used to control the layout of objects on the page, and to manipulate white space. This lesson was designed to introduce the basic mechanics of table placement within a web page.
When you finish this lesson, you should be able to:
- Add tables to a web page.
- Manipulate element placement within a table.
- State how tables can manipulate object placement on a web page.
A short summary of these topics are listed below. If you do not understand these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.
Adding Tables to a Web Page
There are three basic units in any table: the table, the table row, and the table cell. The tags for these are:
Table: <table>
Table row: <tr>
Table cell: <td>
manipulating Table Elements
The Table tag can accept many arguments. Here are the most commonly-used ones.
align=left|right|center - lines the table up with the text flow
border=# - specifies the width (in pixels) of the border around the outside of the table. The default value is 1.
cellpadding=# - sets the white space (in pixels) between the cell border and the contents of the cell.
cellspacing=# - sets the space (in pixels) between cells.
Using Tables to Manipulate Object Placement on a Web Page
Tables were originally included in HTML as a way to display rows and columns of data, much as one would use a spreadsheet for display. However, developers soon discovered that tables could be used to control object placement on a web page as well. Used in this way, tables can:
- provide text alignment.
- provide a page template.
- provide a multipart image container.
1