Table structure in HTML

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>

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.

Practice

1. Which HTML tag is used to create a row inside a table?

easy

A. <tr>

B. <td>

C. <th>

D. <table>

Solution

1. Step 1: Understand table row structure

   The <tr> tag defines a row in an HTML table.

2. Step 2: Differentiate row from cells

   <td> and <th> define cells, not rows.

3. Final Answer:

   <tr> -> Option A

4. Quick Check:

   Row tag = <tr> [OK]

Hint: Rows use <tr>, cells use <td> or <th> [OK]

Common Mistakes:

• Confusing <tr> with <td>
• Using <th> for rows
• Using <table> for rows

2. Which is the correct way to start a table header section in HTML?

easy

A. <thead>

B. <tbody>

C. <tfoot>

D. <th>

Solution

1. Step 1: Identify header section tag

   The <thead> tag defines the header section of a table.

2. Step 2: Differentiate from body and footer

   <tbody> is for body rows, <tfoot> for footer, and <th> is a cell tag.

3. Final Answer:

   <thead> -> Option A

4. Quick Check:

   Header section = <thead> [OK]

Hint: Table header section starts with <thead> [OK]

Common Mistakes:

• Using <tbody> for header
• Using <th> as section tag
• Confusing <tfoot> with header

3. What will the following HTML code display?

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

medium

A. A table with one column named NameAge and one row with Alice30

B. A table with two columns: Name and Age, and one row with Alice and 30

C. An error because <th> cannot be inside <tr>

D. A table with two rows but no columns

Solution

1. Step 1: Analyze table header row

   The first <tr> has two <th> cells: 'Name' and 'Age', creating two columns.

2. Step 2: Analyze data row

   The second <tr> has two <td> cells: 'Alice' and '30', filling the columns.

3. Final Answer:

   A table with two columns: Name and Age, and one row with Alice and 30 -> Option B

4. Quick Check:

   Headers + data cells = two columns, one data row [OK]

Hint: Headers create columns; data fills rows [OK]

Common Mistakes:

• Thinking <th> can't be in <tr>
• Merging headers into one column
• Ignoring data cells

4. Find the error in this table code:

<table>
  <tr><td>Item</td><td>Price</td></tr>
  <td>Book</td><td>$10</td>
</table>

medium

A. Table must have <thead> and <tbody> tags

B. Using <td> inside <table> is invalid

C. Missing <tr> tags around second row cells

D. Price cell should use <th> instead of <td>

Solution

1. Step 1: Check row structure

   The second row cells <td>Book</td><td>$10</td> are not wrapped inside a <tr> tag, which is required.

2. Step 2: Validate table syntax

   Each row must be inside <tr>. Missing it causes invalid structure.

3. Final Answer:

   Missing <tr> tags around second row cells -> Option C

4. Quick Check:

   Rows need <tr> tags [OK]

Hint: Every row's cells must be inside <tr> [OK]

Common Mistakes:

• Omitting <tr> tags
• Thinking <td> can be direct child of <table>
• Confusing <th> and <td> usage

5. You want to create a table with a caption, a header row, a body with two rows, and a footer row. Which is the correct structure?

hard

A. <table><caption>Title</caption><thead><tr><td>H1</td></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

B. <table><thead><caption>Title</caption><tr><th>H1</th></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

C. <table><caption>Title</caption><tbody><tr><th>H1</th></tr><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

D. <table><caption>Title</caption><thead><tr><th>H1</th></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

Solution

1. Step 1: Confirm caption placement

   The <caption> tag must be directly inside <table>, before <thead>.

2. Step 2: Check header, body, and footer tags

   <thead> contains header row with <th>, <tbody> has two data rows, and <tfoot> has footer row.

3. Step 3: Validate cell tags in header

   Header cells use <th>, not <td>.

4. Final Answer:

   Correct structure: caption first, thead with th, tbody with two rows, tfoot -> Option D

5. Quick Check:

   Caption + thead + tbody + tfoot correct order [OK]

Hint: Caption first, then thead, tbody, tfoot with proper cells [OK]

Common Mistakes:

• Placing caption inside thead
• Using <td> in header
• Omitting tbody
• Wrong tag order