HTML from Scratch: How to Make a Table in HTML. Lesson #14

When people hear “HTML tables,” many immediately think of old-school computer classes — grey boxes, lots of tags, and the feeling that it’s complicated and boring. But actually, it’s really simple! An HTML table is just a neat way to organize information into rows and columns.

Think of a table in your notebook: headings at the top, and rows of data below. HTML works the same way. Everything starts with one tag that tells the browser: “Hey, a table is coming!”

And that tag is <table>.

Inside it, we create rows (<tr> — table row) and cells. There are two types of cells:

• <th> — a header cell (bold and centered by default),

• <td> — a regular data cell.

Here’s an example of a simple table for a school schedule:

<table>
  <tr>
    <th>Lesson</th>
    <th>Subject</th>
    <th>Time</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Math</td>
    <td>08:30</td>
  </tr>
  <tr>
    <td>2</td>
    <td>History</td>
    <td>09:20</td>
  </tr>
  <tr>
    <td>3</td>
    <td>English</td>
    <td>10:10</td>
  </tr>
</table>

Each <tr> is a horizontal row, and each <td> is a cell.

Breaking It Down

1. <table> — starts the table.

2. <tr> — creates a row.

3. <th> — adds a header cell.

4. <td> — adds a regular data cell.

That’s it — just four simple tags!

Adding Borders

By default, tables have no visible lines — it’s just text. To make it look more like a real table, add the border attribute:

<table border="1">
  <tr>
    <th>Lesson</th>
    <th>Subject</th>
    <th>Time</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Math</td>
    <td>08:30</td>
  </tr>
  <tr>
    <td>2</td>
    <td>History</td>
    <td>09:20</td>
  </tr>
  <tr>
    <td>3</td>
    <td>English</td>
    <td>10:10</td>
  </tr>
</table>

Now you can clearly see the borders around each cell.

Useful Table Attributes

You can adjust how your table looks by adding a few simple attributes:

• border — adds a border around the table.
  <table border="1">

• cellpadding — adds space inside cells.
  <table border="1" cellpadding="5">

• cellspacing — adds space between cells.
  <table border="1" cellspacing="5">

• width — sets the width of the table or a column.
  <table width="100%"> — makes the table full width.

• align — aligns the table (left, right, or center).
  <table align="center">

• bgcolor — adds background color to the table or a cell.
  <table bgcolor="#f2f2f2"> or <td bgcolor="lightyellow">

• colspan and rowspan — merge cells horizontally or vertically.

<td colspan="2">Text</td>

A Bit of Style

Back in the day, people even used tables to design entire websites (no kidding!). Today, tables are used only for actual tabular data — like price lists, schedules, or reports.

If you want your table to look prettier, you can use CSS styles — but that’s a topic for another lesson.