[main] [misc] [graphics] [page design] [site design] [xhtml] [css] [xml] [xsl] [schema] [javascript] [php] [mysql]

HVCC Home
Blackboard HVCC
Blackboard Manual
Faculty Association

css main
1. using css
2. css syntax
3. css text
4. css color
5. css boxes
a. css box properties
b. css border properties
c. css margins padding
* d. css table styling
6. css page layout
7. css tag classification
8. css media
9. css chrome


print version

Note that all external links will open up in a separate window.

This is a stripped down version of these pages for older browsers. These pages are really meant to be viewed in a standards compliant browser.

Directions for surfing with audio.

Styling Tables with CSS

Note that some of the examples in this lecture are using table formatting that does not normally carry over into print or that may be specific to only certain browsers. This means that certain examples will not appear correctly in many instances. This does not affect document readability.

Styling Tables

You can use either style sheets or attributes to style documents. Both have benefits and drawbacks. Style sheets have more flexibility and are in accord with new standards, but they are also not backwardly compatible. Many table attributes have been deprecated in favor of style sheets, and many only work in certain browsers, however, they are backwardly compatible.

A common recommedation is to use both. Style sheets will override the attributes values on newer browsers that understand them.

Borders

HTML provides the border attribute to put borders around table elements. It is an all or nothing deal that takes the size of the border as its value. Internet Explorer adds the frame attribute to draw frames around the table and the rules attribute to draw lines between cells and other distinct table elements. These take keywords to specify which lines are to be drawn.

CSS also provides border properties in the form of the border property. There are also three sub-properties.

border-width

This allows you to specify the width of the border. Normally the width is specfied in the number of pixels.

border-style

This allows you to specify the style of the border. This takes a keyword, such as solid, or dashed. Check the W3C documentation for the complete list.

border-color

This allows you to specify a color for the border. As with all other color properties in style sheets, it is preferred that you use a hexadecimal value to set the color.

When you set border properties, they apply to the element selected, not for everything in the table. Therefore, you can define styles for cells, rows, and the entire table separately. The simplest way to set the border is to just set it for all four sides. For instance, if you wanted to set the border around the table to a two pixel, solid red line, you could code:

<table style="border: 2px solid #ff0000;">

The "px" in the above statement says that the measure is in pixels. The line is a solid line and is pure red. The values need to occur in that order and all need to be present for the command to work. If you just want to set one value, then use the sub-properties.

If you wanted borders around everything, then what you need to do it as a document level style rule, instead of inline (unless you want to repeat it for every single cell):

table, th, td { border: 2px solid #ff0000; }

If you want to specify properties for only some of the sides, there are a few ways to do it. One is to specify border-left, border-right, border-top, or border-bottom. These work the same way as the border attribute.

Another method is to specify the values using the sub-properties. border-width, border-style, and border-color all take up to four values each, one for each side of a table or cell.

The values are listed out in a space separated list as follows:

style="border-width: 2px 4px 6px 4px;"

The above statement sets the top border to 2 pixels, the left and right border to four pixels each, and the bottom border to six pixels.

Now, as stated before, you can have up to four values. What happens if you don't have all four. This can get rathe confusing, but it works like this.

border-width: width1;

Sets all four sides to the size specified.

border-width: width1 width2;

Sets the top and bottom border to width1 and the left and right borders to width2.

border-width: width1 width2 width3;

Sets the top border to width1, sets the left and right borders to width2, and sets the bottom border to width3.

border-width: width1 width2 width3 width4;

Sets the top border to width1, sets the right border to width2, sets the bottom border to width3, and sets the left border to width 4.

There are also properties for the individual sides by sub-property. For instance, you could specify the four widths with individual properties using the following.

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

Size

There are corresponding height and width style properties that match the attributes of the same name. They can take an absolute value in pixels, a relative value, normally based on em-units (a typographic measure), or a percentage value. If using a percentage, beware that some browsers treat is as a percent of the table or available space after margins and others as a percent of the page.

The recommended method for setting width is to specify an absolute width for some columns and have others that have no size defined and expand to fill in the extra space. For instance, you could set an absolute value for a menu bar and then let the content fill the rest of the screen. Browsers will also ignore your size specifications at times to fit things on the screen.

When you specify a width, you specify a maximum width. This will only be overridden if the contents of the cell or table are too wide to fit in that space. For instance, while text will wrap to fit available space, if you set a cell width to 400 pixels and then try to put an image that is 600 pixels wide in it, then the cell will expand to fit the image.

You only need to specify a width once in a given column. All the cells in a column are the same width unless you are spanning columns.

It is generally not recommended you specify a height, but when you do, it sets the minimum height for that element. You only need to set height once in a row.

Spacing and Padding

Cell spacing is the space between cells in a table. Cell padding is the extra space inside a cell between the contents and the border of the cell. You can set these values with the cellspacing and cellpadding attributes, which take a value representing the size in pixels, or you can use style sheets.

The style sheet equivalents of cellspacing and cellpadding are border-spacing and padding.

The padding property can take one to four values to specify the padding, or the space within the cells. If you use more than value, then the same rules apply as with specifying individual border sides above. You can also specify an individual side by specifying padding-side. For instance, padding-left, or padding-bottom.

The border-spacing property is a little more limited in its use. It can only be applied to the table as a whole and is an all or nothing affair. In other words, you have to have the same amount of spacing between every element in the table.

This is not particularly versatile, but then again, if you are using a browser that understands the border-spacing property in the first place, then you are using a browser that understands how to use CSS for positioning. In other words, you are in an environment where you shouldn't be using tables for fancy page layout, but rather CSS.

In any event, IE does not yet support the border-spacing property, while Netscape 7 and Opera 7 do. So you still need to use the old HTML method for the majority of the market.

Note that on newer browsers, there is an automatic margin of 2 pixes inserted between each cell. This can cause problems if you are working with borders, and each semester students tear a few hairs out trying to figure out how to get rid of the gaps between their table cells. There are two fixes for this. The old fix and the new fix.

The old fix. Use HTML attributes to crunch out the margin. Using both attributes covers your bases, since older browser default to a border but no margin, and newer browsers default to a margin but no borders.

<table border="0" cellspacing="0">

The new fix. Use CSS to specify that the table has no space between the cells.

table { border-spacing: 0px; }
[or]
table { border-collapse: collapse; }

The border-collapse property takes one of three values:

  • collapse -- Put no space between adjacent cell borders.
  • separate -- Put some space between adjacent cell borders. In this mode you can then use border-spacing to specify how much space.
  • inherit -- Inherit this property.

This property will work for other elements as well, but is really only useful for tables. It is better supported than border-spacing, and appears to work in all three major browsers. If both border-spacing and border-collapse, then border-collapse overrides border-spacing when it is assigned a value of "collapse".

Color

The background-color property is well-supported and is preferred to the bgcolor attribute in tables. Both can be a little quirkish in Netscape 4.x. The background-color property can take a color name or color value, but, since CSS only officially recognizes 16 color names, it is a good idea to use the hexadecimal color values.

Empty Cells

CSS also provides a means by which to control what to do with empty table cells in terms of formatting. This is useful if you have table cells with visibility set to "hidden", since browsers will treat such hidden content as no content. It also means you don't have to use the &nbsp; trick to make sure there is something in cells.

The property is empty-cells and takes a value of "show", "hide", or "inherit". The supports and defaults, of course, get complicated:

  • Netscape 7 -- supports property, default is show.
  • Opera 7 -- supports property, default is hide.
  • IE (all) and older browsers -- does not support property, default is hide. You need to use the &nbsp; trick.
     
           

A table without the style rule applied. In other words, the default.

 
 

     
           
     
           

The first cell in the table to the left should have no border around it, while the table to the right should have a border around the first cell. If this is not what is displaying, then your browser does not yet support the empty-cells property. Netscape 7 and Opera 7 both support this, IE 6 does not yet do so.

Aligning Tables and Table Contents

Alignment is tricky business in tables. For starters, the same attribute that aligns the table itself aligns the contents of the table in different contexts. You can also align things in both dimensions.

Aligning the table

By using the align attribute in the <table> tag, you can align the table on the page. If the value is set to center, then the table will be centered. However, if it is set to left or right, then the table will be floated to the left or the right and other content will flow around it.

The easiest way to center a table with style sheets is a two step process. First, put the table in a division and use the text-align property to center (text-align: center;) the contents of the division. Then set the margins of the table to auto. This will cover your bases for almost all newer browsers.

To mimick moving the table to the left or right, you want to use the float property on the table itself. For instance, to float it to the right, you could do the following.

<table style="float: right;">

Aligning the contents

Contents can be aligned by applying attributes or properties to individual cells or to the entire row or table division (i.e., header, body, footer). To align cell contents horizontally you can use the align attribute or the text-align property. Both take a value of left, right, center, or justify. Justification is not well-supported on the Web.

The default alignment for content cells is left aligned. The default alignment for header cells is centered.

You can also align cell contents vertically with the valign attribute or the vertical-align property. The vertical-align property is not as well supported as the align property, but it is getting there.

Both of the vertical alignment elements can take any of the following values.

top

Aligns contents with the top of the cell.

middle

Aligns contents with the middle of the cell. In other words, it centers it vertically.

bottom

Aligns contents with the bottom of the cell.

baseline

For right now, this can be treated the same as bottom, though it is slightly different.

The default vertical alignment on a cell of any kind is middle.

Sample alignments

Attributes Style Rules Code Samples
This cells is entirely default values. This cell is entirely default values.  
This cell is aligned to the left using attributes. This cell is aligned to the left using style sheets. <td align="left">
<td style="text-align: left;">
This cell is aligned to the right using attributes. This cell is aligned to the right using style sheets. <td align="right">
<td style="text-align: right;">
The contents of this cell are centered using attributes. The contents of this cell are centered using style sheets. <td align="center">
<td style="text-align: center;">
The contents of this cell are justified using attributes. This value does not always work for attributes. The contents of this cell are justified using style sheets. Newer browser should know how to process this value for style sheets, but it does not render well with short lines. <td align="justify">
<td style="text-align: justify;">
The contents of this cell are vertically aligned to the top using attributes. The contents of this cell are vertically aligned to the top using style sheets. <td valign="top">
<td style="vertical-align: top;">
The contents of this cell are vertically aligned to the bottom using attributes. The contents of this cell are vertically aligned to the bottom using style sheets. <td valign="bottom">
<td style="vertical-align: bottom;">
The contents of this cell are vertically aligned to the middle using attributes. The contents of this cell are vertically aligned to the middle using style sheets. <td valign="middle">
<td style="vertical-align: middle;">
The contents of this cell are vertically aligned to the baseline using attributes. The contents of this cell are vertically aligned to the baseline using style sheets. <td valign="baseline">
<td style="vertical-align: baseline;">

[top]