htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

HTML Tables

Tabular structures organize data into grid-based rows and columns, enabling systematic presentation through table, tr, th, and td elements with header annotations and caption support.

Complete working example

Data table with headers

Read a small table with a caption, scoped headers and a keyboard-accessible overflow region.

HTMLCSSSelf-contained
Edit in playground

Live preview

Original code, no external assets
Read the complete HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root {
  font-family: system-ui, sans-serif;
  color: #18223b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  padding: 24px;
  background: #edf1ff;
  display: grid;
  place-items: center;
}
main {
  min-width: 0;
  width: min(100%, 600px);
  background: white;
  border-radius: 20px;
  padding: clamp(20px, 5vw, 32px);
}
h1 {
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.2;
  margin: 0 0 16px;
}
h2 {
  font-size: 20px;
  margin: 24px 0 12px;
}
p,
li {
  line-height: 1.65;
}
a {
  color: #2545a8;
  text-underline-offset: 3px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  min-height: 44px;
  border: 1px solid #9eaed0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #eff3ff;
  color: #18223b;
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #3658bf;
  outline-offset: 3px;
}
pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #eef2fa;
  padding: 16px;
  border-radius: 10px;
}
code {
  font-family: ui-monospace, monospace;
}
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
table {
  width: 100%;
  min-width: 300px;
  border-collapse: collapse;
}
caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 16px;
}
th,
td {
  padding: 12px;
  text-align: left;
  border: 1px solid #c9d3e8;
}
thead {
  background: #eef2fa;
}
</style>
</head>
<body>
<main>
  <h1>A simple supply table</h1>
  <div class="table-scroll" role="region" aria-label="Supply quantities" tabindex="0">
    <table
      ><caption>Supplies for three activities</caption
      ><thead
        ><tr
          ><th scope="col">Activity</th><th scope="col">Notebooks</th
          ><th scope="col">Pencils</th></tr
        ></thead
      ><tbody
        ><tr><th scope="row">Planning</th><td>2</td><td>4</td></tr
        ><tr><th scope="row">Sketching</th><td>1</td><td>6</td></tr
        ><tr><th scope="row">Review</th><td>3</td><td>2</td></tr></tbody
      ></table
    >
  </div>
  <p>The caption names the data. Row and column headers explain each value.</p>
</main>
<script>

</script>
</body>
</html>

How it works

This table presents related data, rather than laying out the page. scope="col" and scope="row" identify the header relationships. The focusable labelled wrapper allows horizontal scrolling if content exceeds a narrow screen. No script is needed.

Troubleshooting and limits

Keep equal columns in every row and use headers that explain the values. For complex multi-level tables, explicit headers and id relationships may be needed. Do not remove the caption or all borders without preserving a clear reading structure.

Explore more original working examples.

Quick Answer

What is an HTML table?

HTML tables organize data in rows and columns using the <table> element with <tr> for rows, <th> for headers, and <td> for data cells. Tables are ideal for displaying structured data like schedules, pricing comparisons, and statistical information.

Table elements arrange information into organized matrices, facilitating clear presentation of datasets including financial records, comparative analyses, schedules, and statistical reports through structured row-column layouts.

Defining Tabular Data Structures

Table constructs render data within grid frameworks utilizing intersecting rows and columns. These organizational tools prove indispensable for displaying systematically arranged information with clarity.

Strategic Table Applications

  • Monetary summaries and analytical datasets
  • Side-by-side product evaluations
  • Temporal planning grids and calendars
  • Survey results and research metrics
  • Personnel registries and contact databases
  • Cost breakdowns and capability matrices

Foundational Table Architecture

Table construction employs coordinated elements: <table> containers, <tr> (row definitions), <th> (header cells), and <td> (data cells).

Elementary Table Construction

<h2>Learning Path Investment Overview</h2
>

<!-- Fundamental table pattern -->
<table>
    <tr>
        <th>Program</th>
        <th>Timeline</th>
        <th>Investment</th>
    </tr>
    <tr>
        <td>Markup Fundamentals</td>
        <td>4 weeks</td>
        <td>No charge</td>
    </tr>
    <tr>
        <td>Stylesheet Mastery</td>
        <td>6 weeks</td>
        <td>No charge</td>
    </tr>
    <tr>
        <td>Scripting Proficiency</td>
        <td>8 weeks</td>
        <td>No charge</td>
    </tr>
</table>

<p
  >Learn web development at <strong>htmlfreecodes.com</strong></p
>

Result:

HTML Free Codes Course Pricing

Course Duration Price
HTML Basics 4 weeks Free
CSS Styling 6 weeks Free
JavaScript 8 weeks Free

Learn web development at htmlfreecodes.com

Advanced Table Structure

HTML tables can include additional structural elements like <thead>, <tbody>, <tfoot>, and <caption> for better organization and accessibility.

Structured Table with Header, Body, and Footer

<table
  >
    <caption>HTML Free Codes Tutorial Statistics</caption>

    <thead>
        <tr>
            <th>Tutorial Topic</th>
            <th>Lessons</th>
            <th>Examples</th>
            <th>Exercises</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>HTML Elements</td>
            <td>15</td>
            <td>45</td>
            <td>30</td>
        </tr>
        <tr>
            <td>CSS Styling</td>
            <td>20</td>
            <td>60</td>
            <td>40</td>
        </tr>
        <tr>
            <td>JavaScript Basics</td>
            <td>25</td>
            <td>75</td>
            <td>50</td>
        </tr>
    </tbody>

    <tfoot
    >
        <tr
      >
            <td><strong>Total</strong></td
      >
            <td><strong>60</strong></td
      >
            <td><strong>180</strong></td
      >
            <td><strong>120</strong></td
      >
        </tr
    >
    </tfoot
  >
</table
>

Result:

HTML Free Codes Tutorial Statistics
Tutorial Topic Lessons Examples Exercises
HTML Elements 15 45 30
CSS Styling 20 60 40
JavaScript Basics 25 75 50
Total 60 180 120

Table Cell Spanning

Use colspan and rowspan attributes to make cells span multiple columns or rows, creating more complex table layouts.

Table with Column and Row Spanning

<table
  >
    <caption>HTML Free Codes Web Development Roadmap</caption>

    <tr
    >
        <th colspan="3">Frontend Development Path</th
    >
    </tr
  >

    <tr>
        <th>Stage</th>
        <th>Technology</th>
        <th>Timeline</th>
    </tr>

    <tr
    >
        <td rowspan="2">Beginner</td
    >
        <td>HTML</td>
        <td>2-4 weeks</td>
    </tr
  >

    <tr>
        <td>CSS</td>
        <td>4-6 weeks</td>
    </tr>

    <tr
    >
        <td rowspan="2">Intermediate</td
    >
        <td>JavaScript</td>
        <td>8-12 weeks</td>
    </tr
  >

    <tr>
        <td>React/Vue</td>
        <td>6-8 weeks</td>
    </tr>

    <tr
    >
        <td colspan="3"><em>Continue learning at htmlfreecodes.com</em></td
    >
    </tr
  >
</table
>

Result:

HTML Free Codes Web Development Roadmap
Frontend Development Path
Stage Technology Timeline
Beginner HTML 2-4 weeks
CSS 4-6 weeks
Intermediate JavaScript 8-12 weeks
React/Vue 6-8 weeks
Continue learning at htmlfreecodes.com

Responsive Table Design

Make tables responsive for mobile devices using CSS techniques like horizontal scrolling, stacking, or hiding columns on smaller screens.

Responsive Table Techniques

<style>
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.responsive-table th,
.responsive-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.responsive-table th {
    background-color: #f39c12;
    color: #101521;
}

/* Mobile responsive */
@media screen and (max-width: 600px) {
    .responsive-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.table-container {
    overflow-x: auto;
    margin: 20px 0;
}
</style>

<h3>HTML Free Codes Tutorial Progress</h3>

<div class="table-container">
    <table class="responsive-table">
        <thead>
            <tr>
                <th>Student Name</th>
                <th>HTML Progress</th>
                <th>CSS Progress</th>
                <th>JavaScript Progress</th>
                <th>Overall Score</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice Johnson</td>
                <td>95%</td>
                <td>87%</td>
                <td>78%</td>
                <td>87%</td>
            </tr>
            <tr>
                <td>Bob Smith</td>
                <td>88%</td>
                <td>92%</td>
                <td>85%</td>
                <td>88%</td>
            </tr>
            <tr>
                <td>Carol Davis</td>
                <td>92%</td>
                <td>89%</td>
                <td>91%</td>
                <td>91%</td>
            </tr>
        </tbody>
    </table>
</div>

Result:

HTML Free Codes Tutorial Progress

Student Name HTML Progress CSS Progress JavaScript Progress Overall Score
Alice Johnson 95% 87% 78% 87%
Bob Smith 88% 92% 85% 88%
Carol Davis 92% 89% 91% 91%

Table scrolls horizontally on mobile devices

Table Accessibility

Proper table markup with headers, captions, and scope attributes ensures tables are accessible to screen readers and other assistive technologies.

Accessible Table Implementation

<table
  >
    <caption
    >
        Monthly Website Statistics for HTML Free Codes
        <br /><small>Data updated: January 2024</small
    >
    </caption
  >

    <thead
    >
        <tr
      >
            <th scope="col">Metric</th
      >
            <th scope="col">This Month</th
      >
            <th scope="col">Last Month</th
      >
            <th scope="col">Change</th
      >
        </tr
    >
    </thead
  >

    <tbody
    >
        <tr
      >
            <th scope="row">Page Views</th
      >
            <td>245,000</td>
            <td>220,000</td>
            <td>+11.4%</td>
        </tr
    >
        <tr
      >
            <th scope="row">Unique Visitors</th
      >
            <td>85,000</td>
            <td>78,000</td>
            <td>+9.0%</td>
        </tr
    >
        <tr
      >
            <th scope="row">Tutorial Completions</th
      >
            <td>12,500</td>
            <td>11,200</td>
            <td>+11.6%</td>
        </tr
    >
    </tbody
  >
</table
>

<p
  >Learn more web development at <strong>htmlfreecodes.com</strong></p
>

♿ Table Accessibility Features

  • Caption: Describes table purpose and content
  • Scope attributes: Define header relationships (col/row)
  • Header elements: Use <th> for all headers
  • Logical structure: Group related content with thead/tbody/tfoot
  • Clear labeling: Descriptive header text
  • Summary information: Additional context when needed

Test Your Knowledge

5 practice questions are available. Choose Start practice to try them.

Related Articles

Continue your learning journey with these related tutorials:

A smaller starting example and practical notes

A table expresses relationships between rows and columns. Use it for data rather than arranging a whole page. A caption identifies the dataset, and header cells help explain what the individual values represent.

<table>
  <caption>Small project checklist</caption>
  <thead><tr><th scope="col">Project</th><th scope="col">Status</th></tr></thead>
  <tbody>
    <tr><th scope="row">Profile card</th><td>Ready to try</td></tr>
    <tr><th scope="row">Calendar</th><td>Ready to try</td></tr>
  </tbody>
</table>

Mark headers explicitly

Use th for headers and td for ordinary data cells. scope="col" associates a header with its column, while scope="row" associates it with its row. Thead and tbody separate table regions. For complex multi-level headers, explicit header associations may be necessary; a simple table should usually remain simple.

Keep the information usable on small screens

Do not hide important columns merely to fit the viewport. A scrollable wrapper can preserve a wide table's structure. Avoid changing every cell into an unrelated visual block without considering header relationships. Use padding and readable contrast to improve scanning, while leaving the actual data present in the HTML.

Explore a real example

The calendar example uses weekday column headers and machine-readable dates. Inspect a month that starts near the end of a week and one in a leap year. Empty leading cells maintain weekday alignment without inventing dates outside the current month.