---
title: "Data Table Serialization"
category: studio-standards
status: required
url: https://webspecification.com/spec/studio-standards/data-table-serialization/
source_repo: undefined
licence: CC-BY-4.0
---

# Data Table Serialization

> Designing semantic HTML tables specifically so they can be perfectly parsed and reasoned over by LLMs.

## What is it?

Data Table Serialization is the strict adherence to semantic tabular markup (`<thead>`, `<tbody>`, `scope`, `headers`) specifically optimized for machine readability, avoiding complex visual table hacks.

## Why does it matter?

LLMs (Large Language Models) linearize HTML tables to reason about the data. Visual hacks like nested tables, extensive `colspan`/`rowspan`, or CSS-grid "tables" that use `<div>` elements completely destroy the mathematical relationship between columns and rows for a machine reader. A malformed table means your data will never be featured in an AI's comparative analysis.

## How to implement it

### 1. Strict Semantic Scope
Every table header must define its scope, and tables must be structurally flat.

```html
<table>
  <caption>Comparison of Edge Rendering vs Static Generation</caption>
  <thead>
    <tr>
      <th scope="col">Architecture</th>
      <th scope="col">TTFB</th>
      <th scope="col">Personalization</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Edge Rendering</th>
      <td>~50ms</td>
      <td>High</td>
    </tr>
    <tr>
      <th scope="row">Static Generation (SSG)</th>
      <td>~20ms</td>
      <td>None</td>
    </tr>
  </tbody>
</table>
```

### 2. Ban Div-Tables for Data
Do not use `display: grid` on `<div>` elements to represent 2D data matrices. Use actual `<table>` elements, and use CSS to make them responsive (e.g., `overflow-x: auto` on a wrapper).

## Verification

- Pass the page through a screen reader (VoiceOver / NVDA). If the screen reader cannot accurately announce the column header for a specific data cell, an LLM cannot parse it either.