General Information

Click the section headings below to expand them for more information and options.

📖 Introduction ▼

This app converts standard markdown and CSV tables into responsive HTML tables that can be embedded in websites and other apps or used as standalone pages.

✨ Key Features:

  • Responsive Design: Tables adapt beautifully to all screen sizes
  • Interactive Controls: Make tables sortable by columns and allow users to show/hide columns
  • Column Highlighting: Emphasize first and last columns, display any column in italics
  • Row Styling: Highlight first and last rows with custom styling
  • Custom Colors: Choose colors for columns, rows, alternating rows, and hover effects
  • Markdown Support: Basic markdown formatting (bold, italics, code, links) is preserved

🎯 Perfect For:

  • Embedding responsive tables in Google Sites
  • Creating course materials in LearnWorlds
  • Adding interactive tables to any website or web app
  • Converting tables from Google Docs (export as markdown)
  • Converting tables from Excel or Google Sheets (export as CSV)

🚀 Quick Instructions ▼

  1. Configure Your Table (Optional):
    Click on the Style & Features Configuration and Color Customization sections below to fine-tune your table appearance, or skip them to use the defaults.
  2. Select Source Format:
    Click the Markdown or CSV tab to indicate your source table format.
  3. Input Your Table:
    • Paste your table code directly into the text area
    • Type your table manually
    • Upload a file using the "Upload" button
  4. View the Output:
    Look for your converted table in the ✨ Generated HTML section (right side on desktop, bottom on mobile).
  5. Use Your Table:

    📋 Copy HTML: Copy the generated HTML code to paste into your website or app

    🔍 Open Preview: See how your table will look before using it

    💾 Download HTML Page: Get a complete, standalone HTML file that works offline

💡 Pro Tip: The converter automatically updates as you type or make changes to the configuration!

Configuration & Options

⚙️ Style & Features Configuration ▼

General Settings

Optional title to be used when downloading the table as a file with the [Download HTML Page] button.
How table behaves on mobile devices

Column Settings

Enable the first column to be styled differently.
Default: Bold, Deep Marine Blue text.
Enable the last column to be styled differently.
Default: Medium weight, Dark Olive Green text.
List columns that you want in a special format. List the column numbers, separated by commas as in '3,5,7'.
Default: Italics text.
List columns that you want center-aligned. List the column numbers, separated by commas as in '2,4,6'.
Content in these columns will be center-aligned instead of left-aligned.
Interactive column visibility
Enable sorting of columns by clicking on the column headers.

Row Settings

Style the first row as headers. Useful if it includes column names.
Default: White text on Dark Olive Green background.
Style the last row differently. Useful if it includes totals or column notes.
Default: Bold, Deep Marine Blue text on light blue background.
Mark specific rows as section headers to organize your data.
Default: Bold white text on Apple Green background.
Make section headers clickable to collapse/expand their sections.
List row numbers to mark as section headers, separated by commas.
Row 1 is always the first row of your table (whether it's a header or data).
Example: "2,5,8" makes the 2nd, 5th, and 8th rows section headers.

🎨 Color Customization ▼

Source Table

Type, paste or upload your original table in Markdown or CSV format and watch the magic happen in the "Generated HTML" section.

Accepts .md, .txt, .markdown files

✨ Generated HTML