Convert an Excel Spreadsheet to a Responsive Tailwind HTML Table

Default striped table from a 3-column sheet

The default style. Note the wrapper overflow-x-auto div, the uppercase <th> styling, and the even:bg-gray-50 zebra class on every <tr>.

Input (first sheet, row 1 = headers):
Name    | Role      | Team
Sue     | Engineer  | Core
Jon     | Designer  | Web

Output (style: striped):
<div class="overflow-x-auto">
  <table class="w-full text-sm text-left text-gray-700 border-collapse">
    <thead><tr>
      <th class="px-4 py-3 bg-gray-100 font-semibold ... text-xs border-b">Name</th>
      ...
    </tr></thead>
    <tbody>
      <tr class="even:bg-gray-50">
        <td class="px-4 py-3 border-b">Sue</td> ...
      </tr>
    </tbody>
  </table>
</div>

Dark-mode bordered table

Bordered style with dark mode on. The dark: classes land on the wrapper, each <th>, and each <tr> — not on <td> and not on <table>. There is no zebra class because zebra only exists for striped.

Config: style = bordered, darkMode = on

<div class="overflow-x-auto dark:bg-gray-800 dark:text-gray-100">
  <table class="w-full text-sm ... border border-gray-300 border-collapse">
    <thead><tr>
      <th class="px-3 py-2 bg-gray-50 font-semibold border border-gray-300 dark:bg-gray-800 dark:text-gray-100">Name</th>
    </tr></thead>
    <tbody>
      <tr class="dark:bg-gray-800 dark:text-gray-100">
        <td class="px-3 py-2 border border-gray-200">Sue</td>
      </tr>
    </tbody>
  </table>
</div>

Cell text containing angle brackets is escaped

Spreadsheet content that looks like HTML is escaped, so it renders as text instead of injecting markup. The four escaped characters are &, <, >, and ". The single quote is left as-is.

Input cell value:
<b>bold</b> & "quoted"

Output <td>:
<td class="px-4 py-3 border-b">&lt;b&gt;bold&lt;/b&gt; &amp; &quot;quoted&quot;</td>

Renders on the page as the literal text:
<b>bold</b> & "quoted"

Empty cells become empty <td>, not dropped columns

Blank cells are read as empty strings, so the column structure stays intact and every row keeps the same number of cells as the header row.

Input:
Name | Email          | Phone
Sue  | sue@example.com |
Jon  |                | 555-0100

Output tbody rows (compact):
<tr><td>Sue</td><td>sue@example.com</td><td></td></tr>
<tr><td>Jon</td><td></td><td>555-0100</td></tr>

Minimal style for a borderless reference list

Minimal drops all border classes and the bg-gray header fill — just padding and a bold header. Good for sitting a table inside a card that already has its own border.

Config: style = minimal

<div class="overflow-x-auto">
  <table class="w-full text-sm text-left text-gray-700">
    <thead><tr>
      <th class="px-4 py-2 font-semibold text-gray-800">Term</th>
      <th class="px-4 py-2 font-semibold text-gray-800">Definition</th>
    </tr></thead>
    <tbody>
      <tr class="">
        <td class="px-4 py-2">SSG</td>
        <td class="px-4 py-2">Static Site Generation</td>
      </tr>
    </tbody>
  </table>
</div>

The tool reads sheet index 0 and ignores every other tab. If your data lives on the second or third sheet, move it to the first sheet (or save it as its own file) before exporting. There is no sheet-picker in this tool's UI.

Row 1 is always treated as the header row, so a merged title cell or a 'Generated on...' banner in row 1 becomes your <th> labels and the real headers become a data row. Delete leading banner rows in the spreadsheet first so the genuine header row is row 1.

SheetJS auto-suffixes duplicates, so headers Name, Name become <th>Name</th> and <th>Name_1</th>. No error is raised — but the suffixed label appears verbatim in the output, so rename the duplicate column in the spreadsheet if you want clean headers.

An empty header cell produces an empty <th></th>. The column is kept (its data cells still render) but the heading is blank. Fill in the header in the spreadsheet to get a labelled column.

Headers are derived from the first data row's keys. Cells in later rows that fall under a column not present in the first row are not given their own <td> — keep your sheet rectangular (every row the same width as the header row) for predictable output.

The output is a <div>+<table> snippet with no <!DOCTYPE>, no <head>, and no <script src="...tailwindcss...">. It assumes Tailwind is already set up in your project. To prototype standalone, wrap the snippet in your own HTML page and add the Tailwind Play CDN yourself.

If the file holding the pasted snippet is not covered by your Tailwind content globs, the build strips the classes and the table renders with no styling. Add the file path to your Tailwind content array and rebuild.

Tailwind Table Export is a Pro-tier feature; the tool refuses to run on the Free tier. Upgrade to Pro (50 MB / 100,000 rows) or higher to use it.

Every data row becomes a <tr> with no truncation, so a 100,000-row sheet generates a 100,000-row table. The HTML is valid but the browser will be slow to render it. For large datasets, paginate or virtualise on the page rather than dumping the whole table inline.