HTML Tables

Table structure, accessibility, responsive tables, and data display.

Overview

Tables organize tabular data in a structured, accessible format.

Key Concepts

• Table Structure — <table>, <thead>, <tbody>, <tfoot>
• Accessibility — <caption>, <th>, scope attributes
• Responsive Design — Tables that work on mobile
• Data Display — Sorting and formatting data
• CSS Styling — Making tables visually appealing

Code Examples

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
      <th scope="col">Expenses</th>
      <th scope="col">Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$10,000</td>
      <td>$7,000</td>
      <td>$3,000</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$12,000</td>
      <td>$8,000</td>
      <td>$4,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$22,000</td>
      <td>$15,000</td>
      <td>$7,000</td>
    </tr>
  </tfoot>
</table>

/* Responsive table */
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

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

th {
  background-color: #f5f5f5;
  font-weight: bold;
}

tr:hover {
  background-color: #f9f9f9;
}

Practice

Create an accessible, responsive data table with sorting functionality.