Size Chart Widget
Publish your size guide as a real table that shoppers can read on a phone: switch every measurement between centimetres and inches with one tap, follow a row and column with the highlight, and read your own How to measure tips underneath.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="size-chart"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
The first line of the table is the header, separated by | - Size | Chest (cm) | Waist (cm) | Hips (cm) - and every following line is a row. A column whose header ends in (cm), (in) or (inches) is a measurement column: the cm / in switch converts every number in it, including both ends of a range such as 86-90, while size names, notes and unmarked columns are left alone. One inch is exactly 2.54 centimetres, the definition fixed by the 1959 international yard and pound agreement, and converted figures are shown to one decimal place - 96.5 cm becomes 38.0 in and 40 in becomes 101.6 cm. Your own figures in the unit you typed are always shown exactly as written. Rows with too few cells are padded with a dash and extra cells are ignored. The first column stays pinned while a wide table scrolls sideways inside its own box, a line above says so when it does, and the row and column under the pointer or keyboard focus are tinted; arrow keys move between cells after Enter. The sample chart is labelled as an example because sizes differ from brand to brand: replace it with your own measurements.
Method
- 1 in = 2.54 cm exactly; in = cm / 2.54 and cm = in x 2.54, rounded to one decimal place
- Measurement columns: header ends in (cm), (in) or (inches); every number in their cells is converted, other text kept
- Header line + up to 60 rows and 10 columns; short rows padded, long rows cut to the header's width
- Shown first: the unit of the first measurement column (or the one chosen in the builder)
Worked examples
Chest 96.5 cm, switched to inches
Inputs: Header Size | Chest (cm); row M | 96.5; tap in
Result: M | 38.0 and the header Chest (in)
96.5 / 2.54 = 37.992..., shown to one decimal place.
A range in inches, switched to centimetres
Inputs: Header Size | Waist (in); row 32 | 32-34; tap cm
Result: 32 | 81.3-86.4 and the header Waist (cm)
Each end of the range is converted: 32 x 2.54 = 81.28 and 34 x 2.54 = 86.36. The Size column is not a measurement and stays 32.
A ragged row
Inputs: Header Size | Chest (cm) | Waist (cm); row XL | 104
Result: XL | 104 | -
Missing cells are shown as a dash rather than shifting the row.
Limitations
- Converts only centimetres and inches; weights, EU/US/UK size numbers and fractions such as 32 1/2 are not converted.
- One table per box, up to 60 rows and 10 columns.
- Converted values are rounded to one decimal place.
Where publishers use it
- A clothing shop's product page with chest, waist and hip ranges in centimetres that US visitors switch to inches
- A children's wear brand listing height and age bands with a How to measure your child section
- A shoe store printing UK, EU and US sizes with foot length in cm and inches
- A tailor's blog post comparing standard shirt collar sizes in inches and their metric equivalents
Questions
How accurate is the cm to inch conversion?
The factor is exact: since the international yard and pound agreement of 1959 one inch is defined as precisely 2.54 centimetres, the value NIST lists in its SI guide. The only rounding is to one decimal place for display, so 96.5 cm shows as 38.0 in (37.99...) and 100 cm as 39.4 in. If you prefer to publish both units yourself, add separate (cm) and (in) columns and the switch simply converts both into one unit.
Can I use the default chart for my products?
No - it is a sample with round, evenly spaced numbers so the preview is not empty, and its caption says so. Sizes vary widely between brands and cuts. Measure your own garments or use your manufacturer's specification, and replace the sample before you publish.
What if my table is wider than a phone screen?
The table scrolls sideways inside its own box instead of stretching your page. The first column stays pinned so shoppers never lose track of the size, a short line above the table appears only when there is something to scroll, and the scroll area can be reached with the keyboard.
Which columns change when someone switches units?
Only columns whose header ends in a unit in brackets, such as Chest (cm) or Inseam (in). Columns like Size, UK, EU or Fit stay as typed, so a shoe size 42 is never mistaken for a length.
Is this accessible to screen-reader users?
It is a real HTML table with a caption, column headers and row headers, so screen readers announce the size and measurement for each cell. The unit switch is a pair of buttons that report which one is pressed, and each change is announced.
Sources
- NIST Special Publication 811, Guide for the Use of the International System of Units (SI), Appendix B - National Institute of Standards and Technology . inch = 2.54 cm exactly (B.8 factors for units listed alphabetically). Checked 2026-10-06.
- U.S. survey foot: revised unit conversion factors - National Institute of Standards and Technology . The international foot of 1959 = 0.3048 m exactly, so 1 in = 2.54 cm. Checked 2026-10-06.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Size Chart https://a2z.tools/embed/size-chart
<a href="https://a2z.tools/embed/size-chart">A2Z Tools Size Chart</a>
[A2Z Tools Size Chart](https://a2z.tools/embed/size-chart)
Size Chart by A2Z Tools - https://a2z.tools/embed/size-chart
Related widgets
-
Length, mass, volume, area, temperature, speed, time, data, pressure, energy and power - exact factors.
-
Feature-by-feature comparison of 2-6 products with ticks, crosses and words, a sticky first column and grouping.
-
Two to five shop promises - delivery, returns, checkout, support - as an icon strip, grid or compact row.
-
The cards and wallets your shop takes - Visa, PayPal, Apple Pay, UPI, iDEAL - as tidy tiles or footer glyphs.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
-
A slim bar or small circle that fills as visitors read your article - measured through the article itself.
