 |
|---|
Tables
HTML Tables
Objectives
By the end of this lesson, you will be able to:
- Create simple and complex HTML tables.
- Add or remove table border lines.
- Format table rows and cells using attributes.
Introduction to Tables
Frequently you will find that you need to align text and images, horizontally or vertically (or both) on a page. When you want to create the appearance of tabular or structured text, you can use the table tags provided in HTML. Useful and attractive grids can be created with an HTML table.
Figure 6-1 describes the individual elements that compose an HTML table. Each of these elements will be explored in this lesson.
The code for the table in the preceding figure could be written as follows:
<TABLE BORDER="1" CELLPADDING="5" CELLSPACINC="10">
<CAPTION>Table Diagram</CAPTION>
<TR>
<TH>Row 1 Cell 1</TH><TH> Row 1 Cell 2</TH>
</TR>
<TR>
<TD> Row 2 Cell 3</TD><TD ALIGN="center> Row 2 Cell 3</TD>
</TR>
</TABLE>
Element |
Tag |
Usage |
TABLE |
<TABLE> --- </TABLE> |
Required to create a table; it contains all the other table elements |
TABLE CAPTION |
<CAPTION> Table Diagram </CAPTION> |
Optional: used to add a caption to a table. By default, the caption appears above the table |
TABLE ROW |
<TR> --- </TR> |
Required: contains all data for the current table row. |
TABLE HEADER |
<TH> --- </TH> |
Optional: typically designates the top row or left column. By default, text in a header cell will appear bold and centered. |
TABLE DATA |
<TD> Row 1 Cell 1 </TD> |
Required, unless <TH> is being used. Table data tags enclose table cell contents. |
Table and Data Alignment Options
Frequently you will want to align cell content in a manner that differs from the default alignment. By default, table header cells are aligned to the center of the cell. Table data cells are aligned to the left by default.
As you can see, by default, cell contents are aligned vertically to the middle of the cell. You can change this for an individual cell or for an entire row. The attribute you use to specify horizontal alignment is ALIGN. For vertical alignment, use VALIGN.
The example on the left in Figure 6-13 sets the alignment of the entire row to "top," meaning all cell content in that row will start at the top of the cell. The example on the right specifies a vertical alignment only for the cell containing Tahiti . The cell to the right of Tahiti is already aligned to the top because it is completely full, so the appearance generated by either choice will match that shown in Figure 6-14. (The second row was left unchanged for contrast.)
So far, you have examined only tables with single lines of cell content. Now consider the example in Figure 9-12.
Tour Packages
| Destination | Description |
|---|---|
| Tahiti | You will enjoy five fun-filled nights among the Tah itan islands. The first night will be spent in Tahih. Nights two and trhee will be spent in Bora Bora. On night four, you will enjoy a sumptuos feast on Moorea. Your final night will be spent on the water off the island of Tahiti. |
| Virgin Islands | For this tour, the cruise ship will be your hotel. Stops are made at several of the most beautifl islands. At night, you will enjoy the sound of Caribbean festival music as you dine at our 24 hour buffet. |
Figure 9-12: Vertical alignment of cell content [See Figure 9-12 in pop-up broswer for easier HTML code viewing]
You can align the contents of any table cell to the left, right or center. In addition, you can align the table itself relative to the surrounding page text by adding the ALIGN attribute to the <TABLE> tag. Examine Figure 6-15.
Tables can float to the left or right of page text. In Figure 6-16, the page alignment of the table has been changed from left to right.
You also have the option to align the table to the center of the page, as shown in Figure 6- 17.
Table 6-2 outlines the various alignment attributes, and the table elements with which these attributes can be used.
| Element | Attribute | Value | Description |
|---|---|---|---|
<TR> |
VALIGN | top middle bottom |
Vertically aligns the contents of the cell or row to the top, center or bottom of the cell. The default alignment is middle |
| <TABLE> | ALIGN | left center right |
Horizontally aligns the contents of the table, cell(s) or row to the left, right or center. For tables and table data cells, the default alignment is left. For table header cells, the default alignment is center. |
| <CAPTION> | ALIGN | top bottom |
A caption can be added above your table. The caption is by default aligned to the top center about your table. You can specify "bottom" to have the caption appear below the table <table> |
Changing Height and Width of Table Elements
You can change the height or width of the table and individual cells by specifying pixel or percentage values.
Table Width = 450 pixels
| 154pxl width | 120 pxl width | 138 pxl width |
|---|---|---|
Table Width = 90% or 634pixls (in the case of this browser setting)
| 222pxl width | 174 pxl width | 201 pxl width |
|---|---|---|
In the preceding figure, the table rows increased in size because the HEIGHT attribute of the <TABLE> tag was set to "90%", meaning 80 percent of the browser window. Note that the new height was equally distributed among the various rows.
Column and Row Spanning
Sometimes you will want to apply a heading across several cells. In other cases, you may need one cell to span more than one row. Figure 6-22 demonstrates a cell that horizontally spans three columns, as well as a cell that vertically spans four rows. The table is displayed in an earlier version of the Netscape browser to demonstrate that older browsers support this feature.
Figure 9-12: Vertical alignment of cell content [See Figure 9-12 in pop-up broswer for easier HTML code viewing]
The following code demonstrates how this effect is accomplished by using the ROWSPAN and COLSPAN attributes.
<TABLE CELLSPACING=lO WIDTH="lOO%">
<TR><TH COLSPAN=3>Conservation.. .< /TH></TR>
<TR><TD ROWSPAN=4><IMG SRC="paloalto.gif"></TD>
<TH>Date</TH><TH>Activities</TH></TR>
<TR><TD>November 17</TDxTD>Discussion of ... </TD></TR>
<TR><TD>November 23</TD><TD>Naturelands hike ... </TD></TR>
<TR><TD>December 26</TD><TD>The movie ... </TD></TR>
</TABLE>
Most of the attributes and text have been removed to facilitate your focus on key tags. Note the COLSPAN and ROWSPAN attributes in bold and their effects on the table. The COLSPAN attribute value "3" identifies the number of columns that the cell will span. The ROWSPAN attribute value of "4" identifies the number of rows that the cell will span.