JSON to HTML Table Converter

Semantic Table Markup

A correct HTML table is more than rows of cells. The elements carry meaning that browsers, screen readers, and search engines all rely on, and using the right ones costs nothing extra.

• table wraps the whole grid and declares that this is tabular data.
• caption gives the table a title. It must be the first child of table, and it is announced before the content.
• thead holds the header row. Browsers repeat it across pages when printing.
• tbody holds the data rows. It is inserted automatically if you omit it, so writing it explicitly keeps your source matching the rendered DOM.
• th marks a header cell, styled bold and centred by default and, more importantly, treated as a label for the cells it governs.
• td marks a data cell.
• tfoot holds totals and summary rows, and may appear before or after tbody in the source.

Side by Side Example

A pricing table generated from a JSON array.

The ampersand and the less-than sign in the note column are escaped. Without that, the last row would swallow everything after <4h as an unknown tag.

Accessibility Requirements

Screen readers navigate tables cell by cell and announce the relevant headers as they go. That only works if the markup says which headers apply.

Using a table for page layout was standard practice twenty years ago and is now simply wrong. A screen reader announces a five column table and starts reading coordinates, which is a genuinely disorienting experience. CSS handles layout, tables handle data.

Escaping Before Insertion

Any value that came from a user, an upload, or an external API is untrusted, and inserting it into HTML without escaping is a cross site scripting vulnerability.

Escape the ampersand first, otherwise you will double escape the entities you just produced. Framework templating in React, Vue, Angular, and most server side template engines escapes interpolated values by default, so the danger is concentrated in the escape hatches: dangerouslySetInnerHTML, v-html, and any raw string concatenation. Escape attribute values too, since a stray quote inside an attribute lets an attacker close it and add another one.

Responsive Strategies for Wide Tables

Tables do not reflow. A ten column table on a 375 pixel screen has to give somewhere, and there are two approaches that work.

The wrapper, not the table, gets the overflow. The tabindex makes the scrollable region reachable by keyboard, which is a requirement rather than a nicety, and the label tells a screen reader what the region contains. This preserves the table semantics completely and is the right default.

The alternative is a card layout below a breakpoint, where each row becomes a stacked block and the column name is shown as a label using a data attribute and a CSS pseudo element. It reads better on a phone for tables of five or six columns, and it is worse for anything where comparing values across rows is the point, since the alignment that made comparison easy is gone.

Light Styling and Where the Output Goes

Right align numeric columns and use tabular figures so the digits line up in columns. It makes scanning for magnitude far easier and it is one line of CSS.

Generated tables end up in a few predictable places. HTML email is the most demanding, since many clients support only inline styles and a limited CSS subset, so keep the markup simple and put styles on the elements. Documentation sites, CMS pages, and static site builds are the common cases, and there a semantic table with a stylesheet is ideal. Internal reports and exported dashboards round out the list.