toolbox/html-table.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free HTML Table Generator — Build Tables Visually</title>
  <meta name="description" content="Create HTML tables visually. Set columns, rows, headers, and styling. Generate clean HTML and CSS code. Free online HTML table generator.">
  <link rel="canonical" href="https://www.quicktools.mom/html-table.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/html-table.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is HTML Table Generator free to use?","acceptedAnswer":{"@type":"Answer","text":"Yes! HTML Table Generator is completely free with no signup required. It runs entirely in your browser — your data never leaves your device."}},{"@type":"Question","name":"How do I use HTML Table Generator?","acceptedAnswer":{"@type":"Answer","text":"Simply enter your values in the input fields above and the results update instantly. No button clicks needed — everything calculates in real-time."}},{"@type":"Question","name":"Is my data safe with HTML Table Generator?","acceptedAnswer":{"@type":"Answer","text":"Absolutely. HTML Table Generator runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
    <div class="tool-header"><div class="tool-badge">💻 Developer</div><h1>HTML Table Generator</h1><p>Create HTML tables visually. Edit cells, add rows/columns, generate code.</p></div>
    <div class="tool-card">
      <div class="controls-row">
        <div class="control-group"><label>Columns</label><input type="number" id="cols" value="4" min="1" max="12" onchange="rebuild()"></div>
        <div class="control-group"><label>Rows</label><input type="number" id="rows" value="4" min="1" max="20" onchange="rebuild()"></div>
        <div class="control-group"><label>Header</label><select id="header" onchange="rebuild()"><option value="1">Yes</option><option value="0">No</option></select></div>
        <div class="control-group"><label>Striped</label><select id="striped" onchange="generate()"><option value="1">Yes</option><option value="0">No</option></select></div>
        <div class="control-group"><label>Border</label><select id="border" onchange="generate()"><option value="1">Yes</option><option value="0">No</option></select></div>
      </div>
      <div class="btn-group mt-1">
        <button class="btn btn-secondary" onclick="addRow()" style="font-size:0.75rem;">+ Row</button>
        <button class="btn btn-secondary" onclick="addCol()" style="font-size:0.75rem;">+ Column</button>
        <button class="btn btn-secondary" onclick="fillSample()" style="font-size:0.75rem;">📋 Sample Data</button>
      </div>
    </div>
    <div class="tool-card">
      <h3 style="font-size:0.95rem;margin-bottom:1rem;">✏️ Edit Table</h3>
      <div id="editor" style="overflow-x:auto;"></div>
    </div>
    <div class="tool-card">
      <h3 style="font-size:0.95rem;margin-bottom:1rem;">👁️ Preview</h3>
      <div id="preview" style="overflow-x:auto;"></div>
    </div>
    <div class="tool-card">
      <div class="output-area" style="margin-top:0;">
        <span class="output-label">HTML Code</span>
        <pre id="output" class="mono" style="font-size:0.8rem;line-height:1.5;max-height:400px;overflow-y:auto;"></pre>
        <button class="copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('output').textContent).then(()=>{const b=document.querySelector('.copy-btn');b.textContent='Copied!';b.classList.add('copied');setTimeout(()=>{b.textContent='Copy';b.classList.remove('copied')},2000)})">Copy</button>
      </div>
    </div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="markdown-table.html"><span class="tool-icon">📝</span> Markdown Table</a><a href="csv-json.html"><span class="tool-icon">📊</span> CSV ↔ JSON</a><a href="json-to-csv.html"><span class="tool-icon">📈</span> JSON to CSV</a><a href="html-entities.html"><span class="tool-icon">🌐</span> HTML Entities</a></div></div>

        <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About HTML Table Generator</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">HTML Table Generator is a free, browser-based tool designed for developers, content creators, and marketers. Create HTML tables visually. Set columns, rows, headers, and styling. Generate clean HTML and CSS code. Free online HTML table generator. Everything runs locally in your browser using JavaScript — no data is ever sent to a server, making it completely private and secure. The tool is designed to be intuitive and beginner-friendly while still offering advanced features for power users. It loads instantly with no installation required and works offline once loaded. Use it as often as you need — there are no daily limits, no watermarks, and no hidden fees.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li>Enter or paste your data in the input area above.</li>
        <li>Adjust settings and options to match your needs.</li>
        <li>View the results instantly — they update in real-time.</li>
        <li>Copy, download, or share your output with one click.</li>
      </ol>
    </div>
    <div class="tool-card faq-section">
      <h2 style="font-size:1.1rem;margin-bottom:1rem;">❓ Frequently Asked Questions</h2>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is HTML Table Generator free to use?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Yes! HTML Table Generator is completely free with no signup required. It runs entirely in your browser — your data never leaves your device.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">How do I use HTML Table Generator?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Simply enter your values in the input fields above and the results update instantly. No button clicks needed — everything calculates in real-time.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is my data safe with HTML Table Generator?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Absolutely. HTML Table Generator runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed.</p></details>
    </div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    let tableData=[];
    function rebuild(){
      const cols=+document.getElementById('cols').value,rows=+document.getElementById('rows').value;
      const hasHeader=document.getElementById('header').value==='1';
      tableData=[];
      if(hasHeader)tableData.push(Array.from({length:cols},(_, i)=>'Header '+(i+1)));
      for(let r=0;r<rows;r++)tableData.push(Array.from({length:cols},(_, i)=>''));
      renderEditor();generate();
    }
    function addRow(){const cols=tableData[0]?.length||+document.getElementById('cols').value;tableData.push(Array(cols).fill(''));renderEditor();generate();}
    function addCol(){tableData.forEach(r=>r.push(''));document.getElementById('cols').value=tableData[0].length;renderEditor();generate();}
    function fillSample(){
      const samples=[['Name','Role','Email','Status'],['Alice Johnson','Engineer','alice@company.com','Active'],['Bob Smith','Designer','bob@company.com','Active'],['Carol White','Manager','carol@company.com','On Leave'],['Dave Brown','Developer','dave@company.com','Active']];
      document.getElementById('cols').value=4;document.getElementById('rows').value=4;document.getElementById('header').value='1';
      tableData=samples;renderEditor();generate();
    }
    function renderEditor(){
      let html='<table style="width:100%;border-collapse:collapse;">';
      tableData.forEach((row,ri)=>{
        html+='<tr>';
        row.forEach((cell,ci)=>{
          html+=`<td style="padding:2px;"><input type="text" value="${cell.replace(/"/g,'&quot;')}" oninput="tableData[${ri}][${ci}]=this.value;generate()" style="width:100%;font-size:0.82rem;padding:0.3rem;${ri===0&&document.getElementById('header').value==='1'?'font-weight:600;':''}"></td>`;
        });
        html+='</tr>';
      });
      html+='</table>';
      document.getElementById('editor').innerHTML=html;
    }
    function generate(){
      const hasHeader=document.getElementById('header').value==='1';
      const striped=document.getElementById('striped').value==='1';
      const border=document.getElementById('border').value==='1';
      let htmlCode='<table style="width:100%;border-collapse:collapse;'+(border?'border:1px solid #ddd;':'')+'">\n';
      tableData.forEach((row,ri)=>{
        const isHeader=hasHeader&&ri===0;
        const tag=isHeader?'th':'td';
        const wrap=isHeader?'  <thead>\n':'';const wrapEnd=isHeader?'  </thead>\n':'';
        if(ri===1&&hasHeader)htmlCode+='  <tbody>\n';
        if(ri===0&&isHeader)htmlCode+=wrap;
        const bgStyle=striped&&!isHeader&&ri%2===0?' background:#f9f9f9;':'';
        htmlCode+='    <tr'+(bgStyle?` style="${bgStyle.trim()}"`:'')+'>'+row.map(c=>`<${tag} style="padding:8px;text-align:left;${border?'border:1px solid #ddd;':''}${isHeader?'background:#f4f4f4;font-weight:600;':''}">${c||'&nbsp;'}</${tag}>`).join('')+'</tr>\n';
        if(ri===0&&isHeader)htmlCode+=wrapEnd;
      });
      if(hasHeader)htmlCode+='  </tbody>\n';
      htmlCode+='</table>';
      document.getElementById('output').textContent=htmlCode;
      // Render preview
      document.getElementById('preview').innerHTML=htmlCode;
    }
    fillSample();
  </script>
<script src="ads.js"></script>
</body>
</html>