CSV to HTML Table

<table class="border-collapse w-full border border-gray-300 [&_tbody_tr:nth-child(even)]:bg-gray-50"> <thead> <tr> <th class="px-4 py-2 text-left font-semibold bg-gray-100 border border-gray-300">name</th> <th class="px-4 py-2 text-left font-semibold bg-gray-100 border border-gray-300">age</th> <th class="px-4 py-2 text-left font-semibold bg-gray-100 border border-gray-300">city</th> <th class="px-4 py-2 text-left font-semibold bg-gray-100 border border-gray-300">department</th> <th class="px-4 py-2 text-left font-semibold bg-gray-100 border border-gray-300">salary</th> </tr> </thead> <tbody> <tr> <td class="px-4 py-2 border border-gray-300">Alice</td> <td class="px-4 py-2 border border-gray-300">30</td> <td class="px-4 py-2 border border-gray-300">New York</td> <td class="px-4 py-2 border border-gray-300">Engineering</td> <td class="px-4 py-2 border border-gray-300">95000</td> </tr> <tr> <td class="px-4 py-2 border border-gray-300">Bob</td> <td class="px-4 py-2 border border-gray-300">25</td> <td class="px-4 py-2 border border-gray-300">San Francisco</td> <td class="px-4 py-2 border border-gray-300">Design</td> <td class="px-4 py-2 border border-gray-300">78000</td> </tr> <tr> <td class="px-4 py-2 border border-gray-300">Charlie</td> <td class="px-4 py-2 border border-gray-300">35</td> <td class="px-4 py-2 border border-gray-300">Austin</td> <td class="px-4 py-2 border border-gray-300">Marketing</td> <td class="px-4 py-2 border border-gray-300">82000</td> </tr> <tr> <td class="px-4 py-2 border border-gray-300">Diana</td> <td class="px-4 py-2 border border-gray-300">28</td> <td class="px-4 py-2 border border-gray-300">Boston</td> <td class="px-4 py-2 border border-gray-300">Engineering</td> <td class="px-4 py-2 border border-gray-300">91000</td> </tr> </tbody> </table>

CSV to HTML Table: Generate Styled Tables Instantly

Embedding tabular data in a webpage should not require manual HTML. Paste your CSV, choose your styling options, and this tool generates a complete HTML table — header, body, striped rows, and borders — ready to drop into any page or email template.

Formula

Generated classes are Tailwind CSS utilities. Swap them for inline styles if Tailwind is not available in your target page.

Tailwind CSS Classes

The output uses Tailwind CSS utility classes for styling — border-collapse, px-4, py-2, bg-gray-100 for the header, and optional striped row styling via the nth-child pseudo-class. If your target page does not use Tailwind, you can replace the class attributes with equivalent inline styles.

Live Preview

Toggle to the Preview tab to see the rendered table before copying. The preview applies the same CSS classes inside an isolated container, so what you see is exactly what you'll get when pasted into a Tailwind-enabled page.

XSS Safety

All cell values are HTML-escaped before output — ampersands become &, angle brackets become < and >. This prevents injected HTML in your CSV data from executing as markup in the generated table.

Practical Examples

Embedding a Pricing Table

Turn a pricing-tiers.csv into a polished HTML table for a landing page.

1.Paste the CSV with plan names and prices as columns
2.Enable 'Bordered' and 'Striped' for readability
3.Preview the result to verify layout
4.Copy and paste into your HTML template or email

Styling Options

Header row with gray background and bold text
Optional stripe: even rows highlighted
Optional border: all cells with a light gray border
Responsive full-width layout by default

Good Use Cases

Embedding data tables in blog posts or wikis
Generating HTML email tables from spreadsheet data
Creating comparison tables for documentation
Quick data visualization in static HTML pages

Frequently Asked Questions

Are the HTML classes Tailwind or inline styles?

The generated table uses Tailwind CSS utility classes. If you are pasting into a page without Tailwind, swap the classes for inline styles or add your own stylesheet.

Can I preview the table before copying?

Yes — toggle to the Preview tab to see the rendered table. The preview respects your striped and bordered settings.

What special characters are escaped?

Ampersands (&), less-than (<), and greater-than (>) signs in cell values are escaped to their HTML entities to prevent XSS in the output.