AlgoInsight

Q&A

What is an HTML table?

By AlgoInsight Team2026-06-18frontendweb-developmentcsshtml

Overview

The HTML table element is for displaying two-dimensional relational data - spreadsheet-style. It has a well-defined set of elements that structure the data semantically, making it accessible to screen readers and parsable by tools. Using tables for page layout (a legacy practice) is now an anti-pattern; CSS layout models should be used instead.

graph TD
    A["<table>"] --> B["<caption> optional title"]
    A --> C["<thead> header rows"]
    A --> D["<tbody> data rows"]
    A --> E["<tfoot> footer rows"]
    C & D & E --> F["<tr> row"]
    F --> G["<th> header cell"]
    F --> H["<td> data cell"]
    style A fill:#1e1b4b,color:#fff

A Basic Table

<table>
  <caption>Monthly Revenue</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
      <th scope="col">Expenses</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>
2,000</td>
      <td>$8,500</td>
    </tr>
    <tr>
      <td>February</td>
      <td>
5,000</td>
      <td>$9,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$27,000</td>
      <td>
7,500</td>
    </tr>
  </tfoot>
</table>

Core Elements

Element Purpose
<table> Container for the whole table
<caption> Title/description of the table (important for accessibility)
<thead> Groups header rows (bold, doesn't scroll with a fixed-header table)
<tbody> Groups data rows (can have multiple <tbody> sections)
<tfoot> Groups footer rows (totals, summaries)
<tr> A single row
<th> Header cell - bold, centered, has implicit scope; read by screen readers as a heading
<td> Data cell

Spanning Rows and Columns

colspan makes a cell span multiple columns; rowspan spans multiple rows:

<tr>
  <th rowspan="2">Q1</th>    <!-- spans 2 rows -->
  <td>January</td>
</tr>
<tr>
  <td>February</td>           <!-- Q1 header covers this row too -->
</tr>

<tr>
  <td colspan="3">Total</td>  <!-- one cell spanning 3 columns -->
</tr>

Accessibility: scope and headers

<th scope="col"> tells assistive technology the header applies to the entire column; scope="row" for row headers. For complex tables, the headers attribute on <td> can reference multiple <th id>s explicitly:

<th id="q1" scope="row">Q1</th>
<td headers="q1 revenue">
2,000</td>

Styling Tables with CSS

table   { border-collapse: collapse; width: 100%; }
th, td  { padding: 8px 12px; text-align: left; border: 1px solid #ddd; }
th      { background: #1e1b4b; color: #fff; }
tr:nth-child(even) td { background: #f9f9f9; }   /* zebra striping */

border-collapse: collapse removes the default double border between cells.

Tables Are NOT for Layout

Using <table> to position page sections was a 1990s practice. Modern layout uses CSS Flexbox and Grid. Tables used for layout are inaccessible (screen readers announce them as data grids), hard to make responsive, and semantically wrong. Only use <table> for genuinely tabular, relational data.

Why This Matters in Interviews

HTML interviews use the table to test semantic markup knowledge and accessibility awareness. Cover: the semantic hierarchy (table → thead/tbody/tfoot → tr → th/td), colspan/rowspan for spanning, <caption> and scope for accessibility, border-collapse in CSS, and - critically - that tables are for data, not layout (a long-standing best practice). Explaining <th scope="col"> and its accessibility role shows depth.

Common Pitfalls

References

More answers