Internet Brothers - HTML Advanced Topics

Internet Brothers: Helpware for the Cybercommunity - Advanced HTML

Tables 101

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.

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.

Continue With Some New HTML 4.0 Table Tags

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said.

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

another darn bug

Site Map

Was this site useful to you?