What is Table structure in HTML?

HTMLmarkup~5 mins

Table structure in HTML

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Tables help organize data in rows and columns so it is easy to read and understand.

To show a list of items with details, like a price list.

To display schedules or timetables clearly.

To compare features side by side.

To organize data like names, dates, or numbers in a grid.

To create forms or layouts that need rows and columns.

Syntax

HTML

<table>
  <caption>Table title</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
</table>

<table> is the main container for the table.

<thead>, <tbody>, and <tfoot> group the header, body, and footer rows.

<tr> defines a row.

<th> is for header cells, usually bold and centered.

<td> is for regular data cells.

Examples

A simple table with two columns and one data row.

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Table with header and multiple data rows grouped properly.

HTML

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Book</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Pen</td>
      <td>$2</td>
    </tr>
  </tbody>
</table>

Table with a caption and footer showing total.

HTML

<table>
  <caption>Monthly Sales</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>1000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>1000</td>
    </tr>
  </tfoot>
</table>

Sample Program

This example shows a neat table with a caption, header, body, and footer. It uses simple styling for clarity and accessibility with aria-label and scope attributes.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Simple Table Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
      max-width: 400px;
      margin: 1rem auto;
      font-family: Arial, sans-serif;
    }
    caption {
      font-weight: bold;
      margin-bottom: 0.5rem;
      font-size: 1.25rem;
    }
    th, td {
      border: 1px solid #333;
      padding: 0.5rem;
      text-align: left;
    }
    thead {
      background-color: #f0f0f0;
    }
    tfoot {
      background-color: #f9f9f9;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <main>
    <table aria-label="Fruit prices">
      <caption>Fruit Prices</caption>
      <thead>
        <tr>
          <th scope="col">Fruit</th>
          <th scope="col">Price per kg</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>$3</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>Cherry</td>
          <td>$5</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total Fruits</td>
          <td>3</td>
        </tr>
      </tfoot>
    </table>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Always use <th> for headers to help screen readers understand the table.

Use scope="col" or scope="row" on <th> for better accessibility.

Tables should be used only for tabular data, not for page layout.

Summary

Tables organize data in rows and columns for easy reading.

Use <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> tags properly.

Include captions and accessibility features for better user experience.