Much of the information that appears on the Web is of a commercial or technical nature that fits naturally into tables. Here, row and columnar arrangements of data can transform them into useful information simply on the basis of their organization. Consider, for example, the use of spreadsheets, possibly the most widely used method of data presentation. Tabular arrangements, often in and of themselves, can help the viewer sort through masses of data to understand their underlying structure and substance. Although the purpose here is less dramatic, you will find the use of tables a quite convenient method, not only of presenting tabular information, but of arranging and presenting your entire web pages as well. A Simple TableA web table, like any other table, contains rows and columns. More specifically, within HTML, a table contains columns within rows. That is, when you define a table, you specify a row then specify the columns (better referred to as cells) that comprise that row. This structure can be seen in the following code that defines a simple 3x3 table.
<TABLE>
The output from this table definitions is rendered in the browser as shown below:
The <TABLE >...</TABLE > tags define the extent of the table and must appear at the beginning and end of the table definitions. Within the <TABLE > tags are the table row <TR > tags, one for each row of the table. Finally, within each table row tag are coded the table data <TD> tags, one for each cell across the row. Table BordersIt's a simple matter to add borders to a table. All that is required is to include the BORDER parameter as part of the <TABLE> tag: <TABLE BORDER> to produce the default border around the table and surrounding each cell.
Table CaptionTables are captioned by using the <CAPTION> tag with its ALIGN=TOP|BOTTOM parameter (TOP is the default). The tag must appear inside the <TABLE> tag and its close tag </CAPTION> must be used. Any number of lines can comprise the caption, which is centered on the table. The following table specifications indicate a caption, but accept the default alignment at the top of the table:
<TABLE BORDER>
Table SizeThe table size is, by default, governed by the size of the data in its cells. That is, the width of a column or the length of a row is set by the amount of data in its largest cell. This can be clearly seen in the following table:
Later, you will learn how to override this default and specify exact sizes and formatting for rows and columns. For now, you can adjust the size of the table and provide more room within cells by using the WIDTH parameter. The width can be set to a certain number of pixels or, more likely, to a certain percentage of the browser window's width. For example, the following table has been defined with the table specification: TABLE BORDER WIDTH=75%. Note that the column with the widest text is still proportionately wider than the other columns.
BORDER SizeLet's now look as some of the parameters that control the appearance of borders and rules of a table. The table border can be set to a specific size through the BORDER=n parameter, which gives the width of the outside border in number of pixels. For example, the following table has it's border size set with <TABLE BORDER=5>:
By specifying a size, you can produce a three dimensional look to the table by adding shading around its outside edges. BORDER Color (Internet Explorer only)There are three ways to add color to borders. The BORDERCOLOR parameter renders the border in a single color on all sides of the table (eliminating the 3D look) and the rules separating the cells. For example, the specification <TABLE BORDER=5 BORDERCOLOR=RED> produces the following table:
However, you can assign individual colors to the dark (right and bottom) and light (left and top) portions of the border with the BORDERCOLORDARK and BORDERCOLORLIGHT parameters. For example, the specification <TABLE BORDER=5 BORDERCOLORDARK=RED BORDERCOLORLIGHT=SILVER> produces the table:
Note how the colors of the rules surrounding the cells are changed also by these specifications. The default value of BORDERCOLORDARK is GRAY and the default value of BORDERCOLORLIGHT is WHITE if you do not include either of these parameters. Background ColorA color can be specified for the background of the table using the BGCOLOR parameter. For example, the specification <TABLE BORDER=5 BGCOLOR=YELLOW> produces the following:
Background Picture (Internet Explorer only)Table backgrounds may be pictures as well as colors, just as you can provide a background texture for an entire page. This technique uses the BACKGROUND parameter in the same way as it is used in the <BODY> tag for a page--by specifying a gif or jpg file: <TABLE BORDER=5 BACKGROUND=texture.jpg>:
Table Rules (Internet Explorer only)In addition to the table border, you can control display of the rules between cells by using the RULES parameter in the <TABLE> tag. Three choices are: RULES=NONE to eliminate all rules surrounding cells, RULES=ROWS to display only the horizontal rules between rows, and RULES=COLS to only display the vertical rules between columns:<TABLE RULES=NONE>
<TABLE RULES=ROWS>
<TABLE RULES=COLS>
Table AlignmentAs with most other elements that appear on a page, a table can be positioned horizontally to align at the left of the window (default) or on the right. This specification is given by the ALIGN=LEFT|RIGHT parameter of the <TABLE >tag. The tag <TABLE ALIGN=RIGHT> produces the display you see here.
Note that the ALIGN parameter, just as it did with graphic images, permits text to wrap around the table. In this case, though, there is no comparable HSPACE or VSPACE parameter to control the amount of blank space surrounding the table. You can, though, use the <BR CLEAR=RIGHT> tag following the table specification to isolate the table and avoid word wrap around it. In order to center the table, you'll need to surround the entire table specification with the <CENTER>... </CENTER > tags. Cell PaddingCell padding refers to the amount of space surrounding the text within a cell. Without padding, text runs up against the rules separating the rows and columns. Cell padding is given in the <TABLE> tag by the CELLPADDING=n parameter, which denotes the number of pixels to leave between the text and the cell borders. The following tables give two examples:
Cell SpacingCell spacing refers to the amount of space, in pixels, between the cells of a table, or between the border and a cell. It is, in effect, the size of the rules between rows and columns. The following two tables illustrate use of the CELLSPACING=n parameter of the <TABLE> tag.
Row ColorsPrevious specifications have considered features of a table as a whole. Now, let's look at some of the attributes that can be applied to the individual rows of a table.One of those attributes is color. By using the BGCOLOR parameter in a table row tag <TR>, you can set the background color of the row:
<TABLE BORDER=5 CELLSPACING=5>
Row Textures and Rule Colors (Internet Explorer only)By the same token, you can apply a background image or texture to a row by using the <TR BACKGROUND=filename.ext> in the same way you do when applying a background to a page or entire table.Or, you can apply color to only the rules surrounding the cells in a row by using the BORDERCOLOR=color parameter within the <TR> tag. The following table sets a different border color for each of the rows:
If you wish, you can even adjust the colors of the dark (right and bottom) and light (left and top) portions of the rules. In this case use the BORDERCOLORDARK=color and BORDERCOLORLIGHT=color parameters with the chosen colors. Text Alignment within RowsBy default, any text that appears in a table is aligned horizontally to the left of a cell and vertically in the middle of a cell. This can be seen in the following two-cell table with different amounts of text in the columns. Notice the centered alignment in the left column (the right column is also center aligned but is not noticeable since the text fills the cell).
There are row specifications, however, to permit you to control this alignment. The <TR> tag uses the VALIGN parameter to provide four methods of vertical alignment: TOP, MIDDLE (default), BOTTOM, and BASELINE. These methods are illustrated below: <TR VALIGN=TOP>
<TR VALIGN=BOTTOM>
<TR VALIGN=BASELINE>
The BASELINE specification comes into play when there are different font sizes across a row. This parameter aligns the text in adjoining cells so that they share a common baseline to improve their appearance. Column and Row HeadingsThe <TH> (table header) tag functions like a table row <TR> tag. It defines a row in a table. At the same time, it can include specifications in the form of the COLSPAN=n parameter to combine columns along the row, primarily for the purpose of adding column headings that span more than one column. An example should clarify.
<TABLE BORDER=5 CELLSPACING=5>
Notice in the above code that four rows have been defined: the <TR> tags define the three rows of the body of the table, each containing three columns (TD); above them is a line of <TH> (heading) tags defining the initial row of the table. Each of the <TH> tags specifies the number of columns to span in order to provide room for a common heading over those columns, along with the heading text itself. As a result, you get a heading over the first two columns (COLSPAN=2) and a second heading over the last column (COLSPAN=1). The <TH> tag automatically emphasizes (bolds) the text of the heading. Likewise, you can span rows to provide room for row headings with the same <TR> tag, although this time you use the ROWSPAN=n parameter:
<TABLE BORDER=5 CELLSPACING=5>
Incidentally, you can you the ALIGN parameter in the <TH> tag (along with the COLSPAN and ROWSPAN parameters) to align the heading to the LEFT, to the RIGHT, or in the CENTER (default). If you do not need for column or row headings to span cells, then it is just as easy to place headings within additional columns or rows in the table. If you're the adventuresome sort, you might want to try spanning individual cells within a table. You can add COLSPAN and ROWSPAN attributes to the <TD> tags to produce some interesting table structures:
<TABLE BORDER=5 CELLSPACING=5>
Tables Within TablesHTML also handles tables within tables for occasions calling for them. This doesn't involve any particular complications--you simply insert a table in place of a cell:
The following code produced the above table. Notice at the location of Cell 2.3 that a table itself has become the table data (TD) item.
<TABLE BORDER=3 CELLSPACING=5>
This section has covered a lot of details about tables and their use in presenting tabular data. However, it cannot possibly discuss all the different variations in the use of the available tags. You will just have to experiment with table arrangements to discover which combinations of tags works best for your presentation.
Contents
Next
| |||||||||||||||||||
