Adapted from the NCSA Mosaic(tm) Tables Tutorial

Tables enable the content creator to organize data into columns and rows, much like a spreadsheet. Information organized into tables is often easier to understand, and the grid organization of content provides an option to structure layout to resemble columnar presentation. Using a column and row format, consider the style of a newspaper, a magazine or even the Periodic Table of Elements. Before getting started, you need to know a couple of things about Tables:

1.

Anything can be placed in a cell:

  • Text
  • Images
  • Forms
  • Lists
  • Anchors
  • Any combination of the above

2.

Tags Relevant to Tables

TAG Description Example
<TABLE> ... </TABLE> The tag that defines a Table in HTML. If the attribute BORDER is present, then the browser will display the table with a border. <TABLE BORDER> ... </TABLE>
<CAPTION> ... </CAPTION> This tag defines the caption for the title of the table. The default position of the Title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table. Note: Any kind of markup can exist in the caption. <CAPTION ALIGN=BOTTOM> ... </CAPTION>
<TR> ... </TR> This tag specifies a Table Row within a table. You may define default attributes for the entire row. These attributes are: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). <TR VALIGN=BOTTOM ALIGN=CENTER> ... </TR>
<TH> ... </TH> This tag defines a Table Header cell. By default the text in this cell is bold and centered. Table Header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Alignment Attributes at the end of this table for more information. <TH ALIGN=CENTER VALIGN=TOP COLSPAN=4 ROWSPAN=2 NOWRAP> ... </TH>
<TD> ... </TD> This tag defines a Table Data cell. By default the text in this cell is aligned left and centered vertically. Table Data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Alignment Attributes at the end of this table for more information. <TD ALIGN=CENTER VALIGN=TOP COLSPAN=2 ROWSPAN=3 NOWRAP> ... </TD>

Alignment Attributes

Note: Attributes defined within <TH> ... </TH> or a <TD> ... </TD> cells will override the default alignment set in a <TR> ... </TR>.

  • ALIGN (LEFT, CENTER, RIGHT)

  • VALIGN (TOP, MIDDLE, BOTTOM)

  • COLSPAN=X

  • ROWSPAN=X

  • NOWRAP

  • Horizontal Alignment of a cell.

  • Vertical Alignment of a cell.

  • The number(X) of columns a cell spans.

  • The number(X) of rows a cell spans.

  • Turn off word wrapping within a cell.

3.

General Table Format

The general format of a table looks like this: 
<TABLE>                                         <== start of table definition

<CAPTION> caption contents </CAPTION>           <== caption definition

<TR>                                            <== start of first row definition
<TH> cell contents </TH>                        <== first cell in row 1
...
<TD> cell contents </TD>                        <== last cell in row 1
</TR>                                           <== end of first row definition

<TR>                                            <== start of second row definition
<TD> cell contents </TD>                        <== first cell in row 2
...
<TD> cell contents </TD>                        <== last cell in row 2
</TR>                                           <== end of second row definition

...

<TR>                                            <== start of last row definition
<TH> cell contents </TH>                        <== first cell in last row
...
<TH> cell contents </TH>                        <== last cell in last row
</TR>                                           <== end of last row definition

</TABLE>                                        <== end of table definition
In other words, the <TABLE> and </TABLE> tags must surround the entire table definition. The first item inside the table is the CAPTION, which is optional. Then we can have any number of rows defined by the <TR> and </TR> tags. Within a row we can have any number of cells defined by the <TD> </TD> or <TH> </TH> tags.
Now you're ready to create some tables! The following examples will demonstrate how to create tables in HTML, from the simple to the complex.

[Back] [Forward]

© Lynne Grewe