<table> - table container

<table> is the core HTML tag for creating tables, organizing data in a structured manner through nested combinations of rows, columns, headers, and other elements. Tables are widely used for data display and layout design, but attention must be paid to semantics and accessibility.

Basic Structure of <table>

A complete table is wrapped in the <table> tag and contains sub-elements such as rows (<tr>), cells (<td>), and headers (<th>). Here is the simplest table example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Zhang San</td>
    <td>28</td>
  </tr>
</table>

Rendered effect:

Partitioned Structure of Tables

Header Area <thead>

Defines the title row of the table, typically containing <th> elements:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
</table>

Body Area <tbody>

Contains the main data content of the table:

<tbody>
  <tr>
    <td>Laptop</td>
    <td>¥5999</td>
  </tr>
</tbody>

Footer Area <tfoot>

Often used for summary rows:

<tfoot>
  <tr>
    <td>Total</td>
    <td>¥5999</td>
  </tr>
</tfoot>

Complete example:

<table>
  <thead>
    <tr><th>Item</th><th>Amount</th></tr>
  </thead>
  <tbody>
    <tr><td>Income</td><td>¥5000</td></tr>
    <tr><td>Expense</td><td>¥2000</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Balance</td><td>¥3000</td></tr>
  </tfoot>
</table>

Cell Merging Techniques

Column Span colspan

Merges cells horizontally:

<table>
  <tr>
    <th colspan="2">User Info</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Phone</td>
  </tr>
</table>

Row Span rowspan

Merges cells vertically:

<table>
  <tr>
    <th rowspan="2">Month</th>
    <th>Income</th>
  </tr>
  <tr>
    <th>Expense</th>
  </tr>
</table>

Complex merging example:

<table border="1">
  <tr>
    <td rowspan="2">A1</td>
    <td colspan="2">B1+C1</td>
  </tr>
  <tr>
    <td>B2</td>
    <td>C2</td>
  </tr>
</table>

Table Styling Control

Border Attributes

Basic styling via HTML attributes (deprecated, CSS recommended):

<table border="1" cellpadding="5" cellspacing="0">

Modern CSS Styling

Recommended to use CSS for styling:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

Responsive Table Design

Horizontal Scroll Solution

When table content is too wide:

<div style="overflow-x:auto;">
  <table>...</table>
</div>

Stacked Layout

Adaptation for small screens:

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

Advanced Table Features

Column Grouping <colgroup>

Controls styling for entire columns:

<table>
  <colgroup>
    <col style="background-color:yellow">
    <col span="2" style="background-color:lightblue">
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Table Caption <caption>

Adds a description to the table:

<table>
  <caption>2023 Sales Data</caption>
  <!-- Table content -->
</table>

Data Table Practices

Dynamic Table Generation

Creating tables with JavaScript:

const data = [
  { name: "Product A", price: 100 },
  { name: "Product B", price: 200 }
];

const table = document.createElement('table');
data.forEach(item => {
  const row = table.insertRow();
  row.insertCell().textContent = item.name;
  row.insertCell().textContent = `¥${item.price}`;
});
document.body.appendChild(table);

Sorting Functionality

Sorting by clicking headers:

document.querySelector('th').addEventListener('click', () => {
  const rows = [...table.querySelectorAll('tr:not(:first-child)')];
  rows.sort((a,b) => 
    a.cells[0].textContent.localeCompare(b.cells[0].textContent)
  );
  rows.forEach(row => table.appendChild(row));
});

Table Accessibility

ARIA Roles

Enhances screen reader support:

<table role="grid">
  <tr role="row">
    <th role="columnheader">Name</th>
  </tr>
</table>

Associating Cells

Using the headers attribute:

<th id="name">Name</th>
<td headers="name">Li Si</td>