TablesCore· 40 min read

Building Tables

Display rows and columns of data — timetables, price lists, results — with HTML tables.

What you will learn

  • Build a table with rows and cells
  • Use header cells correctly
  • Group rows with <thead> and <tbody>

Tables are built row by row

  • <table> — wraps the whole table.
  • <tr> — a table row.
  • <td> — a table data cell (one box inside a row).

You do not create columns directly — they appear when each row has the same number of cells.

Build a table in this order:

  1. Open a <table> to hold the whole grid.
  2. Add a <tr> for the first row.
  3. Inside that row, add one <td> for each cell in the row.
  4. Repeat <tr><td> for every other row, keeping the same number of cells in each.
  5. Close the <table>. Columns line up automatically.
Two rows, two cells each
<table border="1">
  <tr>
    <td>Name</td>
    <td>Course</td>
  </tr>
  <tr>
    <td>Asha</td>
    <td>HTML</td>
  </tr>
</table>
Live preview

Read it row by row: the first <tr> holds two cells (“Name”, “Course”); the second <tr> holds two more (“Asha”, “HTML”). Because each row has two cells, the browser lines them up into two neat columns.

Note: Output: A 2×2 grid: Name | Course Asha | HTML We added border="1" so you can see the grid while learning. In real projects we draw borders with CSS instead.

Header cells

For the top row of labels, use <th> (table header) instead of <td>. Browsers show header cells bold and centred, and screen readers announce them as headers.

<th> for the header row
<table border="1">
  <tr>
    <th>Day</th>
    <th>Topic</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>HTML Basics</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>Links &amp; Images</td>
  </tr>
</table>
Live preview

The only change is in the top row: the two cells use <th> instead of <td>. Browsers automatically show <th> cells bold and centred, marking them clearly as column headers. The data rows below still use <td> as normal.

Note: Output: Day | Topic (this row bold, as headers) Monday | HTML Basics Tuesday | Links & Images

Group the parts

For tidier, clearer tables, wrap the header row in <thead> and the data rows in <tbody>. It does not change the look much, but it tells the browser which row is the heading and which are the data.

<thead> + <tbody> structure
<table border="1">
  <thead>
    <tr><th>Item</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Tea</td><td>₹20</td></tr>
    <tr><td>Coffee</td><td>₹30</td></tr>
  </tbody>
</table>
Live preview

<thead> groups the single header row, and <tbody> groups the two data rows. The cells inside still follow the same <tr>/<th>/<td> rules — the wrappers just label the parts of the table.

Note: Output: Item | Price (header row) Tea | ₹20 Coffee| ₹30

Q. Which tag creates a single row in a table?

Answer: <tr> is a table row. Inside it you place cells: <td> for data and <th> for headers.

✍️ Practice

  1. Build a 3-column table (Name, Email, City) with a header row and three data rows.
  2. Create your weekly class timetable with <thead> and <tbody>.

🏠 Homework

  1. Recreate a simple café price menu (item + price) as a clean table.
Want to learn this with a mentor?

CodingClave runs guided, project-based training (28-day, 45-day & 6-month batches).

Explore Training →