Tables

When to use a table

A table shows data that has two dimensions: a list of products with a price and a stock level, a cricket scoreboard, a bus timetable. Each piece of data sits at the crossing of a row and a column, and reading it makes sense only if you know both.

A table is not a layout tool. In the late 1990s, designers used invisible tables to place sidebars and logos. That is now wrong: it confuses screen readers and breaks on phones. Layout is the job of CSS, which you will learn later.

The basic structure

<table border="1" cellpadding="6">
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>In stock</th>
  </tr>
  <tr>
    <td>Sourdough loaf</td>
    <td>₹120</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Multigrain bun</td>
    <td>₹25</td>
    <td>No</td>
  </tr>
</table>

(border and cellpadding are old attributes used here only so you can see the grid. Real pages style tables with CSS.)

• table wraps everything.
• tr is one table row.
• th is a table header cell: bold and centred by default, and understood by assistive technology as a label.
• td is a table data cell.

Every row should have the same number of cells (counting any that are merged). If you forget one, the grid looks lopsided.

Grouping rows: thead, tbody, tfoot

For longer tables, group rows by their role:

<table>
  <thead>
    <tr><th>Month</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>January</td><td>₹42,000</td></tr>
    <tr><td>February</td><td>₹38,500</td></tr>
  </tbody>
  <tfoot>
    <tr><th>Total</th><td>₹80,500</td></tr>
  </tfoot>
</table>

These groups add meaning and give CSS something to target: for example, keeping the header visible while the body scrolls. Browsers also insert a tbody for you if you leave it out.

Merging cells: colspan and rowspan

Sometimes one cell needs to cover several columns or rows.

<table border="1" cellpadding="6">
  <tr>
    <th rowspan="2">Day</th>
    <th colspan="2">Timings</th>
  </tr>
  <tr>
    <th>Opens</th>
    <th>Closes</th>
  </tr>
  <tr>
    <td>Monday</td><td>9:00</td><td>18:00</td>
  </tr>
</table>

• colspan="2" makes "Timings" cover two columns.
• rowspan="2" makes "Day" cover two rows.

When you merge cells, leave out the cells that are covered. In the second row above there are only two th cells because "Day" already occupies the first column.

Merged cells make tables harder for screen readers. Use them when the data really needs them, and keep the structure as simple as you can.

Keeping tables readable on small screens

A wide table does not fit on a phone. Wide tables should scroll horizontally inside their own box rather than stretching the whole page. With a wrapper and one line of CSS you can do it (you will learn the property in the CSS course):

<div style="overflow-x: auto">
  <table>…</table>
</div>

For a table with only two or three columns, a list may read better on a phone than a grid.

Styling is for CSS

Old HTML had attributes such as border, bgcolor and width on tables. Do not use them in new work. Keep the HTML for structure and use CSS for borders, spacing and colours.

Common mistakes

• Layout tables. Use CSS Flexbox or Grid instead.
• Using td for headings instead of th, which loses the label meaning.
• Rows with different cell counts, usually after a merge.
• Putting a table inside a paragraph or list item for no reason.
• Using a table for a simple list. If it has one column, a list is better.

Exercise

Create a timetable with a header row (Subject, Day, Time) and three rows of data. Use thead and tbody.

<table>
  <thead>
    <tr><th>Subject</th><th>Day</th><th>Time</th></tr>
  </thead>
  <tbody>
    <tr><td>Maths</td><td>Monday</td><td>10:00</td></tr>
    <tr><td>Science</td><td>Tuesday</td><td>11:00</td></tr>
    <tr><td>English</td><td>Wednesday</td><td>09:30</td></tr>
  </tbody>
</table>