Tables

Elements of a Table

<table> ... </table>
Encloses the HTML defining the table and defines attributes of the table, including width, border, cellspacing, cellpadding, and align
<caption> ... </caption>
Defines a caption for the table
<tr> ... </tr>
Defines a table row.
<th> ... </th>
Defines a heading for a column in a table.
<td> ... </td>
Defines data in a specific table cell.

A Simple Table

This table has a caption, a header row, and two data rows.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>A Basic Table</title>
</head>
<body>
  <table summary="Basic Table">
    <caption>
      A Basic Table
    </caption>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Analyst</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Technician</td>
    </tr>
  </table>
</body>
</html>

How It Displays

A Basic Table
Name Position
Mary Analyst
John Technician


Improving Appearance

You can make your table easier to read by using CSS to add background color, borders, padding, and more.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>A Basic Table</title>
  <style type="text/css">
<!-- 
   table { background: #ddddff;  }
   caption { font-style: italic; }
   th  { background: #ffdddd; padding: 1em;  }
   td  { background: #ddffdd; padding: .5em; }
-->
  </style>
</head>
<body>
  <table summary="Basic Table">
    <caption>
      A Basic Table
    </caption>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Analyst</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Technician</td>
    </tr>
  </table>
</body>
</html>

How It Displays

A Basic Table
Name Position
Mary Analyst
John Technician

Resources

From the W3Schools HTML 4.01/XHTML 1.0 Reference: