Visual Table Designer

Visual Table Designer is a powerful, intuitive drag-and-drop tool that helps you generate HTML tables directly inside your Visual Studio Code editor. Skip the manual coding and instantly design complex tables formatted for Tailwind CSS, Bootstrap, or raw Inline CSS.

🚀 Key Features

• Visual Drag-and-Drop Editor: Intuitively resize rows/columns, merge, and split cells exactly like a spreadsheet.
• Multiple Framework Support: Export clean HTML code tailored for Tailwind CSS, Bootstrap, or standard CSS classes.
• Advanced Styling Options: Easily change background colors, text alignment, borders, and rounded corners without touching CSS.
• Find and Replace Capabilities: Quickly search and replace text across your entire table layout.
• Export & Copy: View the generated HTML instantly in an export modal and copy the snippet with one click to paste straight into your project.

🖼️ Feature Showcase

🛠️ How to Use

1. Open the VS Code Command Palette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS).
2. Type and select Visual Table Designer: Open Designer.
3. A Webview tab will launch presenting the visual interface.
4. Design your table to fit your content.
5. Click the Export button, select your styling framework, and copy the code.

🐞 Known Issues & Feedback

Found a bug or have a feature request? Please feel free to open an issue on our GitHub Repository.

Enjoy crafting perfect HTML tables faster than ever!