Visual HTML Table Editor with Cell Merge and Drag-Drop Reorder

TLDR

Hand-coding HTML tables to merge cells or reorder columns requires constantly calculating colspan and rowspan attributes while cutting and pasting <td> elements across hundreds of lines of code. GINEXYS Table Formatter (TAFNE) Table Mode provides a spreadsheet canvas where you select cells to merge, drag-and-drop columns (Alt+D), apply custom CSS utility classes, and export clean HTML or Markdown.

The Search Query: Visual HTML Table Editor with Cell Merge

Web developers search for:

• "visual html table editor cell merge colspan rowspan"
• "drag drop column reorder html table generator online"
• "online html table editor preserve css classes"

Auto-Calculating Colspan and Rowspan on Cell Merge

When you select multiple cells and press Merge, TAFNE calculates span values and updates the underlying cell store:

// Cell merge logic in core TableEditor.js
function mergeSelectedCells(selectionRange) {
    const { startRow, startCol, endRow, endCol } = selectionRange;
    const colSpan = endCol - startCol + 1;
    const rowSpan = endRow - startRow + 1;
// Set origin cell attributes     cellStore.setCell(startRow, startCol, { colSpan, rowSpan });          // Prune covered internal cells     cellStore.markCellsCovered(startRow, startCol, colSpan, rowSpan);     renderTableDOM(); }

Rule of thumb: use a visual cell store model that auto-calculates colspan and rowspan parameters to avoid broken HTML table rendering.

Drag-and-Drop Column Reordering with Alt+D Shortcut

Press Alt+D to toggle Drag Mode on. Grab any column header handle to shift that column across all table rows instantly:

// Column reorder shortcut toggle in dragDrop.js
window.addEventListener('keydown', (e) => {
    if (e.altKey && e.key.toLowerCase() === 'd') {
        _toggleDragMode(); // Enables column header drag handles
        showToast('Drag mode toggled. Drag headers to reorder columns.', 'info');
    }
});

Exporting Clean Semantic HTML and CSS Classes

Applying CSS utility classes (like freeze-pane, highlighted, accordion-header) tags the cell store. Exporting outputs production-ready HTML markup:

<!-- Clean HTML export generated by Table Formatter -->
<table class="tafne-table">
  <thead>
    <tr class="freeze-pane">
      <th colspan="2" class="highlighted">Feature Comparison</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic Tier</td>
      <td>$10/mo</td>
      <td>Available</td>
    </tr>
  </tbody>
</table>

Conclusion

Visual cell merging and drag-and-drop column reordering eliminate manual HTML markup editing and guarantee zero broken table tags.