HTML Tables

In this HTML tutorial, we’ll explore the <table> element and its associated elements to create tables. Tables are essential for displaying structured data in a grid format on web pages. We’ll cover the basic structure of tables, how to create rows and columns and how to add data within the cells.

Introduction to Tables

Tables in HTML are used to display data in a structured and organized manner. They consist of rows and columns where data is placed in cells. Tables are commonly used for displaying information such as charts, schedules, pricing, and more.

The <table> Element

The <table> element is the container for creating tables. It can contain the following essential elements:

  • <tr>: Table Row
  • <th>: Table Header Cell
  • <td>: Table Data Cell
  • <caption>: Table Caption
  • <thead>: Table Header Section
  • <tbody>: Table Body Section
  • <tfoot>: Table Footer Section

Creating a Basic Table

Let’s start by creating a simple table with three rows and three columns:

This code creates a basic 3×3 table.

Adding Table Headers

To add table headers to the first row of the table, we use the <th> element:

In this example, the first row is used as the header row.

Table Captions

A table can include a caption for describing the table’s content:


Tables are a fundamental part of HTML, allowing you to present data in a structured format. Understanding the structure and elements associated with tables is crucial for web developers. With the knowledge gained in this tutorial, you can create tables for various purposes on your websites.

Tables are versatile and can be further enhanced with CSS for styling and JavaScript for dynamic functionality. Experiment with tables to display data effectively and improve the user experience on your web projects. Happy coding!