← Back to Tools

HTML Table Generator

Create, style, and export tables with live preview

⚙️ Controls
🎨 Cell Styling
#e0e0e0
#1a1a1a
📊 Table Settings
🎭 Style Presets
📥 Import CSV

Click to upload CSV or drag & drop

`; const blob = new Blob([content], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'table.html'; a.click(); URL.revokeObjectURL(url); this.showToast('HTML file downloaded!'); }, applyPreset(preset) { switch(preset) { case 'minimal': document.getElementById('borderStyle').value = 'none'; this.striped = false; this.hover = false; document.getElementById('stripedBtn').classList.remove('active'); document.getElementById('hoverBtn').classList.remove('active'); break; case 'bordered': document.getElementById('borderStyle').value = 'solid'; this.striped = false; this.hover = false; document.getElementById('stripedBtn').classList.remove('active'); document.getElementById('hoverBtn').classList.remove('active'); break; case 'striped': document.getElementById('borderStyle').value = 'solid'; this.striped = true; this.hover = true; document.getElementById('stripedBtn').classList.add('active'); document.getElementById('hoverBtn').classList.add('active'); break; case 'dark': document.getElementById('borderStyle').value = 'solid'; this.striped = false; this.hover = true; document.getElementById('stripedBtn').classList.remove('active'); document.getElementById('hoverBtn').classList.add('active'); break; case 'colorful': document.getElementById('borderStyle').value = 'solid'; this.striped = true; this.hover = true; document.getElementById('stripedBtn').classList.add('active'); document.getElementById('hoverBtn').classList.add('active'); break; } this.updateTableSettings(); this.render(); this.showToast(`${preset.charAt(0).toUpperCase() + preset.slice(1)} preset applied!`); }, handleCSVUpload(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (e) => { const csv = e.target.result; const rows = csv.trim().split('\n').map(row => row.split(',').map(cell => cell.trim().replace(/^"|"$/g, '')) ); this.rowCount = rows.length; this.colCount = rows[0] ? rows[0].length : 4; this.grid = rows; document.getElementById('rowCount').value = this.rowCount; document.getElementById('colCount').value = this.colCount; this.render(); this.showToast('CSV imported successfully!'); }; reader.readAsText(file); // Reset input event.target.value = ''; }, setupDragDrop() { document.addEventListener('dragover', (e) => { e.preventDefault(); document.querySelector('.import-area').classList.add('dragover'); }); document.addEventListener('dragleave', (e) => { if (e.target.classList.contains('import-area')) { document.querySelector('.import-area').classList.remove('dragover'); } }); document.addEventListener('drop', (e) => { e.preventDefault(); document.querySelector('.import-area').classList.remove('dragover'); const files = e.dataTransfer.files; if (files.length > 0 && files[0].type === 'text/csv') { this.handleCSVUpload({ target: { files } }); } }); }, showToast(message, isError = false) { const toast = document.createElement('div'); toast.className = `toast ${isError ? 'error' : ''}`; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { toast.remove(); }, 3000); }, escapeHtml(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, m => map[m]); } }; // Initialize on load document.addEventListener('DOMContentLoaded', () => { app.init(); });