YAML to HTML Table Converter

Convert YAML to HTML online, for free. This tool turns a YAML list of records — from a .yaml or .yml file — into a semantic, ready-to-style HTML `<table>`, complete with `<thead>` and `<tbody>`, that you can preview instantly and paste straight into a page.

Drop your YAML file here

Supports .yaml and .yml files, processed entirely on your device

Untitled.yaml0 B0 lines0 characters

YAML →JSON

Your converted output will appear here.

Waiting for YAML input.

What to expect

Generates accessible markup with a proper `<thead>` and `<tbody>`.
A list of mappings becomes one column per key, one row per item.
Values are HTML-escaped automatically to prevent broken markup.

Example

Input (YAML)

- name: Aperture Docs
  version: 1.4.2
  active: true
- name: Beacon CLI
  version: 0.9.0
  active: false
- name: Contour Sync
  version: 2.1.0
  active: true

Output (html)

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>version</th>
      <th>active</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aperture Docs</td>
      <td>1.4.2</td>
      <td>true</td>
    </tr>
    <tr>
      <td>Beacon CLI</td>
      <td>0.9.0</td>
      <td>false</td>
    </tr>
    <tr>
      <td>Contour Sync</td>
      <td>2.1.0</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

When a ready-made HTML table helps

Sometimes the quickest way to show YAML data to people is a web page. A converted HTML table drops straight into a static site, an email template, an internal dashboard or a CMS rich-text field, with no JavaScript and no templating step needed.

The markup is deliberately plain. It uses semantic table, thead and tbody elements and no inline styles or classes, so it picks up your site's existing CSS automatically. Because values are HTML-escaped, you can also paste data you don't fully trust without risking broken or injected markup.

Static pages and docs
Publish a pricing, feature or status table without writing a template.
HTML emails and reports
Embed a tabular summary built from a YAML data file.
Internal dashboards
Show configuration or inventory lists to teammates in any browser.
Prototyping layouts
Get real table markup to style while you design a page.

How YAML maps to HTML Table

These are the exact rules this converter applies. Each result below was generated by the tool itself, so it matches what you will see in the output panel.

A list of mappings becomes rows

Every key is a header cell in the thead, and each mapping becomes a row in the tbody.

YAML

- plan: Free
  seats: 1
- plan: Team
  seats: 10

HTML Table

<table>
  <thead>
    <tr>
      <th>plan</th>
      <th>seats</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Team</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

A single mapping is a Key / Value table

A lone mapping produces a two-column table listing each key and its value.

YAML

name: Beacon
version: 0.9.0

HTML Table

<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>name</td>
      <td>Beacon</td>
    </tr>
    <tr>
      <td>version</td>
      <td>0.9.0</td>
    </tr>
  </tbody>
</table>

Markup in values is escaped

Angle brackets and ampersands are converted to entities so values display as text.

YAML

- note: "<b>hi</b> & bye"

HTML Table

<table>
  <thead>
    <tr>
      <th>note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&lt;b&gt;hi&lt;/b&gt; &amp; bye</td>
    </tr>
  </tbody>
</table>

Missing fields leave empty cells

When records have different keys, every column still appears and gaps stay blank.

YAML

- name: A
  tier: 1
- name: B

HTML Table

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>tier</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>1</td>
    </tr>
    <tr>
      <td>B</td>
      <td></td>
    </tr>
  </tbody>
</table>

A trickier example: untrusted markup and uneven records

The first record contains a script tag and an ampersand; the second has an extra field and a list value.

Input (YAML)

- name: "<script>alert(1)</script>"
  note: Tom & Jerry
- name: Plain
  note: "5 > 3"
  extra: [a, b]

Output (HTML Table)

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>note</th>
      <th>extra</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&lt;script&gt;alert(1)&lt;/script&gt;</td>
      <td>Tom &amp; Jerry</td>
      <td></td>
    </tr>
    <tr>
      <td>Plain</td>
      <td>5 &gt; 3</td>
      <td>[&quot;a&quot;,&quot;b&quot;]</td>
    </tr>
  </tbody>
</table>

The script tag is rendered as visible text rather than executed, special characters are turned into entities, and the list is written as JSON inside its cell. Escaping happens automatically, but always sanitise data again if you place it into a page that mixes in other content.

Dropping the table into a page

A small script can wrap the generated table in a full page. This Python example writes it into a document you can open in a browser:

python

from pathlib import Path

table = Path("releases-table.html").read_text(encoding="utf-8")

page = (
    "<!doctype html><html lang='en'><head><meta charset='utf-8'>"
    "<title>Releases</title></head><body><h1>Releases</h1>"
    + table
    + "</body></html>"
)
Path("releases.html").write_text(page, encoding="utf-8")

YAML vs HTML Table at a glance

HTML tables are meant to be read by people in a browser.

Feature	YAML	HTML Table
Audience	Developers and tools	People viewing a web page
Styling	None	Styled with CSS
Nesting	Arbitrary depth	Flat grid (nested data shown as JSON)
Accessibility	Not applicable	Semantic table markup for screen readers
Editing	Text editor	Text editor or CMS embed

Things to watch for when converting to HTML Table

The table has no CSS, so it will look plain until you style it with your own stylesheet.
Only a table is generated, not a full HTML document; wrap it in a page yourself if you need one.
Large tables on small screens may need a horizontally scrolling wrapper in your layout.
Nested structures are shown as JSON text rather than as nested tables.

YAML to HTML Table Converter FAQ

Does this convert Swagger or OpenAPI YAML into API documentation?

No — this tool converts any YAML into a generic HTML table, not into interactive Swagger/OpenAPI documentation. If you're looking to render an OpenAPI spec as browsable API docs, dedicated tools like Swagger UI or Redoc are built specifically for that.

Can I convert YAML to HTML in Python?

Yes — load the YAML with PyYAML, then build the table with a templating library like Jinja2, or construct it directly from the parsed data. This tool produces the same table markup instantly for a quick one-off conversion.

Is the generated table accessible?

Yes, it uses semantic `<table>`, `<thead>`, and `<tbody>` elements that assistive technology can navigate.

Can I style the table afterward?

Yes, the markup is unstyled by design so it inherits your site's CSS or you can add classes yourself.

Is the generated HTML safe to paste into a page?

Values are escaped, so characters such as < and & appear as text rather than markup. That protects the table itself, but you should still follow your own site's content-security practices.

How do I make the table look nicer?

Add a class or id to the table after pasting and style it with CSS, or rely on your site's default table styles. The markup is unstyled by design so it adapts to any design system.

Can I use it in an email?

Yes, though many email clients ignore external CSS. Add inline styles to the table, th and td elements for reliable rendering across clients.

Is there a difference between .yml and .yaml?

No. ".yml" and ".yaml" are just two file extensions for the exact same format — this converter accepts either one, so a "yml to HTML" conversion and a "yaml to HTML" conversion produce identical results.

Related conversions

YAML to Markdown Table

Writing for GitHub or a docs site? A Markdown table renders there without raw HTML.

Try it

YAML to CSV

Let people sort and filter the same records in Excel or Google Sheets.

Try it

YAML to XML

Exchanging structured data between systems instead of showing it to people.

Try it

Getting an error? Check your input with theYAML Validator, or tidy it first with theYAML Formatter. You can also browse all YAML converters.

YAML to HTML Table Converter

What to expect

Example

When a ready-made HTML table helps

Static pages and docs

HTML emails and reports

Internal dashboards

Prototyping layouts

How YAML maps to HTML Table

A list of mappings becomes rows

A single mapping is a Key / Value table

Markup in values is escaped

Missing fields leave empty cells

A trickier example: untrusted markup and uneven records

Dropping the table into a page

YAML vs HTML Table at a glance

Things to watch for when converting to HTML Table

YAML to HTML Table Converter FAQ

Related conversions

YAML to Markdown Table

YAML to CSV

YAML to XML