Tables in HTML

Building a Table

A table displays data in rows and columns, which is ideal for information such as a timetable, a price list, or a set of results. A table is built from a few tags working together:

• <table> — wraps the whole table.
• <tr> — defines a table row.
• <th> — defines a header cell (usually shown bold and centred).
• <td> — defines an ordinary data cell.
• <caption> — gives the table a title, shown above it.

The example below builds a small price list:

<table border="1">
  <caption>Stationery Price List</caption>
  <tr>
    <th>Item</th>
    <th>Price (Rs.)</th>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Pen</td>
    <td>10</td>
  </tr>
</table>

This produces a two-column table with a header row ("Item" and "Price") and two data rows.

Spanning Cells

Two attributes let a single cell stretch across more than one column or row:

• colspan — makes a cell span several columns.
• rowspan — makes a cell span several rows.

<table border="1">
  <tr>
    <th colspan="2">Marks Report</th>
  </tr>
  <tr>
    <td>English</td>
    <td>85</td>
  </tr>
</table>

Here the header cell "Marks Report" spans both columns of the table because of colspan="2".

A Note on Tables and Layout …