wetlandbiology.net
PBIO(BIOL) 3660L Plant Biology Intensive Lab
THE PLANT BIOLOGY DEPARTMENT AT THE UNIVERSITY OF GEORGIA
wetlandbiology.net
PAGE LAYOUT
Tables and their cells accomplish two major objectives in a page layout: 1) accurate positioning of text and images; and 2) creation of horizontal and vertical rules by specifying that some of their borders are visible. As used here, tables are routinely placed within tables. Although rarely used in these pages, cells can be combined within a single row and rows can be partially combined in a single table by carefully defining the cols and rows attributes in the table tag and rowspan and colspan attributes in the tr and td tags.

The following describes the layout of the standard page as of 12 February 2010. It can be found as template.htm in public_html. Not all pages may use it; several earlier versions accomplish the same result but with more machinations.


back to top

Above is a screen capture of the Research page in which the Tables are represented by transparent color overlays. The arrangement of the Tables are shown above the image. The two, single-celled Columns of Table 1 contain all of the content. Table 1 is 995 px wide so that with a browser-supplied vertical scroll bar it fits well within a 1024 px-width monitor. The heights of the columns are not defined. The borders of Table 1 provide the borders around the page contents.

The entire content in the Left Column of Table 1 is written by the function showLinks(), defined in the page's head, which rewrites the section-specific .js index file appropriate for the page. The width of the Left Column can be increased by increasing the width attribute in the img tag of spacer.gif in the .js file and the vertical position of the menu can be adjusted by changing the height attribute in the same tag.
back to top

The Right Column of Table 1 contains a four-row Table 3. The bottom border of the right-most cell in Row 1 of Table 3 completes the border around its image and effectively around the entire top banner. In Row 2 of Table 3 is a 10-cell, single-row Table 4. The ten cells and their content in Table 4 are written by the function showTopmenu(), defined in the page's head, which like function showLinks() that is called in the Left Column, rewrites a topmenu2.js index file into Row 2. The top, left, and bottom borders of Row 3 of Table 3 provide a border around the page title and content. This deliberately leaves Row 2 of Table 3 without a left border so that the vertical links on the left of the page are connected to the horizontal links near the top of the page. Their sharing the same field emphasizes their having the same function. Table 6 in Row 3 of Table 3 provides in its Row 1 the page title and a partial horizontal rule from its bottom border. Its Row 2 and 3 provide a vertical spacer and the page content, respectively. Row 4 of Table 3 contains the footer.

Table 6 could be deleted, its content and organization instead being in Row 3 and two additional rows of Table 3, but the present configuration is simpler and easier to grasp than having to specify border-left and padding attributes for three of the then six rows of Table 3, and devising a way to create the partial rule below the page title. This is probably an example where an additional Table is the most direct way to create the desired result.

To see how this is encoded, View/Page Source will recover the html code. The file wbnstyle.css is the external style sheet and topmenu2.js and linkssearch2.js are the external javascript files for the top and side menus, respectively. Further explanation of the javascript functions and other features can be found on the Code page.
back to top

GLENN GALAU, THE DEPARTMENT OF PLANT BIOLOGY, MILLER PLANT SCIENCES BUILDING, THE UNIVERSITY OF GEORGIA, ATHENS GA  30602-7271
PHONE 706 542 1859    FAX 706 542 1805
MODIFIED ON 13 FEBRUARY 2010. WEB DESIGN BY GLENN GALAU

wetlandbiology icon

Content and opinions expressed on this page do not necessarily reflect the views of nor are they endorsed by the University of Georgia or the University System of Georgia