HTML Tables Tutorial for Beginners

HTML tables are used to display structured data in rows and columns. In this lesson, you will learn how to create HTML tables, use table headings, captions, table sections, merged cells, accessibility features, SEO best practices, and common table mistakes.

What Are HTML Tables?

HTML tables organize data into rows and columns. They are useful for presenting comparison data, pricing plans, reports, schedules, product specifications, scoreboards, and other structured information.

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Developer</td>
  </tr>
</table>

HTML Tables Cheatsheet

The following table shows the most commonly used HTML table tags, attributes, and patterns beginners should know.

Table Feature	Example	Purpose
Table	`<table></table>`	Creates a table container.
Table Row	`<tr></tr>`	Creates a row inside a table.
Table Header	`<th>Name</th>`	Creates a header cell.
Table Data	`<td>John</td>`	Creates a normal data cell.
Table Head	`<thead></thead>`	Groups table header rows.
Table Body	`<tbody></tbody>`	Groups main table rows.
Table Footer	`<tfoot></tfoot>`	Groups summary or footer rows.
Caption	`<caption>User List</caption>`	Adds a table title or explanation.
Column Span	`<td colspan="2">Total</td>`	Merges columns horizontally.
Row Span	`<td rowspan="2">Admin</td>`	Merges rows vertically.

Basic HTML Table Example

<table>
  <tr>
    <th>Course</th>
    <th>Level</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
    <td>2 Weeks</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Beginner</td>
    <td>3 Weeks</td>
  </tr>
</table>

The <th> cells describe the column headings, while <td> cells contain the actual table data.

HTML Table Sections

For larger tables, use <thead>, <tbody>, and <tfoot> to organize content clearly.

<table>
  <caption>Frontend Course Plan</caption>

  <thead>
    <tr>
      <th>Topic</th>
      <th>Status</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>HTML</td>
      <td>Completed</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>In Progress</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Updated weekly</td>
    </tr>
  </tfoot>
</table>

HTML Table Caption

The <caption> tag adds a short title or explanation for a table. It improves readability and accessibility.

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$10,000</td>
  </tr>
</table>

Colspan and Rowspan in HTML Tables

Use colspan to merge columns and rowspan to merge rows.

Colspan Example

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td colspan="2">Special Discount Available</td>
  </tr>
</table>

Rowspan Example

<table>
  <tr>
    <th>Department</th>
    <th>Employee</th>
  </tr>
  <tr>
    <td rowspan="2">Engineering</td>
    <td>Asha</td>
  </tr>
  <tr>
    <td>Ravi</td>
  </tr>
</table>

Accessible HTML Tables

Accessible tables help screen readers understand the relationship between headers and data cells.

<table>
  <caption>Student Scores</caption>
  <thead>
    <tr>
      <th scope="col">Student</th>
      <th scope="col">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anu</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

Use <caption> to describe the table.
Use <th> for header cells.
Use scope="col" or scope="row" when needed.
Avoid using tables only for page layout.

Responsive HTML Tables

Wide tables may overflow on small screens. Wrap tables in a responsive container so users can scroll horizontally on mobile devices.

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Course</th>
        <th>Level</th>
        <th>Duration</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HTML</td>
        <td>Beginner</td>
        <td>2 Weeks</td>
      </tr>
    </tbody>
  </table>
</div>

SEO-Friendly HTML Tables

Tables can help search engines understand structured information such as pricing, comparisons, statistics, schedules, and specifications.

Use tables only for real tabular data.
Add clear table captions when helpful.
Use meaningful column and row headings.
Keep table data accurate and easy to scan.
Use surrounding headings and paragraphs to explain the table.
Make tables responsive for mobile users.

Common HTML Table Mistakes

Using tables for page layout instead of CSS.
Forgetting table headings with <th>.
Not using captions for complex tables.
Creating very wide tables without responsive scrolling.
Using too many merged cells, making tables hard to understand.
Not using scope where header relationships need clarity.

Key Takeaways

HTML tables display structured data in rows and columns.
Use <table>, <tr>, <th>, and <td> for basic tables.
Use <thead>, <tbody>, and <tfoot> for larger tables.
Use <caption> to describe table content.
Use colspan and rowspan only when needed.
Use responsive wrappers for mobile-friendly tables.

Pro Tip

Use HTML tables only for tabular data, not page layouts. For layout design, use CSS Grid, Flexbox, or Bootstrap layout utilities.