Organizing Data with Tables

Learn to structure tabular data using HTML's table elements for clear information presentation.

Basic Table Format

<table>
  <caption>Inventory</caption>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$19.99</td>
  </tr>
</table>
→
Inventory
ProductPrice
Widget$19.99
Core elements:
  • <table> - Table container
  • <tr> - Table row
  • <th> - Header cell
  • <td> - Data cell

Accessibility Features

<table>
  <thead>
    <tr><th scope="col">Name</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td></tr>
  </tbody>
</table>
→
[Semantic table structure recognized by screen readers]

Semantic markup:

  • <thead>/<tbody> - Group rows
  • scope - Associate headers with cells

Common Errors

<!-- Missing cell tags -->
<tr>Data</tr>  <!-- Needs td/th -->

<!-- Improper nesting -->
<td><tr>Content</tr></td>

Practical Use: Financial Report

<table>
  <caption>Q4 Earnings</caption>
  <tr>
    <th>Department</th>
    <th>Revenue</th>
    <th>Growth</th>
  </tr>
  <tr>
    <td>Marketing</td>
    <td>$1.2M</td>
    <td>+15%</td>
  </tr>
</table>
→
Q4 Earnings
DepartmentRevenueGrowth
Marketing$1.2M+15%

Your Task: Product Table

Create a table that:

  1. Has "Inventory" caption
  2. Contains headers: Product/Price/Stock
  3. Includes 2 product rows with data
Section 1/5Basic Table Format

Basic Table Format

Explore this concept

Organizing Data with Tables

Learn to structure tabular data using HTML's table elements for clear information presentation.

Basic Table Format

<table>
  <caption>Inventory</caption>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$19.99</td>
  </tr>
</table>
→
Inventory
ProductPrice
Widget$19.99
Core elements:
  • <table> - Table container
  • <tr> - Table row
  • <th> - Header cell
  • <td> - Data cell

HTML Editor

Preview