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.

<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.