Table Spans and Headers

Colspan Summary

One Cell Labels Several Columns

A simple cost table uses colspan so the Total label covers two columns while the final amount stays aligned.

Program

Column spans merge cells horizontally. They are common in summary rows that need a wide label and one final value.

colspan_summary.html
Visuals: captured from real browser rendering
<table>
  <tr><th>Item</th><th>Qty</th><th>Cost</th></tr>
  <tr><td>Badges</td><td>4</td><td>$20</td></tr>
  <tr><td colspan="2">Total</td><td>$20</td></tr>
</table>

  1. Create the cost table.

    An empty cost table appears.
    The table starts the grid that the summary row will use.

  2. Add Item, Qty, and Cost headers.

    The table shows three labeled columns.
    Headers make the item, quantity, and cost meanings explicit.

  3. Add the Badges data row.

    A Badges row appears under the headers.
    The data row fills the three-column grid normally.

  4. Span the Total label across two columns.

    The Total label stretches across Item and Qty.
    colspan lets the summary label occupy the space of two cells.

  5. Keep the total value in the Cost column.

    The final amount stays aligned under Cost.
    The spanned label changes the first cells while the value remains in the last column.
colspan The colspan attribute lets one cell occupy multiple columns.
summary row A summary row totals or describes the data rows above it.