Use case · Table Formatter

Visual HTML Table Editing and Cell Spanning for Web Developers

How frontend engineers and web content managers edit complex pricing grids, merge multi-cell headers with auto-calculated colspan/rowspan, and export clean HTML.

Open Table Formatter Add to VS Code

Free · runs in your browser · your files are never uploaded

TLDR

Editing HTML table markup by hand (<table>, <tr>, <td>) to merge cells or reorder columns is frustrating and error-prone. A single missing colspan or misplaced <td> breaks page layout completely. GINEXYS Table Formatter (Table IDE) Table Mode provides a visual spreadsheet canvas where you merge cells with auto-calculated colspan and rowspan, reorder columns with drag-and-drop (Alt+D), apply CSS classes, and export clean HTML or Markdown.

The Persona & The Pain Point

You manage documentation portals, marketing landing pages, SaaS pricing tables, or CMS content across web applications.

You frequently build feature comparison matrices and tiered pricing tables. Hand-coding HTML colspan and rowspan attributes requires constant mental math to delete the corresponding trailing <td> tags in each row. If you miss one <td>, every subsequent column shifts to the right, creating broken layouts. Furthermore, reordering columns in raw HTML requires modifying every single row individually across hundreds of lines of markup code.

The Workflow in Practice

Load Raw Table or Spreadsheet: Open Table Formatter in Table Mode and paste raw tabular data, CSV text, or existing HTML markup onto the grid.
Visually Merge Header Cells: Drag your cursor across adjacent cells (e.g. Columns A, B, and C in Row 1) and click Merge Cells (or press M). The grid unites them into a single cell, automatically computing colspan="3".
Reorder Columns with Alt+D Drag Mode: Press Alt+D to toggle Drag Mode, grab a column header, and drag it to a new location. The entire column shifts across every row in the dataset instantly.
Apply CSS Utility Classes: Select cells and pick utility tags from the Class Palette (like freeze-pane, highlighted, text-center, or badge).
Export Production-Ready HTML: Click Export > HTML Table to download clean, validated <table><thead><tbody> markup with zero broken tags.

Key Benefits for Web Developers

Operation	Manual HTML Coding	GINEXYS Table Formatter Table Mode
Cell Merging	Hand-calculate `colspan="3"` and delete extra `<td>` tags	Highlight cells and click Merge; spans auto-compute
Column Reordering	Cut & paste `<td>` across every `<tr>` row	Drag-and-drop column headers across all rows (`Alt+D`)
CSS Utility Classes	Hand-code inline styles or classes per cell	Apply visual utility tags from the Class Palette
Markup Cleanliness	Prone to unclosed tags and column offset bugs	Valid, semantic HTML with clean table structures

Real-World Example & Output

Designing a 3-tier SaaS pricing comparison matrix:

<!-- Clean, semantic HTML generated by Table Formatter -->
<table class="tafne-table">
  <thead>
    <tr class="freeze-pane">
      <th>Plan Tier</th>
      <th colspan="2" class="highlighted">Included Features</th>
      <th>Monthly Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Starter</td>
      <td>5 Projects</td>
      <td>Community Support</td>
      <td>$0 / mo</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>Unlimited Projects</td>
      <td>Priority Support</td>
      <td>$29 / mo</td>
    </tr>
  </tbody>
</table>

Ready to try it?

Table Formatter — Clean, reshape, and convert tabular data between HTML, CSV, TSV, SQL, and Markdown.

Open Table Formatter Add to VS Code Source