HTML Tables Guide

Learn how to create accessible, semantic, and styled tables in HTML

What are HTML Tables?

HTML tables (<table>) are used to display tabular data in rows and columns. Tables should be used for:

Displaying data that has a natural tabular structure
Showing relationships between different data points
Presenting financial data, schedules, or comparisons
Creating calendars, pricing charts, or statistical data

Key Features:

Semantic structure with thead, tbody, and tfoot
Row and cell spanning with colspan and rowspan
Accessibility features like scope and captions
Responsive design techniques
Extensive CSS styling possibilities

Interview & Exam Preparation

Common Interview Questions:

When should you use a table versus other HTML elements?
How do you make tables accessible for screen readers?
What are the semantic elements of an HTML table?
How would you create a responsive table?
What are the differences between colspan and rowspan?

Key Concepts to Remember:

Tables are for tabular data, not page layout
Always use proper heading structure with scope attributes
Include captions for complex tables
Consider mobile users with responsive techniques
Test with screen readers for accessibility

Basic Table Structure

Simple table with rows and cells

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

Usage: For displaying simple tabular data

Table with Caption

Table with a descriptive caption

<table>
  <caption>Monthly Expenses</caption>
  <tr>
    <th>Category</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td>Food</td>
    <td>$300</td>
  </tr>
</table>

Usage: When the table needs a title or description

Cell Spanning

Cells that span multiple columns or rows

<table>
  <tr>
    <th colspan="2">Expenses</th>
  </tr>
  <tr>
    <td rowspan="2">Food</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>$150</td>
  </tr>
</table>

Usage: For merging cells horizontally or vertically

Semantic Table Structure

Using thead, tbody, and tfoot elements

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$1000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$1000</td>
    </tr>
  </tfoot>
</table><table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$1000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$1000</td>
    </tr>
  </tfoot>
</table>

Note: Improves accessibility and styling control

Scope Attribute

Defining relationships between headers and cells

<table>
  <tr>
    <th scope="col">Product</th>
    <th scope="col">Price</th>
  </tr>
  <tr>
    <th scope="row">Laptop</th>
    <td>$999</td>
  </tr>
</table><table>
  <tr>
    <th scope="col">Product</th>
    <th scope="col">Price</th>
  </tr>
  <tr>
    <th scope="row">Laptop</th>
    <td>$999</td>
  </tr>
</table>

Note: Essential for screen readers to understand table structure

Responsive Tables

Making tables work on small screens

<style>
.responsive-table {
  overflow-x: auto;
}
</style>

<div class="responsive-table">
  <table>
    <!-- wide table content -->
  </table>
</div><style>
.responsive-table {
  overflow-x: auto;
}
</style>

<div class="responsive-table">
  <table>
    <!-- wide table content -->
  </table>
</div>

Note: Wraps table in a scrollable container on small screens

Product Comparison Table

<h2>Smartphone Comparison</h2>
<table>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">Model A</th>
      <th scope="col">Model B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Price</th>
      <td>$699</td>
      <td>$899</td>
    </tr>
    <tr>
      <th scope="row">Screen Size</th>
      <td>6.1"</td>
      <td>6.7"</td>
    </tr>
    <tr>
      <th scope="row">Battery Life</th>
      <td>18 hours</td>
      <td>24 hours</td>
    </tr>
  </tbody>
</table><h2>Smartphone Comparison</h2>
<table>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">Model A</th>
      <th scope="col">Model B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Price</th>
      <td>$699</td>
      <td>$899</td>
    </tr>
    <tr>
      <th scope="row">Screen Size</th>
      <td>6.1"</td>
      <td>6.7"</td>
    </tr>
    <tr>
      <th scope="row">Battery Life</th>
      <td>18 hours</td>
      <td>24 hours</td>
    </tr>
  </tbody>
</table>

Class Schedule

<h2>Weekly Class Schedule</h2>
<table>
  <thead>
    <tr>
      <th scope="col">Time</th>
      <th scope="col">Monday</th>
      <th scope="col">Wednesday</th>
      <th scope="col">Friday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">9:00 AM</th>
      <td>Math</td>
      <td>Science</td>
      <td>History</td>
    </tr>
    <tr>
      <th scope="row">11:00 AM</th>
      <td>English</td>
      <td>Math</td>
      <td>Art</td>
    </tr>
  </tbody>
</table><h2>Weekly Class Schedule</h2>
<table>
  <thead>
    <tr>
      <th scope="col">Time</th>
      <th scope="col">Monday</th>
      <th scope="col">Wednesday</th>
      <th scope="col">Friday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">9:00 AM</th>
      <td>Math</td>
      <td>Science</td>
      <td>History</td>
    </tr>
    <tr>
      <th scope="row">11:00 AM</th>
      <td>English</td>
      <td>Math</td>
      <td>Art</td>
    </tr>
  </tbody>
</table>

Pricing Plan Table

<h2>Subscription Plans</h2>
<table class="pricing-table">
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Basic</th>
      <th scope="col">Pro</th>
      <th scope="col">Enterprise</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Price</th>
      <td>$9.99/mo</td>
      <td>$29.99/mo</td>
      <td>Custom</td>
    </tr>
    <tr>
      <th scope="row">Users</th>
      <td>1</td>
      <td>5</td>
      <td>Unlimited</td>
    </tr>
  </tbody>
</table>

<style>
.pricing-table {
  width: 100%;
  border-collapse: collapse;
}
.pricing-table th, .pricing-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}
.pricing-table th {
  background-color: #4a6ee0;
  color: white;
}
.pricing-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style><h2>Subscription Plans</h2>
<table class="pricing-table">
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Basic</th>
      <th scope="col">Pro</th>
      <th scope="col">Enterprise</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Price</th>
      <td>$9.99/mo</td>
      <td>$29.99/mo</td>
      <td>Custom</td>
    </tr>
    <tr>
      <th scope="row">Users</th>
      <td>1</td>
      <td>5</td>
      <td>Unlimited</td>
    </tr>
  </tbody>
</table>

<style>
.pricing-table {
  width: 100%;
  border-collapse: collapse;
}
.pricing-table th, .pricing-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}
.pricing-table th {
  background-color: #4a6ee0;
  color: white;
}
.pricing-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

Table with Caption and Summary

Providing context for screen readers

<table aria-describedby="table-summary">
  <caption>Monthly Sales by Region</caption>
  <tr>
    <th scope="col">Region</th>
    <th scope="col">Sales</th>
  </tr>
  <tr>
    <th scope="row">North</th>
    <td>$10,000</td>
  </tr>
</table>
<p id="table-summary" class="visually-hidden">
  This table shows monthly sales figures by geographic region
</p><table aria-describedby="table-summary">
  <caption>Monthly Sales by Region</caption>
  <tr>
    <th scope="col">Region</th>
    <th scope="col">Sales</th>
  </tr>
  <tr>
    <th scope="row">North</th>
    <td>$10,000</td>
  </tr>
</table>
<p id="table-summary" class="visually-hidden">
  This table shows monthly sales figures by geographic region
</p>

Note: The summary is visually hidden but available to screen readers

Complex Table with Headers

Multiple levels of headers for complex data

<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Product</th>
      <th scope="colgroup" colspan="2">Quarter 1</th>
    </tr>
    <tr>
      <th scope="col">Jan</th>
      <th scope="col">Feb</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Widget A</th>
      <td>120</td>
      <td>150</td>
    </tr>
  </tbody>
</table><table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Product</th>
      <th scope="colgroup" colspan="2">Quarter 1</th>
    </tr>
    <tr>
      <th scope="col">Jan</th>
      <th scope="col">Feb</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Widget A</th>
      <td>120</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

Note: Proper scope attributes are crucial for accessibility

Zebra Striping

Alternating row colors for better readability

<style>
.striped-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

<table class="striped-table">
  <!-- table content -->
</table><style>
.striped-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

<table class="striped-table">
  <!-- table content -->
</table>

Note: Improves readability, especially for wide tables

Hover Effects

Highlighting rows on hover

<style>
.hover-table tr:hover {
  background-color: #e6f7ff;
  cursor: pointer;
}
</style>

<table class="hover-table">
  <!-- table content -->
</table><style>
.hover-table tr:hover {
  background-color: #e6f7ff;
  cursor: pointer;
}
</style>

<table class="hover-table">
  <!-- table content -->
</table>

Note: Enhances user interaction experience

Border Collapse

Controlling table borders

<style>
.collapsed-borders {
  border-collapse: collapse;
}
.collapsed-borders th, 
.collapsed-borders td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

<table class="collapsed-borders">
  <!-- table content -->
</table><style>
.collapsed-borders {
  border-collapse: collapse;
}
.collapsed-borders th, 
.collapsed-borders td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

<table class="collapsed-borders">
  <!-- table content -->
</table>

Note: Creates cleaner, more professional-looking tables

Table Playground

Experiment with tables in our live editor

Table Examples Preview

Ready-to-use examples covering different table scenarios

Live Preview

Features Included

Basic Tables

Simple data display

Advanced Features

colspan, rowspan

Accessibility

scope, captions

Styling

CSS examples

All examples will be loaded into an interactive editor where you can modify and test them

Exam & Interview Preparation

Common Interview Questions

Q: When should you use a table versus CSS for layout?
A: Tables should only be used for tabular data, not for page layout. For layout, use CSS Flexbox or Grid which are more semantic and responsive.
Q: How do you make complex tables accessible?
A: Use proper scope attributes, headers/id associations, captions, and ARIA attributes where needed. Test with screen readers.
Q: What are the semantic elements of an HTML table?
A: <table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td>.

Key Concepts to Remember

Semantic Structure: Always use proper table elements for their intended purpose
Accessibility: Tables must be navigable and understandable with screen readers
Responsiveness: Tables need special handling on mobile devices
Performance: Very large tables can impact performance - consider pagination
Styling: Modern CSS provides many table styling options

Practical Scenarios

Displaying financial reports
Creating comparison charts
Showing schedules or calendars
Presenting statistical data
Building data-rich admin interfaces

< Previous Next >

HTML Tables Guide

What are HTML Tables?

Key Features:

Interview & Exam Preparation

Table Basics

Basic Table Structure

Table with Caption

Cell Spanning

Advanced Table Features

Semantic Table Structure

Scope Attribute

Responsive Tables

Practical Table Examples

Product Comparison Table

Class Schedule

Pricing Plan Table

Table Accessibility

Table with Caption and Summary

Complex Table with Headers

Table Styling Techniques

Zebra Striping

Hover Effects

Border Collapse

Table Playground

Table Examples Preview

Features Included

Exam & Interview Preparation

Common Interview Questions

Key Concepts to Remember

Practical Scenarios