JSON to HTML Table — Free Online HTML Table Generator

What Is an HTML Table?

An HTML table displays tabular data in rows and columns using <table>, <tr>, <th>, and <td> elements.

<table>
 <thead>
   <tr>
     <th>Name</th>
     <th>Age</th>
     <th>City</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Alice</td>
     <td>30</td>
     <td>New York</td>
   </tr>
   <tr>
     <td>Bob</td>
     <td>25</td>
     <td>London</td>
   </tr>
 </tbody>
</table>

HTML Table Elements

Semantic HTML Tables

Semantic table structure improves accessibility and SEO:

<table>
 <caption>Employee Directory</caption>
 <thead>
   <tr><th>Name</th><th>Department</th><th>Role</th></tr>
 </thead>
 <tbody>
   <tr><td>Alice</td><td>Engineering</td><td>Senior Developer</td></tr>
 </tbody>
</table>

Screen readers use <thead>, <th>, and <caption> to navigate tables. Always use semantic structure for publicly accessible pages.

Why Convert JSON to HTML Tables?

About This JSON to HTML Table Converter

This tool runs entirely in your browser. Your data is never uploaded to any server. No data is transmitted, logged, or stored. The conversion happens locally on your device using JavaScript.  

The tool includes a syntax-highlighted code editor for pasting JSON directly, or you can upload a .json file via drag-and-drop. Real-time validation confirms whether your JSON is well-formed before conversion.  

Core Features

1. Dual Input Modes

• File Upload: Drag and drop or select a .json file.

• Code Editor: Paste or type raw JSON with syntax highlighting and real-time validation.

2. Escape HTML Characters

Converts HTML special characters to entities to prevent rendering issues and XSS attacks.

Without escaping:

<td>A & B < C</td><!-- Browser interprets < C as an HTML tag -->

With escaping:

<td>A &amp; B &lt; C</td><!-- Renders correctly as: A & B < C -->

Always enable this when data comes from user input or external sources.

3. DIV Table

Generates a CSS-based table using <div> elements instead of <table> tags.

Standard TABLE output:

<table>
 <tr><th>Name</th><th>Age</th></tr>
 <tr><td>Alice</td><td>30</td></tr>
</table>

DIV Table output:

<div class="divTable">
 <div class="divTableHeading">
   <div class="divTableRow">
     <div class="divTableHead">Name</div>
     <div class="divTableHead">Age</div>
   </div>
 </div>
 <div class="divTableBody">
   <div class="divTableRow">
     <div class="divTableCell">Alice</div>
     <div class="divTableCell">30</div>
   </div>
 </div>
</div>

Use DIV tables when:

• Email clients strip <table> styles

• You need more flexible CSS layout control

• Frameworks require div-based components

Use <table> for:

• Semantic HTML (accessibility)

• Data tables on public web pages

• SEO-sensitive content

4. Minify Code

Removes whitespace, indentation, and line breaks from the output.

Regular:

<table>
 <tr>
   <th>Name</th>
 </tr>
 <tr>
   <td>Alice</td>
 </tr>
</table>

Minified:

<table><tr><th>Name</th></tr><tr><td>Alice</td></tr></table>

Use minified output for production (smaller file size). Use formatted output for development (readable).

5. Table Head Structure

Wraps the header row in a <thead> element for semantic structure:

<table>
 <thead>
   <tr><th>Name</th><th>Age</th></tr>
 </thead>
 <tbody>
   <tr><td>Alice</td><td>30</td></tr>
 </tbody>
</table>

Enabling this improves:

• Accessibility (screen readers)

• Print styling (repeat header on each page)

• CSS targeting (thead th vs tbody td)

6. Column Header

Renders the first data row as <th> (header) cells instead of <td> (data) cells.

Enabled:

<tr><th>Name</th><th>Age</th></tr>

Disabled:

<tr><td>Name</td><td>Age</td></tr>

Enable this when your first JSON object keys should be column headers.

7. Table Caption

Adds a <caption> element above the table:

<table>
 <caption>Employee Directory — Q1 2026</caption>
 ...
</table>

<caption> is the semantically correct way to title an HTML table. Screen readers announce it. It improves accessibility scores.

8. Table Class

Adds a CSS class to the <table> element:

<table class="table table-striped">  ...</table>

Common uses:

• Bootstrap: table table-striped table-bordered

• Tailwind: min-w-full divide-y divide-gray-200

• Custom: data-table report-table

9. Table ID

Adds an HTML id attribute to the <table> element:

<table id="employee-table">  ...</table>

Use for JavaScript targeting (document.getElementById('employee-table')) or CSS anchoring.

10. Privacy by Design

All processing runs entirely in your browser. No data is uploaded to any server.

How to Use This JSON to HTML Table Converter?

Step 1: Provide Your JSON Data

Choose one of two input methods:

• Upload a file: Click "Choose File" and select a .json file, or drag it into the upload area.

• Paste data: Click "Enter Data" to switch to the code editor. Paste your JSON array.

Important: The tool expects a JSON array of objects. Each object becomes a row.

Step 2: Configure HTML Output

Use the Properties panel on the right:

1. Escape HTML Characters: Enable for user-generated or external data.

2. DIV Table: Enable for email-friendly or div-based layouts.

3. Minify Code: Enable for production output.

4. Table Head Structure: Enable for semantic HTML.

5. Column Header: Enable to render first row as <th>.

6. Table Caption: Enter a caption for accessibility.

7. Table Class: Enter CSS classes (e.g., table table-striped).

8. Table ID: Enter an HTML ID for JavaScript targeting.

Step 3: Convert

Click Convert. The HTML appears in the "Output Data" panel.

Step 4: Copy or Download

• Click Copy to Clipboard to paste into your HTML file or CMS.

• Premium users can click Download File to save.

Complete Examples

Example — Full Semantic Table

Input JSON:

[
   {"name": "Alice", "department": "Engineering", "salary": 95000, "location": "New York"},
   {"name": "Bob", "department": "Marketing", "salary": 78000, "location": "London"},
   {"name": "Charlie", "department": "Engineering", "salary": 102000, "location": "Tokyo"}
]

Configuration:

• Escape HTML: On

• DIV Table: Off

• Minify: Off

• Table Head Structure: On

• Column Header: On

• Table Caption: Employee Directory — 2026

• Table Class: table table-striped

• Table ID: employee-table

Output:

<table id="employee-table" class="table table-striped">
 <caption>Employee Directory — 2026</caption>
 <thead>
   <tr>
     <th>name</th>
     <th>department</th>
     <th>salary</th>
     <th>location</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Alice</td>
     <td>Engineering</td>
     <td>95000</td>
     <td>New York</td>
   </tr>
   <tr>
     <td>Bob</td>
     <td>Marketing</td>
     <td>78000</td>
     <td>London</td>
   </tr>
   <tr>
     <td>Charlie</td>
     <td>Engineering</td>
     <td>102000</td>
     <td>Tokyo</td>
   </tr>
 </tbody>
</table>

Example — Bootstrap-Styled Table

Configuration:

• Table Class: table table-bordered table-hover

• Table Head Structure: On

• Column Header: On

The output is ready to paste into any Bootstrap 3/4/5 page.

Example — Email-Friendly DIV Table

Configuration:

• DIV Table: On

• Minify: On (email templates benefit from smaller size)

• Escape HTML: On

Use this for email templates where <table> CSS support is inconsistent.

Example — Minimal Plain Table

Configuration:

• All options: Off

• No caption, class, or ID

Output:

<table>
 <tr>
   <td>name</td>
   <td>age</td>
 </tr>
 <tr>
   <td>Alice</td>
   <td>30</td>
 </tr>
</table>

HTML Table Styling with CSS

Basic CSS

table {
 border-collapse: collapse;
 width: 100%;
}
th, td {
 border: 1px solid #ddd;
 padding: 8px;
 text-align: left;
}
th {
 background-color: #f4f4f4;
}
tr:nth-child(even) {
 background-color: #f9f9f9;
}

Bootstrap Integration

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
<table class="table table-striped table-bordered">
 ...
</table>

Tailwind CSS Integration

<table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
   <tr>
     <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
   </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200">
   <tr>
     <td class="px-6 py-4 whitespace-nowrap">Alice</td>
   </tr>
 </tbody>
</table>

Frequently Asked Questions (FAQ)

• Does the tool upload my data?

  No. All conversion happens locally in your browser using JavaScript. Your data never leaves your device.

• What is the difference between TABLE and DIV Table?

  TABLE uses standard <table>, <tr>, <th>, <td> elements — semantically correct and accessible. DIV Table uses <div> elements with CSS classes — useful for email templates and custom layouts. Use TABLE for web pages; use DIV for emails.

• Should I escape HTML characters?

  Yes, when data comes from user input, APIs, or external sources. Escaping prevents XSS attacks and rendering errors. It is safe to leave enabled at all times.

• What is Table Head Structure?

  It wraps the header row in <thead> and data rows in <tbody>. This is recommended for accessibility, print styling, and semantic HTML.

• What is Column Header?

  It renders the first row using <th> elements (bold, centered) instead of <td>. Enable this when JSON object keys should be column headers.

• Can I use Bootstrap classes?

  Yes. Enter Bootstrap classes in the Table Class field: table table-striped table-bordered table-hover. The output works with Bootstrap 3, 4, and 5.

• What input format is required?

  A JSON array of objects: [{"key": "value"}, ...]. Each object becomes one row. Object keys become column headers.

• How do I style the table?

  Add CSS classes in the Table Class field (e.g., Bootstrap or Tailwind classes), or add a <style> block targeting the Table ID. See the CSS examples above.

• What JSON structures are supported?

  JSON arrays of objects ([{"key":"value"},...]) and JSON arrays of arrays ([["a","b"],...]). Each element becomes a table row. For objects, keys become column headers. For arrays, positional indexing is used.  

• What is the Escape HTML Characters option?

  It converts &, <, >, ", and ' in your JSON values into their HTML entity equivalents. This prevents XSS attacks and ensures that HTML-special characters display as text instead of being parsed as markup. Always enable this when inserting the output into a web page.  

• What is the difference between a TABLE and a DIV table?

  A standard HTML table uses semantic <table>, <tr>, and <td> elements. A DIV table uses <div> elements with CSS display:table, display:table-row, and display:table-cell properties. DIV tables offer more flexibility in responsive layouts but lose the semantic meaning that screen readers and search engines rely on.  

• What is the Table Head Structure option?

  When enabled, the tool wraps the header row in a <thead> element and the data rows in a <tbody> element. This is recommended by the WHATWG HTML specification and improves accessibility for screen readers.  

• Why is the Convert button disabled?

  The button is disabled when the input JSON is invalid. Fix syntax errors (missing brackets, trailing commas, unquoted strings) until the validation indicator turns green.  

• What is the maximum input size?

  There is no server-side limit. Processing happens in your browser, so practical limits depend on your device's available memory. JSON data up to 50 MB typically converts without issue on modern hardware.  

• Is there a file size limit?

  The tool processes data entirely in your browser. Files up to 10 MB typically convert without issues on modern hardware.

• Can I use this on mobile?

  Yes. The tool is responsive and works on smartphones and tablets.