HTML Tables — How to Create Tables with Examples

Tables in HTML are used for one thing — displaying data that has a meaningful row-and-column relationship. Pricing plans, comparison charts, schedules, spreadsheet-style data. If you are following from What is HTML? A Complete Beginner Guide with Examples, tables are one of the more structured elements you will encounter. But once the pattern clicks it becomes second nature to write.

One thing worth mentioning upfront: tables should never be used for page layout. That is what CSS is for. In the early days of the web, developers used tables to position columns of content on the page. Do not do that. Tables are for tabular data only.

Basic Table Structure

A basic HTML table uses four main tags working together: <table>, <tr>, <th>, and <td>.

<table>n  <tr>n    <th>Name</th>n    <th>Age</th>n    <th>City</th>n  </tr>n  <tr>n    <td>Raj</td>n    <td>24</td>n    <td>Mumbai</td>n  </tr>n  <tr>n    <td>Priya</td>n    <td>28</td>n    <td>Delhi</td>n  </tr>n</table>

<table> wraps everything. <tr> is a table row. <th> is a header cell — bold and centred by default. <td> is a regular data cell. Each <tr> should have the same number of cells for the table to align properly.

Table Sections — thead, tbody, tfoot

For well-structured semantic tables, group rows into sections using <thead>, <tbody>, and <tfoot>.

<table>n  <thead>n    <tr>n      <th>Course</th>n      <th>Duration</th>n      <th>Price</th>n    </tr>n  </thead>n  <tbody>n    <tr>n      <td>HTML Basics</td>n      <td>2 hours</td>n      <td>Free</td>n    </tr>n    <tr>n      <td>CSS Fundamentals</td>n      <td>3 hours</td>n      <td>Free</td>n    </tr>n  </tbody>n  <tfoot>n    <tr>n      <td colspan="2">Total</td>n      <td>Free</td>n    </tr>n  </tfoot>n</table>

This structure helps browsers, screen readers, and CSS target specific parts of the table independently. <thead> holds header rows. <tbody> holds the main data rows. <tfoot> holds footer rows like totals or summaries.

Spanning Columns and Rows — colspan and rowspan

Sometimes a single cell needs to stretch across multiple columns or multiple rows. The colspan attribute handles horizontal spanning. rowspan handles vertical spanning.

<table>n  <tr>n    <th colspan="2">Full Name</th>n    <th>Score</th>n  </tr>n  <tr>n    <td>First</td>n    <td>Last</td>n    <td>95</td>n  </tr>n</table>

The colspan=”2″ makes the “Full Name” header span two columns — covering both First and Last columns below it. Rowspan works the same logic but vertically across rows. Be careful with these — miscounting cells when using span attributes is a common source of broken table layouts.

Adding a Table Caption

The <caption> element adds a visible title to the table. It goes immediately after the <table> opening tag and is displayed centred above the table by default.

<table>n  <caption>Top Programming Languages — 2025 Rankings</caption>n  <tr>n    <th>Language</th>n    <th>Rank</th>n  </tr>n  <tr><td>Python</td><td>1</td></tr>n  <tr><td>JavaScript</td><td>2</td></tr>n</table>

It is a small addition but it significantly improves accessibility for screen reader users who navigate by table headings.

Next in the series is probably the most powerful HTML topic for building interactive pages — HTML Forms and Input Elements — Complete Guide with Examples. Forms let users type input, select options, and submit data. They are how login pages, search bars, contact forms, and signup flows are all built.