CSV to HTML Table Converter
Table Preview
Your HTML table will appear here
Why Convert CSV to HTML Table?
Easy Data Presentation
HTML tables provide a clean, organized way to present tabular data on your website or application.
Responsive Design
Our converter creates tables that work beautifully on all devices from desktops to smartphones.
Clean Code
Get well-formatted, semantic HTML code that’s easy to integrate into any project.
Privacy Focused
All processing happens in your browser. Your data never leaves your device.
`;
// Store the HTML code
tableHtml = fullHtml;
// Display the code
htmlCode.textContent = fullHtml;
codeContainer.style.display = 'block';
// Enable download button
downloadBtn.disabled = false;
// Show success message
showSuccess(`Table generated successfully with ${rows.length} rows`);
}
function parseCsv(csv, stripQuotes, trimSpaces) {
const rows = [];
let currentRow = [];
let currentCell = '';
let inQuotes = false;
for (let i = 0; i < csv.length; i++) {
const char = csv[i];
if (char === '"') {
// Toggle quotes
inQuotes = !inQuotes;
// Add quote if we're inside quotes and next char is also quote
if (inQuotes && csv[i + 1] === '"') {
currentCell += '"';
i++; // Skip next quote
}
} else if (char === ',' && !inQuotes) {
// End of cell
if (trimSpaces) currentCell = currentCell.trim();
currentRow.push(currentCell);
currentCell = '';
} else if (char === '\n' && !inQuotes) {
// End of row
if (trimSpaces) currentCell = currentCell.trim();
currentRow.push(currentCell);
// Add row to rows
rows.push(currentRow);
// Reset for next row
currentRow = [];
currentCell = '';
} else {
currentCell += char;
}
}
// Add last cell and row
if (trimSpaces) currentCell = currentCell.trim();
currentRow.push(currentCell);
rows.push(currentRow);
// Strip quotes if needed
if (stripQuotes) {
return rows.map(row =>
row.map(cell =>
cell.replace(/^"|"$/g, '')
)
);
}
return rows;
}
function downloadHtml() {
const blob = new Blob([tableHtml], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'converted-table.html';
document.body.appendChild(a);
a.click();
// Clean up
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
}
function copyToClipboard() {
navigator.clipboard.writeText(tableHtml)
.then(() => {
// Show copied message
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = '
Copied!';
setTimeout(() => {
copyBtn.innerHTML = originalText;
}, 2000);
})
.catch(err => {
console.error('Failed to copy: ', err);
alert('Failed to copy to clipboard. Please try again.');
});
}
function resetAll() {
fileInput.value = '';
csvTextarea.value = '';
htmlTable.innerHTML = '';
previewPlaceholder.style.display = 'flex';
successStatus.style.display = 'none';
codeContainer.style.display = 'none';
downloadBtn.disabled = true;
hideError();
}
function showError(message) {
const errorStatus = document.createElement('div');
errorStatus.className = 'status status-error';
errorStatus.innerHTML = `
${message}`;
const actions = document.querySelector('.actions');
actions.parentNode.insertBefore(errorStatus, actions);
// Auto hide after 5 seconds
setTimeout(() => {
errorStatus.remove();
}, 5000);
}
function showSuccess(message) {
const successStatus = document.createElement('div');
successStatus.className = 'status status-success';
successStatus.innerHTML = `
${message}`;
const actions = document.querySelector('.actions');
actions.parentNode.insertBefore(successStatus, actions);
// Auto hide after 5 seconds
setTimeout(() => {
successStatus.remove();
}, 5000);
}
function hideError() {
const errors = document.querySelectorAll('.status-error');
errors.forEach(error => error.remove());
}
});
