How I Built a One‑Click HTML Table Generator for Complex Forms

1. The boss’s one‑line demand that took half a day

The boss asked, "Can the frontend finish the interview personnel registration form in half a day?" I thought it was just a simple table, but the requirement included merged cells, centering, and alignment.

“We have many interviewees, we need an ‘interview personnel registration form’ in the OA system. Can the frontend finish it in half a day?”

After ten minutes a screenshot showed a table with cross‑row, cross‑column, centered, aligned, merged cells – everything needed.

2. Three layout attempts and their pain points

Option 1: div + flex – nested hell

Using div + flex gave high flexibility, but after three levels of nesting I couldn’t tell which div was which. CSS became messy, and I had to guess margin and padding. Ten minutes later I deleted all the code.

Conclusion: flex is not a silver bullet for complex structures.

Option 2: CSS Grid – overwhelming

Grid seemed suitable for two‑dimensional layout, so I tried grid-template-areas, grid-row, grid-column. After half an hour the first row still wasn’t aligned; the syntax made my brain freeze.

Conclusion: grid is powerful but hard to master.

Option 3: table element – back to basics

Using <table>, <tr>, <td> with rowspan and colspan perfectly matched the requirement.

After an afternoon of coding I finished the form. The boss then asked for another “personnel conversion application form”, making me realize this was a class of needs, not a single request.

Conclusion: the need is recurring, not isolated.

3. Searching for existing tools

Exporting HTML from Excel or Word produced bloated markup with inline styles, unusable for our purpose. Online table generators were either paid or lacked support for merged cells.

Conclusion: no ready‑made tool, so I built my own.

4. Building the wheel: zyTableGenerator

I created a small utility named zyTableGenerator to avoid repetitive table coding.

Core features

Supports rowspan and colspan Double‑click to edit cell content

Context menu for merging, column/row spanning, and font styling

Automatic conflict detection to avoid overlapping merges

One‑click export of clean HTML code and download

Design goal

“Let the frontend write one less td, let the admin draw one less form.”

5. Technical highlights

1. Data structure: string tags

Each cell stores a prefixed string, for example:

"rowspan-2|Name"

"colspan-3|Subject"

"cr-2-3|Total"

"style-base64|Text"

Prefixes indicate rowspan, colspan, cell‑range, or Base64‑encoded style objects.

2. Merge conflict detection – rectangle intersection algorithm

function clearOverlappingSpans(startX, startY, r, c) {
  const endX = startX + c;
  const endY = startY + r;
  for (/* iterate all cells */) {
    if (startX < cellEndX && endX > x && startY < cellEndY && endY > y) {
      clearCellSpan(y, x); // clear conflict
    }
  }
}

3. Style persistence – Base64 encoding

const styleObj = {
  font: 'Microsoft YaHei',
  size: 14,
  color: '#333',
  bold: true,
  textAlign: 'center'
};
const encoded = btoa(JSON.stringify(styleObj));
// stored as `style-${encoded}|text`

4. HTML export

The generator iterates the temporary render data, parses the tags, and outputs standard HTML such as:

<table border="1" cellspacing="0" cellpadding="5" style="border-collapse: collapse;">
  <tr>
    <td rowspan="2" style="font-weight:bold;">Name</td>
    <td>Chinese</td>
  </tr>
  <tr>
    <td>Math</td>
  </tr>
</table>

The tool provides a one‑click download of the generated .html file.

6. Use cases

System backend: contracts, invoices, logistics, approval forms

Administrative work: registration, application, summary tables

Education: timetables, report cards

Low‑code platforms: table component configuration

7. Conclusion

The tool originated from a painful need, showing that a truly good tool solves real problems rather than merely showcasing fancy techniques.

Open source

GitHub: https://github.com/zy1992829/zytableGenerator

Live demo: https://zy1992829.github.io/zytableGenerator/