HTML tables
HTML tables provide the Web designer with two valuable tools—a tool to place text and numerical information in a tabular form and a way to position objects on a Web page precisely. Although you will occasionally use tables to display tabular data, the true power of tables lies in their utility as a page layout tool. HTML tables let you lay out Web pages in ways that were difficult if not impossible to do prior to the introduction of tables with the release of HTML 3 in 1995. In fact, using tables for page layout has become so widespread that the World Wide Web Consortium (W3C) has worked hard to standardize the way in which browsers across multiple platforms render tables. As a result, today’s Web designers can use tables and be sure of consistent performance and display of information in all but the oldest Web browsers.
When you work with tables, the most obvious use for a table is to display text and numeric information in columnar form. Say, for example, that you want to display a listing of all the executives within a company and their corresponding office phone numbers. You would create a two-column table with the individual cells in the left column containing the names of the executives. The corresponding cells in the right column contain the executive’s office phone number. You might increase the information the table provides, by adding a third column that contains e-mail address, and a fourth, fifth, and sixth column for address, city, and state.
Because the cells in the table read from left to right, the table orders the information you place in its cells in an easy-to-read format, and distills the complexity of the information into a user-friendly spreadsheet format.
The second (and perhaps most important) application of tables is to place Web content (that is, text, numbers, graphics images, or blank space) into individual table cells, and then control the design of the Web page by placing the cells into organized rows and columns. In fact, for many designers, creating a structured Web page starts with drawing a row and column matrix (in other words, a table) that fit the width and height of the entire page. The designer then lays out the Web page by placing the page content into the table’s row and column cell structure at the location where the designer wants each element (or object) to appear on the Web page.
Suppose, for example, that you want to place a graphic element in the upper-right corner of a Web page. All that is required to do so is to create a table with a cell in the upper-right corner of the page, and then place the graphics image into that cell. Similarly, if you want to place text in the lower-right corner of the page, simply make sure the table’s structure creates a cell where you want the text to appear and then place the text you want into the cell.
When the Web browser, in turn, displays the Web page with the table, the dimensions of the table and its cells hold the graphics image(s) and text in position on the page. Because each cell in a table can hold any Web page object at a specific spot on the Web page, you can use tables to control the placement of everything from simple text to interactive graphics buttons and background images.
Saying that the introduction of HTML tables completely changed the way in which Web designers create Web pages would not be an exaggeration.
Due to the complexity and amount of HTML required to create extensive page layout tables, you may want to use one of the Web design tools, such as Dreamweaver or GoLive. These programs not only generate well-written and efficient HTML code but they can also save you hours of time by letting you use the mouse pointer to “draw” the table you want onscreen.
In addition to using tables to place graphics and text on a Web page, you can also use tables to group a set of navigation buttons along the top, bottom, or sides of a page. Using a table to organize navigation buttons into an ordered pattern at the same relative location on each page makes the site easier to navigate. Moreover, by painting groups of cells with different background colors you can create a visually organized Web page.
Suppose, for example, that you create a column of navigation buttons along the left side of a Web page. Use the same background color for each of the table’s cells that hold the navigation buttons.
Then, by using a contrasting color for the backgrounds of the remaining cells in the table, you will draw the visitor’s eyes to the group of cells that are the site’s navigation menu—thereby making it easier for the visitor to find the buttons necessary to move from page to page on the site. Moreover, by using the same background color for the navigation button cells on all Web pages, you give the visitor a visual cue as to where to look for help with navigating to specific pages of interest on the site. In general, using background color to group table cells that perform a single function creates a visually pleasing, visitor-friendly Web site.
Tables also provide an excellent way to divide a single graphics image into multiple parts to approximate an image map on Web browsers that do not support image maps. Image maps are graphics images subdivided into clickable regions. Depending on a site’s purpose and tone, you might use an image map as a unique navigation tool. Suppose, for example, that you create a historical Web site for your family. The graphics image on the index page might be that of a large tree with extended branches, with each branch of the (family) tree named after a particular branch of your family. By dividing the picture of the tree into separate pieces and then placing each part into a separate cell in a table such that each cell holds a branch of the tree, you can turn each branch of the tree into a “hotspot,” such as those you find on an image map. After you do this, the visitor will be able to click on a branch on the tree to access information about a particular set of relatives. Although the visitor sees a complete tree with extending branches, in reality the graphics image on the Web page is broken and divided into separate pieces and then reassembled into a single image using an HTML table.
Oddly enough, most Web designers that use tables as a design tool do not consider the actual coding of the tables to be the most difficult part. Instead, it is visualizing the Web page broken into a table format of rows and columns of cells that they find difficult. For example, in the previous paragraph, a tree with extending branches creates the image map for an historical Web site. However, if you want to create an image map of the United States, you need only to look at a map of the country to see that dividing the United States among the cells of an HTML table will not work, simply because the borders of the individual states do not form perfect rectangles. Sketching the Web page on paper and then dividing the images and text into the framework of horizontal and vertical lines is a quick way to ensure that a design is workable. In other words, the sketch (or storyboard) will show you if you can divide the objects on a Web page into the individual cells of the brick-like structure of an HTML table. Always analyze the project before doing the actual coding.