HTML Tables Explained — Rows, Columns & Data Display

HTML tables organize data into rows and columns using <table>, <tr>, <th>, and <td> tags — perfect for schedules, pricing, comparisons, and reports.

What You’ll Learn

By the end of this tutorial, you’ll know how to build a basic table, merge cells with colspan and rowspan, structure tables with <thead>, <tbody>, and <tfoot>, and add simple CSS styling for readability.

Why Tables Matter

Imagine a spreadsheet with no grid lines — just numbers floating on the page. Hard to read, right? Tables bring structure to data by organizing it into neat rows and columns where every value has a labeled position.

Real-world use: Product comparison charts, pricing plans, sports scores, train schedules, financial reports, and database results — all displayed in HTML tables.

Where This Fits in Your Learning Path

    flowchart LR
    A["Lists"] --> B["**Tables**"]
    B --> C["Forms & Inputs"]
    C --> D["Quotations & Comments"]
    D --> E["Block & Inline"]
    E --> F["Structured HTML Page"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style F fill:#22c55e,stroke:#16a34a,color:#fff
  

Basic Table Structure

Think of a table as a grid. You build it row by row, and inside each row you define the cells.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>28</td>
    <td>Paris</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>35</td>
    <td>London</td>
  </tr>
</table>

Let’s break down the tags:

So to build a table:

1. Create a <table> container
2. Add the header row with <th> cells
3. Add data rows with <td> cells
4. Close everything properly

Why Tables Need Headers

Without <th>, you’d see a grid of values with no labels — like a phone book with no “Name” and “Phone” headings. Headers tell readers (and search engines) what each column represents.

Screen readers also use <th> to announce column names as users navigate. This is critical for accessibility.

Merging Cells with colspan and rowspan

Sometimes a value spans multiple columns or rows. For example, a schedule where “Team Meeting” covers both Monday and Tuesday.

colspan — Span Across Columns

<table>
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
  </tr>
  <tr>
    <td>9 AM</td>
    <td colspan="2">Team Meeting (all day)</td>
  </tr>
  <tr>
    <td>10 AM</td>
    <td>Coding</td>
    <td>Design Review</td>
  </tr>
</table>

colspan="2" means “this cell should stretch across 2 columns.” The cell takes the place of two <td> cells.

rowspan — Span Across Rows

<table>
  <tr>
    <th>Name</th>
    <th>Project</th>
    <th>Hours</th>
  </tr>
  <tr>
    <td rowspan="2">Alice</td>
    <td>Frontend</td>
    <td>40</td>
  </tr>
  <tr>
    <!-- rowspan fills this cell — Alice's name already placed -->
    <td>Backend</td>
    <td>20</td>
  </tr>
</table>

rowspan="2" means “this cell should stretch across 2 rows.” In the second row, you skip the first <td> because it’s already occupied by the spanning cell.

Table Sections — <thead>, <tbody>, <tfoot>

For longer tables, you can split your table into three sections. Think of it like a document with a header, body, and footer:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>$2</td>
      <td>3</td>
      <td>$6</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>$1</td>
      <td>5</td>
      <td>$5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Grand Total</td>
      <td>$11</td>
    </tr>
  </tfoot>
</table>

Why use sections?

• The browser can scroll <tbody> independently while keeping <thead> visible
• Printers repeat <thead> rows on each page for multi-page tables
• Screen readers use sections to navigate long tables

Basic Table Styling with CSS

Tables look bare without styling. Here are the most common CSS rules:

<style>
  table {
    border-collapse: collapse;  /* Merge adjacent borders into one */
    width: 100%;                /* Full width */
  }
  th, td {
    border: 1px solid #999;     /* Light gray borders */
    padding: 8px;               /* Space inside cells */
    text-align: left;           /* Align text to left */
  }
  th {
    background: #f0f0f0;        /* Light gray header background */
    font-weight: bold;
  }
  tr:nth-child(even) {
    background: #f9f9f9;        /* Alternating row colors (zebra striping) */
  }
</style>

border-collapse: collapse is the most important rule — without it, adjacent cells have double borders (one from each cell). Collapsing merges them into single borders.

Zebra striping (alternating row colors) makes tables much easier to read across columns — your eye can follow a row without getting lost.

Tables & Accessibility

Tables are great for data, but they can be inaccessible if not built properly:

• Always use <th> for headers (screen readers announce them)
• Use scope="col" on <th> to explicitly say “this is a column header”
• Keep tables simple — avoid deeply nested spanned cells
• Don’t use tables for layout (positioning elements on the page) — use CSS instead

DodaTech Insight: Screen readers announce table details like “Table with 5 rows and 3 columns.” Well-structured tables also help DodaBrowser’s reader mode display data correctly.

Common Table Mistakes

1. Using Tables for Page Layout

<!-- ❌ Wrong: tables should not be used for layout -->
<table>
  <tr>
    <td>Sidebar</td>
    <td>Main Content</td>
  </tr>
</table>

<!-- ✅ Correct: use CSS flexbox or grid for layout -->
<div style="display: flex;">
  <div>Sidebar</div>
  <div>Main Content</div>
</div>

Tables are for tabular data, not page layout. Using tables for layout makes your HTML bulky, harder to maintain, and inaccessible.

2. Mismatched Column Counts

<!-- ❌ Wrong: first row has 3 cells, second has 2 -->
<tr>
  <th>Name</th><th>Age</th><th>City</th>
</tr>
<tr>
  <td>Alice</td><td>28</td>  <!-- missing City cell -->
</tr>

<!-- ✅ Correct: each row has same number of cells -->
<tr>
  <th>Name</th><th>Age</th><th>City</th>
</tr>
<tr>
  <td>Alice</td><td>28</td><td>Paris</td>
</tr>

3. Forgetting to Close Tags Properly

<!-- ❌ Wrong: missing closing tags -->
<table>
  <tr>
    <td>Data 1<td>Data 2
  </tr>

<!-- ✅ Correct: close everything -->
<table>
  <tr>
    <td>Data 1</td><td>Data 2</td>
  </tr>
</table>

4. Not Styling the Table at All

An unstyled table looks like raw data thrown on the page. Always add at least border-collapse: collapse and some padding for readability.

5. Using colspan Without Adjusting Other Rows

<!-- ❌ Wrong: colspan="3" takes 3 slots, but other rows have only 2 cells -->
<tr>
  <td colspan="3">Wide cell</td>
</tr>
<tr>
  <td>A</td><td>B</td>  <!-- only 2 cells — breaks layout -->
</tr>

Try It Yourself

Edit this employee directory table — try adding rows, merging cells, or changing the styling:

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What does <th> stand for and how is it different from <td>?

Q2: What does colspan="3" do?

Q3: What’s the purpose of <thead>, <tbody>, and <tfoot>?

Q4: What CSS property merges adjacent cell borders?

Q5: Should you use tables for page layout?

Challenge

Create a “Class Gradebook” table with:

• Columns: Student Name, Assignment 1, Assignment 2, Final Exam, Average
• At least 5 students
• A footer row showing the class average for each column
• Zebra striping (even rows have a light gray background)
• A caption explaining the table

Real-World Task

Find a table on any website (pricing page, sports scores, comparison chart):

• Inspect it with the browser’s developer tools
• Identify the <thead>, <tbody>, <th>, and <td> elements
• Note how they use colspan or rowspan
• Check the CSS styling (borders, colors, spacing)

Frequently Asked Questions

What’s Next?

Now you can organize data in tables. Let’s collect user input:

What’s Next

Congratulations on completing this Html Tables tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!