
Music \| Writing \| Travelogues \| Shakespeare Resource Center \| Contact

Tables

Tables can be a hard thing to picture mentally, but the concept is fairly simple. If a document contains tabular information, the best way to do so is to create a table to display the data properly. When designing tables, think in terms of rows and columns. Each piece of information is contained in a cell, and cells form the rows and columns of the table. As with all our other tag sets, there are tag pairs defining the table itself, the rows within the table, and the cells within each row. The most basic table layout is demonstrated below:

<TABLE>
  <TR>
    <TD>Content of table cell</TD>
  </TR>
</TABLE>

Content of table cell

We'll start by explaining the tags, what they do, and what attributes they take.

Tag	Description	Attributes
`<TABLE> </TABLE>`	These tags mark the beginning and ending of the table.	border cellpadding cellspacing height width
`<TR> </TR>`	Short for Table Row. These tags mark the beginning and ending of each row in the table.	none
`<TD> </TD>`	Short for Table Data. These tags mark the beginning and ending of each cell in the table.	align colspan height rowspan valign width

Attribute Descriptions

<TABLE>

border: sets the width of the table borders in pixels (e.g., <TABLE border="1">)
cellpadding: sets the amount of space between the content and the inside of its cell in pixels (e.g., <TABLE cellpadding="5">)
cellspacing: sets the amount of space between cells within the table (e.g., <TABLE cellpadding="5">)
height: sets the overall height of the table in either pixels or percentage. This attribute should not usually be declared.
width: sets the overall width of the table in either pixels or percentage (e.g., <TABLE width="50%">)

<TD>

align: aligns the text within the cell to left, center, or right (left is the default)
colspan: specifies how many columns a cell will span in a table (e.g., <TD colspan="2">)
height: sets the overall height of the cell in either pixels or percentage. This attribute should not usually be declared.
rowspan: specifies how many rows a cell will span in a table (e.g., <TD rowspan="2">)
valign: vertically aligns the text within the cell to top, middle, or bottom (middle is the default)
width: sets the overall width of the cell in either pixels or percentage (e.g., <TD width="50%">)

A Practical Example

The best way to illustrate tables is to take the above concepts and demonstrate them in practical usage. We're going to use something simple like a chart of people's hair and eye color:

Hair and Eye Colors

Name     Hair Color     Eye Color
Bill     Brown          Brown
Jane     Blonde         Blue
Paul     Red            Hazel
Suzy     Brown          Green

Taking this initial, unmarked data, we'll throw some appropriate tags around everything:

<TABLE border="1" cellpadding="5" cellspacing="2" width="75%">
  <TR>
    <TD colspan="3" align="center"><B>Hair and Eye Colors</B></TD>
  </TR>
  <TR>
    <TD><B>Name</B></TD><TD><B>Hair Color</B></TD><TD><B>Eye Color</B></TD>
  </TR>
  <TR>
    <TD>Bill</TD><TD>Brown</TD><TD>Brown</TD>
  </TR>
  <TR>
    <TD>Jane</TD><TD>Blonde</TD><TD>Blue</TD>
  </TR>
  <TR>
    <TD>Paul</TD><TD>Red</TD><TD>Hazel</TD>
  </TR>
  <TR>
    <TD>Suzy</TD><TD>Brown</TD><TD>Green</TD>
  </TR>
</TABLE>

Which gives us the following display on the page:

Hair and Eye Colors
Name	Hair Color	Eye Color
Bill	Brown	Brown
Jane	Blonde	Blue
Paul	Red	Hazel
Suzy	Brown	Green

Parting Words on Tables

Tables can get very confusing very quickly. We've covered the absolute bare bones introduction to creating tables in HTML, but the facets and applications of tables are so varied that the subject is practically a full tutorial by itself. The best thing the novice can do is find good examples from around the Web and view the page source to get a feel for what the possibilities are. After a while, you can start looking at information and mentally picturing what the most appropriate table design would be for a batch of content. For now, we're going to leave tables and take a look at our final lesson, Images.

Top | Home