Size chart HTML table template

A sizing table for apparel sellers — sizes down the side as real row headings, measurements across. Screen readers read each cell with both its size and its measurement, which is exactly what headers are for.

The table

Measurements in cm
Size	Chest	Waist	Length
S	92	78	68
M	98	84	70
L	104	90	72
XL	110	96	74

Open in the table generator → Copied ✓

Opens the generator with this exact table loaded — change the numbers, add rows, copy your version.

Or copy the raw HTML

<div class="ht-wrap">
<table class="ht">
  <caption>Measurements in cm</caption>
  <thead>
    <tr>
      <th scope="col">Size</th>
      <th scope="col" class="ta-r">Chest</th>
      <th scope="col" class="ta-r">Waist</th>
      <th scope="col" class="ta-r">Length</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">S</th>
      <td class="ta-r">92</td>
      <td class="ta-r">78</td>
      <td class="ta-r">68</td>
    </tr>
    <tr>
      <th scope="row">M</th>
      <td class="ta-r">98</td>
      <td class="ta-r">84</td>
      <td class="ta-r">70</td>
    </tr>
    <tr>
      <th scope="row">L</th>
      <td class="ta-r">104</td>
      <td class="ta-r">90</td>
      <td class="ta-r">72</td>
    </tr>
    <tr>
      <th scope="row">XL</th>
      <td class="ta-r">110</td>
      <td class="ta-r">96</td>
      <td class="ta-r">74</td>
    </tr>
  </tbody>
</table>
</div>

<style>
  .ht-wrap { overflow-x: auto; }
  .ht { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
  .ht caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; }
  .ht th, .ht td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid #d9dce0; vertical-align: top; }
  .ht thead th { border-bottom: 2px solid #9aa3ad; }
  .ht tbody tr:nth-child(even) { background: rgba(125, 125, 125, 0.07); }
  .ht .ta-r { text-align: right; }
  .ht .ta-c { text-align: center; }
</style>

Tips for a size chart that works

State the unit once in the caption ("Measurements in cm") instead of repeating it in every cell — cleaner, and easier to offer an inches version later.
Measure a real garment laid flat and say so ("garment measurements, laid flat") — body measurements and garment measurements differ, and mixing them up drives returns.
Keep sizes as row headings (this template does) so assistive tech announces "M, chest, 98" instead of a bare number.

A size chart lives on a product page — hform/pages builds one the same way this tool builds tables, free and in the browser.

Questions

Should sizes be rows or columns?

Rows, with the size as the row heading — people scan for their size first, then read across. It also stays readable on phones, where wide tables must scroll.

Does a size chart reduce returns?

A specific one does. "S/M/L" alone tells customers nothing between brands; garment measurements in cm let people check against a shirt they own.

From the same maker

Need more than a table?

Tentmaker Stores gives you a complete online store — product pages, checkout and everything in between. Built for small makers and niche sellers.