📊 Phase 4 · Tables & Forms🟢 BeginnerModule 05

Tables Basics

⏱ 18 min read📖 5 sections🧩 5-question quiz🏆 1 challenge

Course Progress43% complete

HTML tables display two-dimensional tabular data — rows and columns of information with a clear relationship between them. They are misused more than almost any other HTML element. Understanding when and how to use them correctly, with proper semantic markup, makes your data accessible, readable, and maintainable.

Section 1

When to Use Tables

Tables are for tabular data — information that has a meaningful row/column relationship. They are not for page layout (that's what CSS Grid and Flexbox are for).

✅

Good uses of tables

• Comparison tables (features, pricing plans)
• Sports standings or leaderboards
• Financial data, schedules, timetables
• Technical specifications
• Any data where rows and columns both have meaning

❌

Bad uses of tables

• Page layout (nav on left, content on right) — use CSS
• Image galleries — use CSS Grid
• Side-by-side text blocks — use Flexbox
• Any content that isn't genuinely tabular data

Section 2

Core Table Elements

A basic HTML table uses four elements: <table>, <tr>, <th>, and <td>. Think of it like a spreadsheet — rows contain cells.

Element	Stands for	Purpose
`<table>`	Table	The container for the entire table
`<tr>`	Table Row	A horizontal row of cells
`<th>`	Table Header	A header cell — bold, centred by default, semantic meaning
`<td>`	Table Data	A regular data cell
`<caption>`	Caption	A descriptive title for the table (accessibility)

Section 3

Your First Table

HTMLBasic table structure

<table>
  <caption>Web Programming Languages Comparison</caption>

  <!-- Header row -->
  <tr>
    <th>Language</th>
    <th>Type</th>
    <th>Use Case</th>
  </tr>

  <!-- Data rows -->
  <tr>
    <td>HTML</td>
    <td>Markup</td>
    <td>Structure</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Stylesheet</td>
    <td>Styling</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Scripting</td>
    <td>Interactivity</td>
  </tr>
</table>

Rendered with CSS, that code produces:

Web Programming Languages Comparison
Language	Type	Use Case
HTML	Markup	Structure
CSS	Stylesheet	Styling
JavaScript	Scripting	Interactivity

Section 4

th vs td — Semantic Difference

Using <th> for header cells isn't just visual — it adds semantic meaning that screen readers use to associate headers with data cells. Screen readers say "Language: HTML, Type: Markup" instead of just reading raw values.

HTMLColumn and row headers

<table>
  <!-- Column headers (th in first row) -->
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>

  <!-- Row with row header in first cell -->
  <tr>
    <th>Alice</th>  <!-- row header -->
    <td>92</td>
    <td>A</td>
  </tr>
</table>

Section 5

Basic Table Styling

By default HTML tables have no borders or padding. Use CSS border-collapse: collapse to merge borders, and padding on cells for readable spacing.

CSSEssential table CSS

table {
  width: 100%;
  border-collapse: collapse;   /* merge double borders */
  font-size: .9rem;
}

th, td {
  padding: .6rem 1rem;
  text-align: left;
  border: 1px solid #e2e8f0;
}

th {
  background: #1e3260;
  color: white;
  font-weight: 700;
}

tr:hover td {
  background: #f8fafc;  /* hover highlight */
}

🧩 Quick Check — Lesson 15

5 questions · instant feedback

1. What element wraps the entire HTML table?

2. What is the difference between <th> and <td>?

3. What CSS property removes the double border between adjacent table cells?

4. When should you NOT use an HTML table?

5. What does the <caption> element provide?

🏆

Quiz Complete!

Table basics done! On to advanced table structure.

🏆

Lesson 15 Challenge

Code exercise · 15 min

Build a programming language comparison table.

Create a table comparing at least 4 programming languages with 4 columns:

1. Language, Type, Main Use, Difficulty
2. Include a <caption> describing the table
3. Use <th> for all header cells in the first row
4. Use <td> for all data cells
5. Add CSS: border-collapse: collapse, padding on cells, styled header row
6. Add a hover effect on rows using tr:hover td

Show hints

Every tr inside a table needs the same number of cells
caption must be the first child of table
th elements are automatically bold and centred — you can override with CSS
Apply border to th and td, not table, for consistent borders

← Favicons

Lesson 15 of 35

Table Structure →