Skip to main content

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.

Comments

Post a Comment

Popular posts from this blog

HTML Forms Tutorial HTML Forms Tutorial HTML Forms allow users to enter and submit data. They are used everywhere—login forms, signup forms, search boxes, feedback forms, etc. In this complete tutorial, you will learn all form elements with examples and demos. 1. What is an HTML Form? A form collects user input using different form elements like text fields, checkboxes, radio buttons, buttons, and more. <form> Form elements go here... </form> 2. Basic Form Structure <form action="#" method="post"> <input type="text" placeholder="Enter name"> <button>Submit</button> </form> Submit Attributes: action → URL where form data is sent method="POST" → Secure data sending method="GET" → Data shows in URL 3. Text Input Field <i...
Post a Comment
Read more
📸 HTML Image Gallery Tutorial for Beginners Image galleries make your website more beautiful and professional. In this tutorial, you will learn how to create different types of image galleries using HTML and CSS. 📌 1. Simple HTML Image Gallery This is the most basic gallery layout. <div> <img src="image1.jpg" width="200"> <img src="image2.jpg" width="200"> <img src="image3.jpg" width="200"> </div> ✔ Explanation All images are inside a <div> Each image has the same width They appear in a row 📌 2. Responsive Image Gallery (CSS Grid) This gallery automatically adjusts on mobile and PC. <style> .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } .gallery img { width: 100%; border-radius: 10px; } </style> <div class="galle...
Post a Comment
Read more
📝 HTML Notes App Tutorial for Beginners (Full Project) In this tutorial, you will learn how to build a fully functional Notes App using HTML, CSS, and JavaScript. This app works on all devices and saves notes even after refreshing the page! ✨ Features of This Notes App Add new notes Edit notes Delete notes Dark Mode Search notes Auto-save using LocalStorage No backend needed 📌 Step 1 — HTML Structure Copy Code Run Demo <div class="container"> <h1>Notes App</h1> <button id="toggleDark">🌙 Dark Mode</button> <input type="text" id="searchBox" placeholder="Search notes..."> <textarea id="noteInput" placeholder="Write your note here..."></textarea> <button id="addNote">Add Note</button> <div id="notesList"></div> ...
Post a Comment
Read more
HTML Tags Tutorial – A Complete Beginner-Friendly Guide HTML tags are the basic building blocks of every webpage. Whether you want to create a simple webpage or a full website, understanding HTML tags is the first and most important step. In this post, we’ll explore what HTML tags are, how they work, why they matter, and the most commonly used tags with examples. Table of Contents What Are HTML Tags? How HTML Tags Work Types of HTML Tags Most Common HTML Tags Self-Closing Tags Nesting Tags Practical Examples Best Practices What Are HTML Tags? HTML tags are keywords enclosed in angle brackets < > that tell the browser how to display content. Tags create elements such as headings, paragraphs, images, links, lists, buttons, forms, and much more. Example of a simple tag: <p>This is a paragraph.</p> How HTML Tags Work Most HTML tags come in pairs: <opening-tag>...
Post a Comment
Read more
HTML Images Tutorial HTML Images Tutorial The <img> tag is used to display images on a webpage. In this tutorial, you'll learn how to add images, resize them, add borders, captions, and more. 1. Basic Image Tag The simplest way to add an image is by using the src and alt attributes. <img src="image.jpg" alt="My Image"> Attributes: src → Image URL alt → Text shown if image fails to load 2. Image Size (width & height) You can resize an image using width or height . <img src="photo.jpg" width="300" height="200"> 3. Responsive Images Responsive images automatically adjust to device size. <img src="photo.jpg" style="width:100%;max-width:400px;"> 4. Add Border to Images <img src="file.jpg" style="border:3px solid #333;...
Post a Comment
Read more