Create Tables

Introduction

Web pages often need to display information in an organized way. Examples include class schedules, product prices, event times, and sports results. HTML tables are designed for this kind of structured data.

In this lesson, you will create a table for a small community event. You will learn how to add a caption, define headings, create rows, and place data into cells. By the end, your table will clearly communicate information to a visitor.

A table is best for data that naturally fits into rows and columns. Do not use tables to control the overall layout of a webpage.

How HTML Tables Work

A table is made from several related elements. The outer <table> element contains everything. A <caption> gives the table a clear title. Each row is created with <tr>, which means “table row.”

Header cells use <th>. They label the information in a column or row. Regular data cells use <td>. A simple table usually has one header row followed by several data rows.

• <table>: contains the complete table
• <caption>: describes what the table is about
• <tr>: creates a row
• <th>: creates a header cell
• <td>: creates a regular data cell

Keep each row consistent. If the header row has three cells, each data row should normally have three cells as well.

Worked Example

The following example shows a schedule for a community coding club. Notice that the caption appears inside the table, before the rows.

<table>
  <caption>Community Coding Club Schedule</caption>
  <tr>
    <th>Day</th>
    <th>Topic</th>
    <th>Room</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>HTML Basics</td>
    <td>101</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>CSS Introduction</td>
    <td>102</td>
  </tr>
</table>

The first row contains headings: Day, Topic, and Room. The next two rows contain matching values. Because the cells are in the same order, a reader can understand which value belongs to which heading.

Guided Activity: Build an Event Schedule

Now create a table for a “Weekend Makers Fair.” Your table should include the event name as a caption and information about three activities.

1. Open the HTML file for your practice webpage.
2. Type an opening <table> tag and a closing </table> tag.
3. Inside the table, add a caption such as Weekend Makers Fair Schedule.
4. Create one header row with three <th> cells: Time, Activity, and Location.
5. Add three data rows using <td> cells.
6. Choose realistic details, such as 10:00 AM, Robot Demonstration, and Main Hall.
7. Save the file and open it in a browser.
8. Check that every row has three cells and that the information lines up under the correct heading.

Your basic structure should look like this:

<table>
  <caption>Weekend Makers Fair Schedule</caption>
  <tr>
    <th>Time</th>
    <th>Activity</th>
    <th>Location</th>
  </tr>
  <tr>
    <td>10:00 AM</td>
    <td>Robot Demonstration</td>
    <td>Main Hall</td>
  </tr>
</table>

Add two more data rows before the closing table tag. Read your table aloud: the caption should explain the table, and each heading should make the values below it understandable.

Common Mistake

A common mistake is placing header text inside regular <td> cells. For example, using <td>Time</td> instead of <th>Time</th> makes the first row look like ordinary data and gives it less meaning.

Another frequent problem is creating a different number of cells in one row. If a table has three headings, each data row should normally contain three matching cells. Count the cells in every row before moving on.

Independent Challenge

Create a table for a small café menu. Include:

• A caption describing the menu
• One header row with Item, Category, and Price
• At least four menu items
• A consistent number of cells in every row
• Prices written as text, such as $4.50

When finished, review your work. Can someone understand the table without extra explanation? Are the headings accurate? Does every row contain the same type of information in the same order?

Quick Review

• Use <table> to contain structured tabular data.
• Use <caption> to describe the table.
• Use <tr> for rows.
• Use <th> for headings.
• Use <td> for regular data cells.
• Keep the structure consistent across rows.

You have now built a table that presents information in a clear, meaningful structure. This skill will be useful whenever your website needs to show schedules, comparisons, lists of data, or other organized information.