HTML Tables

❮ Previous Next ❯
Lesson 23 of 58

HTML tables let you arrange data into rows and columns. Think of a spreadsheet like Excel or Google Sheets. That is exactly what HTML tables do on a webpage.

What is an HTML Table?

A table is made up of cells arranged in rows and columns. The cells can contain text, images, links, or even other tables.

Here is what a simple table looks like:

Simple Table Example

The border="1" in the example above just adds a thin border so you can see the table structure. You will learn better ways to style tables with CSS later.

Table Cells (The td Tag)

Each individual box in a table is called a cell. You create a cell with the <td> tag. “td” stands for “table data”.

Everything between <td> and </td> is what shows up inside that cell.

Table Cells Example

You can put almost anything inside a table cell. Text, images, lists, links, buttons, or even another table.

Table Rows (The tr Tag)

Rows are created with the <tr> tag. “tr” stands for “table row”. Each row contains one or more cells.

The number of cells in each row should usually be the same. Otherwise your table might look messy.

Table Rows Example

You can have as many rows as you want. Just add more <tr> tags.

Table Headers (The th Tag)

Header cells are special cells that tell what a column or row is about. They use the <th> tag instead of <td>. “th” stands for “table header”.

By default, text inside <th> is bold and centered. Regular cells are plain and left-aligned.

Table Headers Example

Notice how “Name”, “Age”, and “City” are bold and centered. Those are header cells. The actual data below them are regular cells.

Putting It All Together

Here is a more complete example showing a table with multiple rows, headers, and different types of data:

Complete Table Example

See how easy it is to read data when it is organized in a table? That is why tables are so useful.

Things You Can Put Inside a Table Cell

Table cells can contain almost any HTML element. Here are some examples:

Different Content in Cells

As you can see, tables are very flexible. You can even put a whole table inside another table cell, but that gets complicated fast. You probably will not need to do that.

Quick Summary

  • Use <table> to create a table.
  • Use <tr> to create a table row.
  • Use <td> to create a regular cell.
  • Use <th> to create a header cell (bold and centered by default).
  • Make sure each row has the same number of cells for the neatest look.
  • You can put text, images, lists, links, or other HTML inside table cells.

What Just Happened? Let Me Explain

  • Tables are perfect for showing data that makes sense in rows and columns. Think price lists, schedules, comparison charts, or statistics.
  • Do not use tables for layout. In the old days, people used tables to design whole websites. That is bad practice now. Use CSS Grid or Flexbox instead. Tables are for tabular data only.
  • Adding border="1" is just for learning. In real projects, you will use CSS to style your tables with borders, colors, padding, and more.
  • Screen readers read tables in a specific way. Using proper headers (<th>) helps people with visual impairments understand your data.
Tip: Open VS Code and create a file called tables.html. Make a table of your favorite movies. Include columns for Title, Year, Rating, and Genre. Add at least 5 rows of data. Then try adding a small image inside one of the cells. See how tables make information easy to read.

HTML Table Reference

Here are the tags we covered in this chapter:

Tag Description
<table> Creates a table
<tr> Creates a table row
<td> Creates a regular table cell (table data)
<th> Creates a header cell (bold and centered by default)
❮ Previous Next ❯
Lesson 23 of 58