Contact Us

Getting Started

`; outputs.code.value = formatHTML(fullHTML); } // Extract CSS from preview function extractCSSFromPreview() { const styleElement = outputs.preview.querySelector('style'); return styleElement ? styleElement.textContent : ''; } // Extract table from preview function extractTableFromPreview() { const tableElement = outputs.preview.querySelector('table'); return tableElement ? tableElement.outerHTML : ''; } // Update preview from code editor function updatePreviewFromCode() { if (isUpdatingPreview) return; try { const parser = new DOMParser(); const doc = parser.parseFromString(outputs.code.value, 'text/html'); // Extract table and styles const styleElement = doc.querySelector('style'); const tableElement = doc.querySelector('table'); if (styleElement && tableElement) { isUpdatingCode = true; outputs.preview.innerHTML = ''; outputs.preview.appendChild(styleElement.cloneNode(true)); outputs.preview.appendChild(tableElement.cloneNode(true)); isUpdatingCode = false; } } catch (e) { console.error("Error parsing HTML:", e); } } // Format HTML for better readability function formatHTML(html) { const tab = ' '; let result = ''; let indent = ''; html.split(/>\s*).forEach(element => { if (element.match(/^\/\w/)) { indent = indent.substring(tab.length); } result += indent + '<' + element + '>\r\n'; if (element.match(/^\w[^>]*[^\/]$/) && !element.startsWith('!--')) { indent += tab; } }); return result.substring(1, result.length - 3); } // Copy code to clipboard function copyCode() { outputs.code.select(); document.execCommand('copy'); // Show notification outputs.notification.classList.add('show-notification'); setTimeout(() => { outputs.notification.classList.remove('show-notification'); }, 2000); } // Download HTML file function downloadHTML() { const blob = new Blob([outputs.code.value], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'table.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // Reset all inputs function resetForm() { inputs.columns.value = 4; inputs.rows.value = 5; inputs.cssMethod.value = 'class'; inputs.cssName.value = 'custom-table'; inputs.textAlign.value = 'center'; inputs.padding.value = 8; inputs.width.value = '100%'; inputs.height.value = ''; inputs.headerBgColor.value = '#4CAF50'; inputs.bodyBgColor.value = '#f9f9f9'; inputs.headerTextColor.value = '#ffffff'; inputs.bodyTextColor.value = '#333333'; inputs.borderCollapse.value = 'collapse'; inputs.borderSpacing.value = 2; inputs.borderWidth.value = 1; inputs.borderStyle.value = 'solid'; inputs.borderColor.value = '#dddddd'; updateCssNameLabel(); generateTable(); } // Event Listeners inputs.cssMethod.addEventListener('change', updateCssNameLabel); // Live update on any input change document.querySelectorAll('.live-update').forEach(element => { element.addEventListener('input', generateTable); element.addEventListener('change', generateTable); }); // Two-way binding between preview and code editor outputs.preview.addEventListener('input', () => { if (!isUpdatingPreview) { generateFullHTML(); } }); outputs.code.addEventListener('input', () => { if (!isUpdatingCode) { updatePreviewFromCode(); } }); buttons.reset.addEventListener('click', resetForm); buttons.copy.addEventListener('click', copyCode); buttons.download.addEventListener('click', downloadHTML); // Initialize updateCssNameLabel(); generateTable(); });

Unlock Fast, Scalable, and Personalized Web Experiences With Us.

Information

• Home
• Pricing
• Blog
• Privacy Policy

Services

• WordPress
• Shopify

Contact Us

Close GDPR Cookie Settings

• Privacy Overview
• Strictly Necessary Cookies

Powered by  GDPR Cookie Compliance

Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookies

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

Enable or Disable Cookies Enabled Disabled

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Enable All Save Changes