Tables in HTML

Reading

Table Tags

The <table> tag

• Unless otherwise placed within the browser by some style sheet or other alignment options, the browser breaks the text flow, inserts the table beginning on a new line, restarts text flow on new line below table.
• Attributes:
  • align
    • Deprecated, but we will use until we discuss Cascading Style Sheets.
    • Options: left, center, right.
    • left or right: flush with margin, text flows around.
    • center: text appears above and below the table.
  • bgcolor -- background of the table; deprecated, but we will use until we discuss Cascading Style Sheets.
  • border
    • Default: no table border.
    • Value: pixel width of the border or the keyword border, which gives a border with the default width.
  • cellspacing
    • Change interior cell borders.
    • Default: 2 pixels (increases to 4 pixels with a border setting).
  • cellpadding
    • Controls space between edge of cell and its contents.
    • Default: 1 pixel.
    • Can make cell contents touch border by setting cellpadding="0".
    • Can increase cell padding also.
  • cols
    • Definition of number of columns in table.
    • Helps browser format tables faster.

The <tr> tag

• Makes a new row in the table.
• Content: one or more cells containing headers (<th> tag) and data (<td>).
• Attributes:
  • align
    • Controls horizontal alignment of all contents of cells in the row.
    • Options: left, right, center.
    • Default: data - left, header - center.
  • valign
    • Controls vertical alignment in a row.
    • Options: top, bottom.
    • Default is center.
  • bgcolor -- background color of a row; deprecated, but we will use it until we discuss Cascading Style Sheets.
  • nowrap -- force single line in a cell; deprecated, but no style sheet substitute available.
  • width, height
    • Value is an integer number of pixels or percent of screen.
    • Used to make table wider if desired.

The <th> and <td> tags

• Headers centered by default, data left-justified.
• If a row has fewer header or data items than other rows, the browser adds empty cells at the end to fill the row.
• To get empty cells at the beginning, create a header or data cell with no content.
• To get an empty cell with a border, put some content in the cell, e.g., a <br /> tag.
• Attributes:
  • align, valign
  • width
    • Lets you widen a cell (thus, a column).
    • Takes pixels or fraction of the table as a whole.
    • Example: <td width="40%">, <td width="400">
  • height -- specify height, in pixels, for a cell (and, thus, for a row).
  • colspan -- extend a cell across two or more columns.
  • rowspan -- extend a cell across two or more rows.
  • Note: Can combine colspan and rowspan.

The <caption> tag

• Places a caption before the table to explain its contents.
• align attribute -- top or bottom (default is top); deprecated, but no substitute available through style sheets.

Example

<table border="1">
<caption>Recent Presidents and Vice Presidents</caption>
<tr><th> </th><th>Prez</th><th>Veep</th></tr>

<tr><th>1989-1993</th><td>George</td><td>Dan</td></tr>
<tr><th>1993-2001</th><td>Bill</td><td>Al</td></tr>
<tr><th>1991-2005</th><td>George</td><td>Dick</td></tr>
</table>

2.
<table border="1" cellspacing="0" cellpadding="5">
<caption align="bottom">
Competition in a Small Ecosystem</caption>
<tr>
<td rowspan="2"></td>
<th colspan="3">Population (in 1000s)</th>
</tr>
<tr>
<th>Lynxes</th>
<th>Hares</th>
<th>Mice</th>
</tr>
<tr align="center">
<th>1970</th>
<td>10.5</td>
<td>7.5</td>
<td>3.2</td>
</tr>
<tr align="center">
<th>1990</th>
<td>12.8</td>
<td>6.9</td>
<td>4.2</td>
</tr>
</table>
produces the following:

<table border="1" summary="Some properties that some animals have" cellpadding="5">
<caption>Quite a Stupid Table</caption>
<tr>
    <td colspan="2" rowspan="2"></td>
    <th colspan="3">Properties</th>
</tr>
<tr>
    <th>Tail?</th>
    <th>Feathers?</th>

    <th>Moos?</th>

</tr>
<tr>
    <th rowspan="3">Mammals</th>
    <th>Dogs</th><td>yes</td>
    <td>no</td><td>no</td>
</tr>

<tr>
    <th>Duckbill Platypuses</th>

    <td>yes</td>
    <td>no</td>
    <td>no</td>
</tr>
<tr>
    <th>Cows</th>

    <td>yes</td>

    <td>no</td>
    <td>yes</td>
</tr>
<tr>
    <th rowspan="2">Birds</th>
    <th>Penguins</th>

    <td>yes</td>

    <td>yes</td>
    <td>no</td>
</tr>
<tr>
    <th>Ducks</th>
    <td>yes</td>

    <td>yes</td>

    <td>no</td>
</tr>
</table>