HTML Table Generator

Add your normal text and instantly generate SEO-friendly HTML tables with CSS styling. Fully responsive, easy to customize, and ready for your website.

Image To Sticker Find Alternative Websites Share Files Online 3D Text Generator Merge Images Image To PDF Font Generator Image Converter

Text To HTML Table Generator

Data Separator
Add Serial Number (Optional):

Table Preview

Table preview will appear here

Table Styles

Default
Clean blue headers with striped rows
Striped
Dark headers with alternating rows
Clean
Minimal design with bottom borders
Modern
Gradient headers with hover effects
Elegant
Classic serif font with warm tones
Minimal
Simple and clean with subtle borders
Colorful
Warm gradient with colored rows
Dark
Dark theme with contrasting colors
Gradient
Blue gradient with hover effects
Premium
Luxury design with smooth animations
`; } function getStyleCSS(styleClass) { // Define CSS for each table style const styleCSS = { 'tbl-default': ` .tbl-default { border-collapse: collapse; width: 100%; min-width: 600px; background: white; } .tbl-default th, .tbl-default td { padding: 12px 15px; text-align: left; border: 1px solid #e2e8f0; } .tbl-default th { background: #4361ee; color: white; font-weight: 600; } .tbl-default tr:nth-child(even) td { background: #f8fafc; }`, 'tbl-striped': ` .tbl-striped { border-collapse: collapse; width: 100%; min-width: 600px; background: white; } .tbl-striped th, .tbl-striped td { padding: 12px 15px; text-align: left; border: 1px solid #e2e8f0; } .tbl-striped th { background: #1a1a2e; color: white; font-weight: 600; } .tbl-striped tr:nth-child(even) td { background: #f8f9fa; }`, 'tbl-clean': ` .tbl-clean { border-collapse: collapse; width: 100%; min-width: 600px; background: white; border: none; } .tbl-clean th, .tbl-clean td { padding: 12px 15px; text-align: left; } .tbl-clean th { background: white; color: #4361ee; border-bottom: 2px solid #4361ee; font-weight: 600; } .tbl-clean td { border-bottom: 1px solid #e2e8f0; }`, 'tbl-modern': ` .tbl-modern { border-collapse: collapse; width: 100%; min-width: 600px; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .tbl-modern th, .tbl-modern td { padding: 12px 15px; text-align: left; } .tbl-modern th { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600; border: none; } .tbl-modern td { border: none; border-bottom: 1px solid #f1f3f4; } .tbl-modern tr:hover td { background: #f8fafc; }`, 'tbl-elegant': ` .tbl-elegant { border-collapse: collapse; width: 100%; min-width: 600px; background: white; font-family: 'Georgia', serif; } .tbl-elegant th, .tbl-elegant td { padding: 12px 15px; text-align: left; } .tbl-elegant th { background: #2d3436; color: white; font-weight: 600; border: 1px solid #444; } .tbl-elegant td { border: 1px solid #e2e8f0; font-style: italic; } .tbl-elegant tr:nth-child(even) td { background: #fdf6f0; }`, 'tbl-minimal': ` .tbl-minimal { border-collapse: collapse; width: 100%; min-width: 600px; background: white; border: 1px solid #e2e8f0; } .tbl-minimal th, .tbl-minimal td { padding: 12px 15px; text-align: left; } .tbl-minimal th { background: #f8fafc; color: #1a1a2e; font-weight: 500; border: none; border-bottom: 2px solid #4361ee; } .tbl-minimal td { border: none; border-bottom: 1px solid #f1f3f4; }`, 'tbl-colorful': ` .tbl-colorful { border-collapse: collapse; width: 100%; min-width: 600px; background: white; } .tbl-colorful th, .tbl-colorful td { padding: 12px 15px; text-align: left; border: 1px solid #e2e8f0; } .tbl-colorful th { background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); color: white; font-weight: 600; border: none; } .tbl-colorful tr:nth-child(odd) td { background: #fff9f9; } .tbl-colorful tr:nth-child(even) td { background: #fffbf0; }`, 'tbl-dark': ` .tbl-dark { border-collapse: collapse; width: 100%; min-width: 600px; background: #2d3436; color: white; } .tbl-dark th, .tbl-dark td { padding: 12px 15px; text-align: left; border: 1px solid #444; } .tbl-dark th { background: #1a1a2e; color: white; font-weight: 600; } .tbl-dark td { color: white; } .tbl-dark tr:nth-child(even) td { background: #374151; }`, 'tbl-gradient': ` .tbl-gradient { border-collapse: collapse; width: 100%; min-width: 600px; background: white; } .tbl-gradient th, .tbl-gradient td { padding: 12px 15px; text-align: left; } .tbl-gradient th { background: linear-gradient(135deg, #4361ee 0%, #4cc9f0 100%); color: white; font-weight: 600; border: none; } .tbl-gradient td { border: none; border-bottom: 1px solid #f1f3f4; } .tbl-gradient tr:hover td { background: linear-gradient(135deg, #f8fafc 0%, #e9ecef 100%); }`, 'tbl-premium': ` .tbl-premium { border-collapse: collapse; width: 100%; min-width: 600px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .tbl-premium th, .tbl-premium td { padding: 16px 20px; text-align: left; } .tbl-premium th { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: white; font-weight: 600; border: none; } .tbl-premium td { border: none; border-bottom: 1px solid #f1f3f4; } .tbl-premium tr:last-child td { border-bottom: none; } .tbl-premium tr:hover td { background: #f8fafc; transform: scale(1.02); transition: all 0.2s ease; }` }; return styleCSS[styleClass] || styleCSS['tbl-default']; }

Image Tools

Text Tools

Calculators

Developer Tools

Image Converter


ADVERTISEMENT