NWE Help: Web: Authoring: HTML: Advanced Tables

NWE Home :: Help :: Web :: Authoring :: HTML

WIDTH, ALIGN, VALIGN, and BGCOLOR attributes

Generally speaking, you can add these attributes on this page to any <TABLE>, <TR>, or <TD> tag. They will affect the entire table, or row, or cell*.

You can also set local values. For example, check out this table:

Cell One

Cell Two

Cell Three

the source for it looks like:

   <TABLE BGCOLOR="red" WIDTH="50%" CELLPADDING="10">
      <TR ALIGN="CENTER">
         <TD>                 <P>Cell<BR>One   </TD>
         <TD BGCOLOR="green"> <P>Cell<BR>Two   </TD>
         <TD>                 <P>Cell<BR>Three </TD> 
      </TR>
   </TABLE>

Note that BGCOLOR is set to be RED for the whole table. So the table's background is all red -- unless we override that with another BGCOLOR statement. (Note also the extra spaces added to the table to line stuff up. This is for readability only and doesn't affect the table's appearance at all.)

Here are the attributes that you can add to any <TABLE>, <TR>, or <TD> tag.

WIDTH="nn" height="nn"

This value is set in pixels or percentages. The default, when no WIDTH is specified, is to make the table as small as possible.

The WIDTH attribute only works sorta. This value, especially when expressed as pixels, is a minimum. If your stuff is too big for the table it can look odd. You'll need to try out a lot of different browser window widths to make sure the results you get are close to the design you're shooting for.

Generally the WIDTH attribute is best set in percentages, not in absolute pixels.

ALIGN="left|center|right"

This controls the horizontal alignment of the contents of a table cell or row. Default is left.

VALIGN="top|middle|bottom"

This controls the vertical alignment of the contents of a table cell or row. Default is middle.

BGCOLOR="#nnnnnn"

Sets the background color of a table cell, row, or table. Default is nothing (i.e. same as the regular background). You can use the standard HTML color triplets, or the basic color names.

I really like this attribute and use it a lot. You can make really nice layouts with table bgcolor usage.

 

Tables with a different shape

What if you don't want a standard "grid" table, but one that looks a bit different -- like with a column or row that goes all the way across or down? Well, that's possible. Here's an example:

Teaching for Fall 2000
Bobby	ENC 1145	8:00
Susie	ENC 1101	11:00
Jo	ENG 1131	10:00
Chris	AML 2010	10:00
Steve	Team-teaching ENC 1102	9:00
Ralph

(View source to see this one. Note that the background colors make the table attractive, etc. Note again that way more spaces than needed are used.)

Two cells "span" other cells. The title cell goes all the way across the table. Since Steve and Ralph are team-teaching, they get one cell that spans their rows.

How do you do that?

1. Add a COLSPAN="n" or ROWSPAN="n" attribute to a table cell, as needed. The attribute takes a number (n). The default is 1.
2. Make sure to cheat subsequent table rows of the cells needed to make the table. For example, if you use a ROWSPAN=2 attribute, the next row in the table will have one fewer cell than the previous. Etc.
3. Preview the table to make sure it looks OK.

Keep practising...

* The HTML code on this page is represented in Blue to make it easier to read.

Back: Tables
Next: Frames