HTML Tables – Complete Guide | TipsInLearning

Lesson 15 of 22

HTML Tables

Master HTML tables and organize data effectively. Learn table structure, rows, columns, headers, styling, and best practices for displaying tabular data.

15 min read

Intermediate

Hands-on

In This Lesson

15 min Intermediate

What are Tables?
Table Structure
Table Tags
Headers & Structure
Borders & Styling
colspan & rowspan
Best Practices
Try It Yourself
Summary
FAQ

Progress0/22

What You'll Learn

Create structured HTML tables

Add rows, columns, and headers

Style tables with CSS

Use colspan and rowspan

Accessibility best practices

Make tables responsive

What are HTML Tables?

An HTML table organizes data into rows and columns, making it easy to display structured information — products, prices, schedules, comparisons, and more.

Important: Tables are for tabular data only — never for page layout. Use CSS Grid or Flexbox for layout. Tables hurt accessibility and SEO when misused.

Table Structure

An HTML table consists of rows and columns. Each intersection is a cell. Here's a live example:

Course	Price	Lessons	Status
HTML Fundamentals	Free	22	Available
CSS Mastery	Free	20	Available
JavaScript Pro	Free	25	Coming Soon

Table Tags

<table>

Container for entire table

<tr>

Table row

<td>

Table data cell

<th>

Table header cell

HTML — Basic Table

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

<table> — Table Container

Wraps all table content. A block-level element that creates the grid structure.

<tr> — Table Row

Defines a horizontal row. Contains <td> or <th> cells.

<td> — Table Data Cell

A regular data cell — where your actual data goes.

<th> — Table Header Cell

Header cell — bold and center-aligned by default. Improves accessibility and SEO.

Table Headers & Semantic Structure

Use <thead>, <tbody>, and <tfoot> for proper semantic organization:

HTML — Semantic Table Structure

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sarah Jones</td>
      <td>sarah@tipsinlearning.com</td>
      <td>Designer</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total: 1 member</td>
    </tr>
  </tfoot>
</table>

Best Practice: Always use <thead>, <tbody>, and <tfoot> — they improve accessibility, make CSS easier, and let browsers scroll the body independently.

Borders and Styling

CSS — Table Styling

table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border: 1px solid #e2e8f0; text-align: left; }
th { background: linear-gradient(135deg, #e85d04, #7c3aed); color: white; font-weight: 700; }
tr:hover td { background-color: rgba(232, 93, 4, 0.05); }
/* Alternating row colors */
tbody tr:nth-child(even) td { background: rgba(124, 58, 237, 0.03); }

Advanced — colspan & rowspan

Merge cells horizontally with colspan and vertically with rowspan:

HTML — Merged Cells

<!-- colspan: span 2 columns -->
<tr>
  <th colspan="2">Q4 Sales Report</th>
</tr>
<!-- rowspan: span 2 rows -->
<tr>
  <td rowspan="2">Category</td>
  <td>January Sales</td>
</tr>

Best Practices

Accessibility

Use <th scope="col"> for column headers
Add <caption> to describe the table's purpose
Keep tables focused on one data set — avoid nesting

Don't Use Tables for Layout: Tables are for tabular data only. For layout use CSS Grid or Flexbox — table-based layout breaks accessibility and is a bad practice.

Try It Yourself

Challenge

1Create a table showing 3 TipsInLearning courses with columns: Name, Lessons, Level, Status

2Add <thead>, <tbody> and a <tfoot> row showing total lesson count

3Style it with border-collapse: collapse, padding, and a hover effect

4Merge the header row across all columns using colspan="4"

Quick Summary

1<table>, <tr>, <td>, <th> — the four core table tags

2Use <thead>, <tbody>, <tfoot> for semantic structure

3Add border-collapse: collapse to remove double borders

4colspan merges columns, rowspan merges rows

5Make tables responsive with overflow-x: auto on a wrapper

6Never use tables for page layout — always use CSS Grid or Flexbox

Questions Beginners Ask

Common questions about HTML tables:

Can I use tables for page layout?

No — and this is one of the most important rules in modern HTML. Tables are for tabular data only. In the early web era developers used tables for layout because CSS didn't exist yet. Today, CSS Grid and Flexbox handle layout far better without breaking accessibility or SEO.

What's the difference between <td> and <th>?

<td> is a regular data cell. <th> is a header cell — browsers bold and center it by default, and screen readers use it to announce column or row context. Always use <th> for your header row, not just <td> with bold text.

Do I need <thead> and <tbody>?

Technically no — a table will render without them. But you should always include them. They add semantic structure that helps screen readers, allows CSS targeting, and lets browsers scroll the body row independently from the header. It takes 2 seconds and pays off consistently.

How do I remove the border gap between cells?

Add border-collapse: collapse to the table CSS rule. By default HTML tables have separate borders with a gap. Collapse merges them into a single clean border. This is almost always what you want and is standard practice.

How do I make a table work on mobile?

Wrap the table in a <div style='overflow-x: auto'> — this lets it scroll horizontally on small screens. For more advanced layouts, use CSS media queries to switch cells to display: block and add a data-label attribute to recreate labels vertically.

HTML Favicon

Next Lesson

HTML Lists

HTML Tables Tutorial