HTML Markup | JavaScript | Java | Computer Sci | Home & Links

Quick Notes - Advanced Style

Having mastered Intermediate HTML and style, it is time to move on to more advanced style features.

Element Positioning

Explicit positioning of elements is available through the position property which can take values of: absolute (ie. measured from the top left corner of the page's body), relative (ie. measured from the top left corner of the current element) or fixed (ie. sticks in one place visually). The properties top, bottom, left and right can be used to set an offset value in any measure. Positioning can be set inline or by using an element identifier and setting in a style file or element. Look at this sidebar menu demo for one possible use of element positioning.

<p style="position:relative;top:20px;left:25px"> ... </p>
<p id="thisOne"> ... </p>

Stacking and Visibility

Elements can be stacked or layered on top of each other. One example is layering a caption over an image rather than above or below it. The z-index property is used to arrange stacking with higher number elements on top. z-index values can be one of auto, inherit or an integer number.

Individual elements can be shown or hidden at will. This is done with either the display (block|none) or the visibility (visible|hidden) property. Normally the visibility is altered dynamically by using languages such as JavaScript.

Parallel Lists

At one time parallel columns or lists were done with tables. But the preferred way is to use floated or absolute positioned elements.

Styled List Menus

Caution: Although the following menu strategies work well and look good on all of the current browsers, there are many implementation bugs in older browsers that can cause difficulties. Be sure to test any design thoroughly. If you must write for older browsers, try the techniques used in JavaScript Menus.

Attractive menus can be created using only CSS style and nested lists. Dropdown and pullout menus use a combination of selectors and the hover pseudo to reduce the need for any JavaScript knowledge or overhead. View the source for Cryptology to see how clean the lists are! cssplay.co.uk is a great reference for Pure CSS menus.

The following styling tabbed menu example includes two graphics from the images folder for fancy tabs.

And the result appears as:

• home
• second
• third
• fourth

Table Styling

Intermediate HTML covered table structure. But style can be used to modify table presentation for clarity or for page layout organization. You can stretch tables to fill the margins, specify a fixed column width or leave it to the browser to automatically size the table to match the contents.

Note 1: Presentation characteristics are based on the CSS box model . Styling with HTML attributes dates your work as pre 21st century! But there are examples where CSS fails and HTML is needed.

Note 2: Each style rule in the following examples could be written inline, within style elements or in external stylesheets depending on how often the effect will be used.

Note 3: At one time tables were used to position or format elements but current practice discourages the use of tables for formatting purposes. Use either float or element positioning when creating new web pages.

Table Coloring

This page uses a style sheet to set the background colors for tables, with a different color for heading and data cells. The style rules I used are as follows:

table.col {background:#ffffcc;color:black;
           border:2px solid black;padding:0px 5px}
td.col {background:#ffffcc;color:black;
           border:1px solid black;padding:0px 5px}
th.col {background:#cccc99;color:black;
           border:1px solid black;padding:0px 5px}

The background color is given red/green/blue values. The values are in the range 00 to FF hexadecimal (fully saturated). Colors can also be selected by name if the name is one of the X11 color group.

Table Positioning

Tables are positioned in one of two ways depending on browser. Most authors program defensively (ie. for both methods). The newer method recommended by w3.org and incorporated in DOM conformant browsers uses the box concept which centers the table element with a margin:auto rule. Older browsers (such as MSIE) use the div element with a text-align:center property. In the future all browsers will use margin:auto to position elements and reserve the text-align property for content. Use both for now to be backward compatible!

Table Borders or Frames

Table (and cell) borders are drawn with the same border property previously discussed in Intermediate Style. The border property specifies width in pixels, style (solid, dashed, dotted, double, groove, ridge, inset or outset) and color on all four sides. You can also set a individual side using border-left, border-right, border-top or border-bottom.

Table Width

You can set the width of the table using the width property. The value is either the width in pixels or a percentage value representing the percentage of the space available between the left and right margins. For instance to set the width to 30% of the margins:

table.x3 {background:#ffffcc;border:1px solid black;padding:10px;width:30%}

which has the effect:

Individual Cell Styling

Cell Padding

You can increase the internal padding (ie. spacing between the border and the contents) for cells within a table by using the padding property in the rules for td and th. For instance, to set the padding to 10 pixels (with a bit of color):

td.pad {margin:0px;border:1px solid black;padding:10px}
th.pad {margin:0px;border:1px solid black;padding:10px}

has the effect:

Once again the suffices -left, -right, -top or -bottom can be used to set individual sides. Another shorthand can be used to set the top/bottom and left/right pair. For example in the above, the padding helped readability left to right but opened too much space vertically. A better setting would be padding:2px 10px so that less vertical space is used by each cell.

Text Alignment within Cells

By default most browsers center heading cells th, and left align data cells td. You can change the alignment by using the text-align property. Acceptable values are left, center, right or justify (flush both sides):

td.x4 {text-align:center;border:1px solid black}
th.x4 {text-align:center;border:1px solid black}

with the following result:

The vertical-align property plays a similar role for the vertical alignment of cell content. It is used with the values top, middle or bottom, and can be added to each cell or row. The next example uses text-align:middle for the with caption. By default, heading cells (th) align their content to the middle of the cells while data cells (td) align their content at the top of each cell.

Empty Cells

One quirk is the way some browsers (MSIE) deal with empty cells. Compare:

The first table occurs when a cell is empty (ie. <td></td>).To prevent this, insert a non-breaking space (ie. <td>&nbsp;</td>)as discussed in how to use non-breaking spaces:

Cells that Span Rows or Columns

Let's extend the above example to break out sales by north and south sales regions:

The heading "Year" now spans two rows, while the heading "Sales" spans three columns. This is done by setting the rowspan and colspan attributes respectively. The markup for the above is:

<table class="col">
<tr><th rowspan="2">Year</th>
    <th colspan="3">Sales</th></tr>
<tr><th class="x4">North</th>
    <th class="x4">South</th><th>Total</th></tr>
<tr><td class="x4">2000</td>
    <td class="x4">$10M</td><td class="x4">$8M</td>
    <td class="x4">$18M</td></tr>
<tr><td class="x4">2001</td>
    <td class="x4">$14M</td><td class="x4">$11M</td>
    <td class="x4">$25M</td></tr>
</table>

Notice that as the heading "Year" spans two rows, the first th element on the second row appears on the second rather than the first column.

QUIRK: When CSS style fails

There is one problem with CSS box styling and cell elements. The margin property for class="pad" does not work! Margin spacing between cells can not be reduced to zero or increased!

But by using the html cellspacing attribute, the problem is solved

---

HTML: Basic | Intermediate | Advanced
Style: Basic | Intermediate | Advanced
Quick Forms | Home Page