Using CSS with tables

Tables were originally intended to be used for the presentation of tabular data

This use was quickly supplanted by the power of tables as a design tool

Tables are used to lay out the structure of entire pages

The use of multiple nested tables is common

CSS positioning is intended to replace the use of tables for layout purposes

Positioning allows the precise placement of HTML elements and objects in a browser window

This will be our next topic

CSS can be used with table markup

In general, CSS can be used in with table tags

The main caveat is that older browsers do not have good support for CSS in tables

borders

A table border is set using the standard border properties

The markup would look like this:

The table markup looks like this:

Note that the border attribute is not used in the table tag because it is controlled from the style sheet

And the table looks like this (the font has been made larger for this example)

It looks like this with interior borders (the font has been made larger for this example)

backgrounds

Backgrounds can be set for the entire table

The markup would look like this:

The table markup looks like this:

And the table looks like this (the font has been made larger for this example)

Backgrounds can also be used in individual table cells

The markup looks like this:

Here's what the table looks like

fonts

Font properties can be used at the table, table row, and table cell levels

Using Netscape 4, font properties can only be used at the table cell level

Here's what the markup looks like

Here's how it is placed in the table cell

Here what the table looks like:

Using CSS properties with tables is browser dependent so be sure to carefully test your CSS-enhanced tables with several browsers

Next!

You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssimages2.html
Last updated 3.15.06 - H. Rosenbaum