Codectionary / Developer documentation / HTML

<table>

The <table> element displays tabular data in rows and columns. A well-structured table uses <thead> for column headers, <tbody> for the main data, <tr> for each row, <th> for header cells, and <td> for regular data cells. Tables should only be used for genuinely tabular data — never for page layout, which is what CSS Grid and Flexbox are for.

Syntax

<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </tbody>
</table>

Examples

Basic Table

A simple data table with headers and rows.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Developer</td>
      <td>Manchester</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>Designer</td>
      <td>Leeds</td>
    </tr>
  </tbody>
</table>

Table with Caption and Footer

Adding a caption and a summary row using tfoot.

<table>
  <caption>Quarterly Sales</caption>
  <thead>
    <tr><th>Quarter</th><th>Revenue</th></tr>
  </thead>
  <tbody>
    <tr><td>Q1</td><td>$12,000</td></tr>
    <tr><td>Q2</td><td>$15,500</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$27,500</td></tr>
  </tfoot>
</table>

Styled Table

A table with basic CSS styling for readability.

<table style="border-collapse: collapse; width: 100%;">
  <tr style="background: #f3f4f6;">
    <th style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Item</th>
    <th style="border: 1px solid #d1d5db; padding: 8px; text-align: left;">Price</th>
  </tr>
  <tr>
    <td style="border: 1px solid #d1d5db; padding: 8px;">Coffee</td>
    <td style="border: 1px solid #d1d5db; padding: 8px;">$4.50</td>
  </tr>
</table>

Attributes

  • colspan (number): Used on <td>/<th> to span multiple columns
  • rowspan (number): Used on <td>/<th> to span multiple rows

Best practices

  • Only use tables for genuinely tabular data, never for visual page layout
  • Always use <th> for header cells so screen readers can announce column/row context
  • Use <thead>, <tbody>, and <tfoot> to give the table clear structure
  • Add a <caption> to describe what the table contains
  • Use the scope attribute on <th> elements in complex tables to clarify row vs. column headers

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation

<col> and <colgroup>
The <colgroup> element groups one or more columns in a table for the purpose of applying styles, and <col> represents a single column within that group. This lets you style an entire column — like setting a background color or width — without adding a class to every individual cell in that column.HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.HTML Forms
HTML forms are used to collect user input and send it to a server for processing. They contain interactive controls like text fields, checkboxes, radio buttons, and submit buttons. Forms are a fundamental part of web interactivity, enabling everything from login pages and search bars to complex data entry interfaces.<div>
The <div> element is a generic container used to group and organize content on a web page. It has no semantic meaning on its own but is essential for layout and styling. Think of it as a box that can hold other HTML elements. Divs are block-level elements, meaning they start on a new line and take up the full width available.