Tables

These examples use the defaults or standard definition of table elements.

    
<table>
  <tr>
    <td>Fruit</td>
    <td>Vegetable</td>
  </tr>
  <tr>
    <td>apple</td>
    <td>corn</td>
  </tr>
  <tr>
    <td>blue berry</td>
    <td>peas</td>
  </tr>
</table> 

    
<table><tr><td>Fruit</td><td>Vegetable</td></tr><tr><td>apple</td>
<td>corn</td></tr><tr><td>blue berry</td><td>peas</td></tr></table> 

As you can see, even a simple table requires lots of HTML code. The worst part is that you cannot enter data graphically, by pointing to a cell and typing. (You could if we were using a high-level tool.) Instead, you have to keep track of which column you are entering data for. Not too bad if the data is organized by rows, but very hard if the data is organized by columns.

It should be clear from the simple example above that the lines or "borders" help to understand the table format. You should use these when setting up a table, even if you later turn them off to make the table invisible.

More Table Features

In the following example, I change the first row by making these cells Table Headers <TH> </TH> and by adding a background color. The header cells are automatically made bold face and centered.

    
<table border="1">
  <tr>
    <th>Fruit</th>
    <th>Vegetable</th>
  </tr>
  <tr>
    <td>apple</td>
    <td>corn</td>
  </tr>
  <tr>
    <td>blue berry</td>
    <td>peas</td>
  </tr>
</table> 

Looking carefully at the example, you will notice that the example itself is in an invisible table. For clarity, I added some background color and allowed more space between the edge of a cell and the enclosed text than is normal. From this example, you can gather that individual cells of a table may be modified by attributes and, even more surprising, a table can be placed inside of another table. We won't do that for a while yet.

Imagine what the code would look like without indentation! You can see what it looks like with reasonable indentation by viewing the source code for this page and searching for table name="more"

Simple Table Attributes

There are lots of attributes or properties that we can modify for tables. We will start with color and alignment. First recall that tables are organized first by the TABLE tag, then by row (TR), then by cell data (TD). When we apply attributes to the TABLE it applies to the entire table. When applied to the row(TR), it applies to the entire row. Cells (TD) apply only to that cell. Attributes for the TABLE can be overridden by attributes for a row or cell. Attributes for a row may be overridden by attributes for a cell.

    
<table border="1" bgcolor="#DADADA">
  <tr>
    <th>Fruit</th>
    <th>Vegetable</th>
  </tr>
  <tr bgcolor="#FF8888">
    <td>apple</td>
    <td bgcolor="#ffff88" align="right">corn</td>
  </tr>
  <tr>
    <td bgcolor="#8888ff">blue<br>berry</td>
    <td bgcolor="#88ff88" align="center" valign="top">peas</td>
  </tr>
</table> 

In this example

• The entire table is given a gray background color
• Row 2 has a red background, although this is overridden by the second cell in row 2
• The data cells in row 3 have their own background color
• Corn is right-aligned (default is left-aligned).
• Peas is center-aligned.
• Peas is aligned with the top of the cell (vertical centering is the default).

Summary of Table Tags & Attributes