Document Actions
Web Page Creation: Part 6, HTML and Tables
Learn how to construct and format tables using HTML. This is the sixth of seven technical documents about how to create a Web page.
Introduction
An HTML table is a construct used to store data in an efficient, easy-to-read manner. As you gain skill in producing tables with HTML, you will discover that tables are not only good for representing tabular data but they can also be useful for formatting Web documents.
Table Tags
<TABLE></TABLE>
This is the tag used to signify the beginning (and end) of a table. On its own, the <TABLE> tag is useless and requires the use of other tags to make it useful. These other tags include:
| <TR></TR> | The Table Row tag, when nested within <TABLE></TABLE>, inserts a row into the table. |
| <TD></TD> | The Table Data tag, when nested within <TR></TR>, inserts a cell into the table. |
Important Notes About Tables
- <TR></TR> must be nested within <TABLE></TABLE>. Otherwise, it is a useless tag.
- <TD></TD> must be nested within <TR></TR>. Otherwise, it is a useless tag.
- The number of <TR></TR> tags nested within the <TABLE></TABLE> represents the number of rows in your table. If your HTML document has five <TR></TR> tags, then the table will have five rows.
- The number of <TD></TD> tags nested within a <TR></TR> tag represents the number of cells in that row.
- To insert text inside of a cell, insert the text within a <TD></TD> pair.
- To insert a picture inside of a cell, insert the <IMG> tag within a <TD></TD> pair.
Example 1
Figure 1 shows a basic example of how the table tags can be used.
Figure 1. Source code #1
Figure 2. shows how the table looks when viewed with a Web browser.
Figure 2. Source code #1 displayed on a Web browser
The HTML code includes three <TR></TR> tags, which means that the table has three rows when viewed through a Web browser. Each <TR></TR> tag has four <TD></TD> tags nested within it. As Figure 3 shows, each row contains four cells.
Table Attributes
These attributes are used to alter tables:
<TABLE></TABLE> Attributes
Attribute | Description |
|---|---|
| ALIGN | Tells the Web browser where the table should be aligned horizontally on the Web page. Possible values of LEFT, CENTER, and RIGHT. |
| BGCOLOR | Specifies a background color for the table. |
| BORDER | Renders a border around the table using the integer value as a measurement of the number of pixels wide the border should be. Any positive integer can be used with this attribute. |
| CELLPADDING | Provides spacing between data in a cell and the border of the cell. Takes any positive integer as a value. Setting this attribute equally affects every cell in the table. |
| CELLSPACING | Provides spacing between cells. Takes any positive integer as a value. Setting this attribute equally affects every cell in the table. |
| WIDTH | Specifies the table width in pixels. Takes any positive integer as its value. A percentage measurement can also be used to specify the table width across a percentage of the browser window. |
<TR></TR> Attributes
Attribute | Description |
|---|---|
| ALIGN | Possible values are LEFT, CENTER, and RIGHT. This attribute tells the Web browser how the cells of this row should be horizontally aligned. |
| BGCOLOR | Specifies a background color for the table row. This background color overrides the background color of the table. |
| HEIGHT | Specifies how tall the current row should be. Takes either a positive integer or a percentage as a value. |
| VALIGN | Tells the browser how to vertically align the cells of the row. Possible values of TOP, MIDDLE, BOTTOM, and BASELINE. |
<TD></TD> Attributes
Attribute | Description |
|---|---|
| ALIGN | Tells the browser how to horizontally align the cell contents. Possible values are LEFT, CENTER, and RIGHT. |
| BGCOLOR | Specifies a background color for the table row. This background color overrides any color set in both the table tag and the table row tag. |
| COLSPAN | Sets the number of columns the current cell should span. Possible values are any positive integer numbers, up to the number of columns in the table. |
| ROWSPAN | Sets the number of rows the current cell should span. Possible values are any positive integer numbers, up to the number of rows in the table. |
| VALIGN | Tells the browser how to vertically align the contents of the cell. Possible values of TOP, MIDDLE, BOTTOM, and BASELINE. |
| WIDTH | Tells how much of the row the current cell should fill. Takes either a positive integer or a percentage as a value. |
Example 2
Figure 3 displays the source code used to render the next example.
Figure 3. Source code #2
Figure 4 shows how the table appears when viewed in a Web browser.
Figure 4. Source code #2 displayed on a Web browser
The only attributes used here are the WIDTH and BORDER attributes from <TABLE></TABLE>, and the WIDTH attribute from <TD></TD>.
Notice that the border of the table is set to 5, the width of the table is set to 500 pixels, and the widths of the cells are not all the same. The first, second, and fourth columns were each set to fill 30% of the table width, while the third column was set to fill only 10%. Thus, percentages can be used to specify different widths for each column of the table.
Example 3
In the third table, the elements of the first row are centered in their cells by using the code from source code #3 (Figure 5). Figure 6 shows how the table appears when viewed in a Web browser. Note that an ALIGN attribute has been added to the first <TR></TR> tag from the previous example to center the contents of the first row in the table:
Figure 5. Source code #3
Figure 6. Source code #3 displayed on a Web browser
Example 4
Source code #4 (Figure 7) shows an example of the COLSPAN attribute of the <TD></TD> tag to stretch the row across the four columns below it. In the table shown in Figure 8, notice that the first row has only one cell. All the elements in the cells of the second row are aligned on the right side of the cells by inserting ALIGN="RIGHT" into the <TR></TR> tag for that row.
Finally, in the bottom row, the content of the first cell is aligned to left, while the content of all the other cells is aligned to the right of their respective cells. This is accomplished by inserting ALIGN="LEFT" into the first <TD></TD> of this last row, but inserting ALIGN="RIGHT" into the <TR></TR> tag. This example shows that attributes set for specific cells can override attributes set for the row in which the cell is located.
Figure 7. Source code #4
Figure 8. Source code #4 displayed on a Web browser
If you would like to learn more about HTML, look at the other handouts in this series:
- Part 1, HTML Basics
- Part 2, Formatting Text
- Part 3, HTML and Images
- Part 4, Using HTML to Create Lists
- Part 5, Creating Links Using HTML
- Part 6, HTML and Tables
- Part 7, Web Directories and FTP Procedures
For More Help
If you need more assistance, please feel free to ask the CIS Support Staff in any Open Access Lab, or call Help Desk Central at (979) 845-8300.