Web Site Building · HTML Advanced Topics · Tables 1

What this is about:

The table tag lets web designers create rows, columns, and cells to display tabular data much like spreadsheets or statistics. But savvy developers quickly came to realize that tables were the missing link in HTML layout control. Always one of the more perplexing issues in web design, page layout suddenly had greater control over placement of images and text with the advent of tables in HTML standard 3.2.

HTML Tables

Columns and Rows By creatively using tables — usually not including borders and sometimes nesting tables within other tables — a variety of interesting effects can be achieved. A common way to have a page display with margins is to create a three-column borderless table with a width of 100 percent, and put the text in the middle column, using the empty first and third columns as margin space. This gives the designer a mechanism to define exact margin sizes, by specifying the width of the margin columns in pixels.

The <TABLE> tag set encloses the table and of course ends with </TABLE>. Common attributes of the table tag are ALIGN to control placement, BGCOLOR to determine the table's background color, BORDER to place lines around the cells, border="0" will produce a borderless table, CELLPADDING and CELLSPACING for placing white space within and between cells, and WIDTH for defining the width in pixels or percent of the table on the page.

Rows are defined within a table with the <TR></TR> tag set. You may also layout horizontal and vertical alignment of the row within the table with the ALIGN and VALIGN attributes. If you want each row in a table to be a different color, code them as such with the BGCOLOR attribute.

The <TD></TD> tag set establishes the data cells (think columns) within each row. Useful attributes of the cells are COLSPAN if you wish some rows in the table to have more cells than others, or ROWSPAN to make a cell have empty rows, WIDTH and HEIGHT for sizing of the cell, and the ever present ALIGN, VALIGN, and BGCOLOR properties. Similar to <TD> is the <TH></TH> set used for defining header cells. The difference between header and data cells is text in a header cell defaults to bold type and center justification, whereas text in a data cell defaults to plain text and left justification.

HTML 4.0 Standard

<CAPTION> — Used for positioning a caption centered above the table. CSS and JavaScript EVENT attributes may be defined, along with normal positioning properties.

<COLGROUP> and <COL> — Defines a set of columns in a table as a specific group and lets you apply attributes to the entire group. Enables introduction of the SPAN attribute. <COL> goes inside the <COLGROUP> specification and controls the appearance of one or more columns.

<TBODY>, <THEAD>, and <TFOOT> — Much as <COLGROUP>, <TBODY> is an HTML 4.0 tag that defines a set of rows in a table as a specific group and lets you apply attributes to the entire group. <THEAD> defines a set of table header rows. These header rows will be repeated at the top of every page of the table, and correspondingly <TFOOT> defines a set of table footer rows. These footer rows will be repeated at the bottom of every page of the table.

Proceed to HTML Tables Page 2.

go to the next page