HTML Tables Tutorial — Learn Tables with Examples

Tables organize tabular data (rows & columns). They are great for schedules, price lists, spec sheets, comparison charts, and any data that fits a grid. This guide covers:

• Table basics: <table>, <tr>, <td>, <th>
• Headers, captions, and groups (<caption>, <thead>, <tbody>, <tfoot>)
• Colspan & rowspan
• Styling and responsive tables
• Accessibility and best practices

---

Table of Contents

1. Basic Structure
2. Headers & Captions
3. Colspan & Rowspan
4. Grouping Rows: thead / tbody / tfoot
5. Styling Tables
6. Responsive Tables
7. Accessibility Tips
8. Practical Examples
9. Best Practices

---

1. Basic Structure

Minimal valid table:

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

Elements:

• <table> — container for the table
• <tr> — table row
• <td> — table data cell (regular cell)
• <th> — table header cell (usually bold & centered)

---

2. Headers & Captions

Use <th> for header cells. Use <caption> to add a short title to the table (useful for accessibility).

<table>
  <caption>Monthly Sales (USD)</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1,200</td>
  </tr>
</table>

---

3. Colspan & Rowspan

Use colspan to make a cell span multiple columns, and rowspan to span multiple rows.

<table border="1">
  <tr>
    <th colspan="2">Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td rowspan="2">Bundle A</td>
    <td>Item 1</td>
    <td>$10</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>$15</td>
  </tr>
</table>

---

4. Grouping Rows: <thead>, <tbody>, <tfoot>

Group rows logically. This helps styling, printing, and accessibility.

<table>
  <caption>Attendance</caption>
  <thead>
    <tr><th>Name</th><th>Day 1</th><th>Day 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Asha</td><td>P</td><td>A</td></tr>
    <tr><td>Rahul</td><td>P</td><td>P</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>2</td><td>1</td></tr>
  </tfoot>
</table>

---

5. Styling Tables (Simple CSS)

Basic CSS makes tables readable:

<style>
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  padding: 8px 10px;
  border: 1px solid #ddd;
}
.table th {
  background: #f4f4f8;
  text-align: left;
}
.table tr:nth-child(even) {
  background: #fbfbfb;
}
.table caption {
  caption-side: top;
  font-weight: bold;
  padding: 8px;
}
</style>

Usage (escaped):

<table class="table">...</table>

---

6. Responsive Tables

Large tables can overflow on mobile. Wrap the table in a horizontally scrollable container so it remains usable on small screens.

<style>
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  min-width: 600px; /* ensures columns keep spacing on wide screens */
}
</style>

<div class="table-wrap">
  <table class="table">...</table>
</div>

Alternative: stack cells on very small screens (requires more CSS). For simple blogs, the scrollable wrapper is easiest and reliable.

---

7. Accessibility Tips (A11y)

• Always use a <caption> for data tables — screen readers announce it.
• Use scope="col" or scope="row" on <th> to help screen readers:

<th scope="col">Month</th>
<th scope="row">January</th>

• For complex tables, use id on headers and headers on <td> to create explicit associations.
• Keep tables simple when possible — avoid using tables for layout (use CSS instead).

---

8. Practical Examples

8.1. Pricing Table

<div class="table-wrap">
  <table class="table">
    <caption>Pricing Plans</caption>
    <thead>
      <tr><th>Plan</th><th>Price</th><th>Features</th></tr>
    </thead>
    <tbody>
      <tr><td>Basic</td><td>$5</td><td>1 project, Email support</td></tr>
      <tr><td>Pro</td><td>$15</td><td>10 projects, Priority support</td></tr>
      <tr><td>Team</td><td>$30</td><td>Unlimited, Team members</td></tr>
    </tbody>
  </table>
</div>

8.2. Schedule Table

<table class="table">
  <caption>Weekly Schedule</caption>
  <thead>
    <tr><th>Time</th><th>Mon</th><th>Tue</th><th>Wed</th></tr>
  </thead>
  <tbody>
    <tr><td>9:00</td><td>Math</td><td>English</td><td>Science</td></tr>
    <tr><td>10:00</td><td>History</td><td>PE</td><td>Computer</td></tr>
  </tbody>
</table>

---

9. Best Practices

• Use tables only for tabular data — not for layout.
• Include a caption and meaningful headers for accessibility.
• Keep tables simple and avoid deeply nested tables.
• Use CSS for visuals (borders, colors, spacing) — do not use deprecated attributes.
• Test tables on mobile; use the scroll wrapper or responsive patterns.
• Provide alternate views (CSV download) if the data is long — friendly for users who want to copy data.

---

Conclusion

You now know how to build semantic, accessible, and responsive HTML tables. Practice by converting spreadsheet data into HTML tables and styling them with CSS.