COM271, Week 1

HTML Tables, Table Elements, and Major Attributes

Syllabus | Table of Pages | Assignments | References and Useful Links

Table Elements

HTML tables are used for page layout (improperly) and for the arrangement of information that properly belongs in a table, i.e., where there is a consistent relation among fields in a vertial column and records in horizontal rows.

The primary table elements and attributes (with value units ([ a | b] indicates options are "a" or "b," etc.) are:

<table>—table element
- width="[pixels or size unit | percent or relative unit]"
- height="[pixels | percentage]"
- border="[0 is no border | 1,2,etc., produces 1,2,etc. pixel border]"
- cellpadding="[pixel]"
- cellspacing="[pixel]"
- bgcolor="[background color in hex or name]"
Normal row and column elements
- <tr>—table row
- <td>—table data (=cell)
  - align="[center | justify | left | right]"—horizontal alignment of cell contents
  - valign="[baseline | bottom | middle | top]"—vertical alignment
    (Notice the difference between "center" and "middle" as options for align and valign.)
Header row and column elements
- <thead>—table header row
- <th>—table header data (=cell)

Here is a representative sample 3-column table with a header row and two rows of data, using all of the above elements, and below is the html used to produce it. Note:

Width and bgcolor may also be applied to th and td elements.
If the width of the table is specified, and all but one of the columns is also specified, the width of the remaining column is known and does not need to be specified.
If width is not specified, the cells and the table will take on widths as determined by content.

Table 1: This is the caption for this table.
Name	Class Standing	G.P.A.
John	Sophomore (transfer from Community College)	3.89
Mary	Junior (major: Mathematics)	3.67

<table width="600px" bgcolor="#336600" border="0" cellspacing="10" cellpadding="5">
<caption>Table 1: This is the caption for this table.</caption>
<thead>
<th bgcolor="#663300" width="150px" align="left">Name</th>
<th bgcolor="#663300">Class Standing</th>
<th bgcolor="#663300">G.P.A.</th>
</thead>
<tr>
<th bgcolor="#663300" align="right">John</th>
<td bgcolor="#996600">Sophomore<br />(transfer from Community College)</td>
<td bgcolor="#996600" align="left" valign="top">3.89</td>
</tr>
<tr>
<th bgcolor="#663300" width="15%" align="right">Mary</th>
<td bgcolor="#996600">Junior<br />(major: Mathematics)</td>
<td bgcolor="#996600">3.67</td>
</tr>
</table>

Nesting Tables

Tables may be nested. That is, within a table data element, you may have another table. Without presenting the html, here is what that would look like:

Dr. Logan's Resume

Me
About Myself
My pictures

(This is a table within a table:)
Education	Harvard Professional School Exeter Philips Academy
Experience	Saint Dork
Skills	Web Wizardry Walking on water

Here is the W3C specification for the table element, listing elements that it contains, and also listing attributes: http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE

There are more elements and attributes that we can use with tables, but for now, we're almost ready to take on the first lab assignment. First, a word of caution about tables for layout.