Page Layout Tools: Tables and Styles

Chapter nine of Creating Web Sites: The Missing Manual deals with the types of layout tools; table based layout and style based layout. For many years table based layout was the way to create a well aligned web site. This layout consisted of an invisible table with invisible grids where everything on the web site would be placed in proportion to the grids. Today CSS style sheets are the way to position the elements of your web site. The style sheet is linked through the HTML documents of your Web site. Style sheets produce a more polished, proportionately structured Web site.

HTML Tables are based on an invisible table consisting of rows and columns. There some tags associated with HTML tables:

• table tag - which is the starting point of the table.
• tr tag which represents a table row.
• td tag which is indicates a table cell and stands for table data. Within the td tag text, numbers or an image tag is placed.
• th tag is a tag used to assign column headings. Text within the th tag is both bold and centered.

Indenting table tags helps see when there are mismatched tags.

Formatting Table Borders

Table borders are formatted using the border property for which you can specify the width of the border in pixels. The border style cannot be changed. The only way to change a border is to use a style sheet.

To create a different style border line on a table:

1. Create a borderless table.
2. Apply a border using the tr and table tags.

There is one problem when constructing tables withs borders. An empty table cell will not get any border at all; this is known as collapsing. Collapsing can be prevented using a single non-break space.

Text alignment, padding, margins, colors and background images can also be changed using style sheets.

HTML tables consist of a cell that reaches over rows and columns. This is know as spanning. A columnspan property can be added to a td tag to create a cell that reaches over two or more columns. The rowspan property is used in the same way except that cell area extends over rows and not columns.

Dreamweaver has a menu command called Merge Cells to joins cells together.

Sizing and Aligning Tables

If the columns are not defined in a table then the column as wide as the longest text line or to adapts to size needed to hold an image (an image tag is needed). Tables enlarge to fit all columns however it does not adapt in a way that would result in the table growing outside of the browser window.

More space can be added to tables using style rules. When padding is increased for the td and tr tags the result is more space between cell contents and borders. The margin width for the td and tr tags enlarges the space between cell borders and adjacent cells.

There are two ways to size tables:

1. Relative sizing where sizing is based on the dimensions of the browser window and is expressed by percentages.
2. Absolute sizing where pixels are used to create the exact size of the table.

Column sizing the width property and td and th tags are used and are expressed by either proportions, percentages or exact pixels. When percentages are used they are used to define the percentage of the table the column will fill space wise. The column's width percentage does not need a specification of value in more than one column since the browser will resize and fill in the remainder of space in the table. When including the percentages for all columns be sure that they add up to 100 percent. To size columns a style rule using a class name is also required since a table column can have a differing width from other columns in the table.

To size a row the height property is used with the tr attribute. Percentage and pixels are used to express the value. Resizing a row will result in a change to each and every cell in all columns.

Organizing a Page with Tables

Tables are used to organize your Web site by diving the page into various regions. The most common designs are the two or three column layout. The navigation bar is usually on the left. The middle column is the greatest amount of space for main content. A right column contains another set of links, advertisements or supplemental information.

Style-Based Layout

Style-based layout is better than a table-based layout because the structure of a table based layout needs to copied to each page of a Web site. Style sheets can apply the style layout of an entire Web site using only one separate style sheet. Style sheets are easier to read as well. Changes to a single style sheet can modify the layout of each linked page on a Web site.

Nest tables are tables placed within tables. To design the attributes within nested table the table must be defined. The simplest way to resize a nested table is to use a relative size of 100 percent.

All the content of a table is done using a div tag where a class name is selected to describe the content.

Even Better Selectors

Contextual selectors match a tag within another tag. A contextual selector is constructed by placing a space between the two tags. They are particularly useful when used to match a specific type of tag within a specific type of class. Contextual selectors are simplify the process of defining formatting rules for the various page sections.

The id selector is very similar to a class selector in that the id selector allows you to pick a name describing your rule. Instead of using a period the tag name is separated using a hash mark (#). Just like class rules, id rules are only applied when indicated within your HTML. An id attribute is used to turn them on instead of class attribute. Only a single tag in a page can exist within a given id.

Floating Boxes

Relative positioning results in elements ordered based on their appearance within a document. Richer layouts are accomplished by positioning content in different ways. One example is a floating layout.

Absolute Positioning

Style sheets allow for elements to be fixed on a page. Absolute positioning is done by setting the position property of the division tag to absolute. The location of the division tag is then set using the top, left, right and bottom properties.

To create style based layouts you divide your Web page into a series of separate regions. A division tag is placed next to every region with a different class. Then the rules for the style sheet rules which position and format each element are written.

Layering

Sometimes elements on a Web page are overlapped intentionally to create a dramatic effect. This is done using overlapping layers. Web browsers need to know which element will be on the top layer. Using a simple number known as a z-index achieves the layering effect. An element with a higher z-index number is placed over that of a lower z-index number.

Helpful Style Sheet Web Sites:

• Style Sheet Basics- www.w3schools.com/css
• Style Sheet Examples - Layout Reservoir www.bluerobot.com/web/layouts and Glish http://glish.com/css
• Examples of Style Sheets- http://www.csszengarden.com/
• Advanced Style Sheet Resources- www.westciv.com/style_master/house