We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
Was this tool helpful to use?
Your feedback helps us make it better
Create HTML table code visually with drag-and-drop. Merge cells, customize styles, and copy the code in one click.
Supports the {row} and {col} placeholders.
Supports 1 to 20 rows/columns. Out-of-range values are corrected automatically.
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
|---|---|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 | Row 1 Cell 4 | Row 1 Cell 5 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 | Row 2 Cell 4 | Row 2 Cell 5 |
| Row 3 Cell 1 | Row 3 Cell 2 | Row 3 Cell 3 | Row 3 Cell 4 | Row 3 Cell 5 |
| Row 4 Cell 1 | Row 4 Cell 2 | Row 4 Cell 3 | Row 4 Cell 4 | Row 4 Cell 5 |
| Row 5 Cell 1 | Row 5 Cell 2 | Row 5 Cell 3 | Row 5 Cell 4 | Row 5 Cell 5 |
| Row 6 Cell 1 | Row 6 Cell 2 | Row 6 Cell 3 | Row 6 Cell 4 | Row 6 Cell 5 |
Overview
Understand what the tool solves, how it works, and the boundaries of its data.
Use the controls to choose rows and columns, a visual theme, column headings, and placeholder text. The preview and HTML output update from those settings. Dimensions run from 1 to 20 in either direction. Optional controls include a header row, hover highlighting, sample cell content, semantic thead/tbody grouping, and compact output. This creates a table fragment for you to copy into a page; it is not a complete web page or a cell-by-cell spreadsheet editor.
HTML tables represent information arranged in rows and columns. Header cells communicate what a row or column represents, so use headings that describe the data rather than leaving generic labels in a published table. The output’s appearance may change when the destination page’s CSS is applied. The W3C explains table structure and header relationships in its tutorial.
Guide
Follow the workflow and verify inputs and outputs with practical examples.
Set the row and column counts from 1 to 20. Values outside the supported range are corrected automatically.
Choose a theme and enter the column headings. You can separate headings with commas or place them on separate lines; align the number and order of headings with the columns.
Choose whether to include a header, sample cell text, hover highlighting, semantic table sections, and compact code. Placeholders can use {row} and {col} to label cells by position.
Inspect the preview and generated code, then copy the HTML snippet. Replace sample text and adjust styles in the destination page as needed.
For example, a three-column schedule might use “Name, Shift, Date” as headings and placeholders while checking the preview. Copy the resulting fragment, then replace the placeholders with actual entries in your project.
Use cases
See how the tool fits into real work and everyday tasks.
Create a small table structure for a technical guide, then add the actual values and explanatory text before publishing.
Set headings for fields such as subject, time, and room, preview the shape, and complete the table in the destination page.
Compare a few row and column counts or themes to establish a starting point, then test the copied fragment with the site’s real styles.
Q&A
Find concise answers to common questions and confusing cases.
No. The preview is driven by the dimensions, heading text, and placeholder template. Copy the code and add or edit specific data cells in your editor.
No. It is a table snippet to place inside a suitable page. Add the surrounding document structure and any page-specific styles yourself.
The available controls configure dimensions, headings, placeholders, theme, and display options. They do not provide cell merging or drag-and-drop editing.
That is not guaranteed. Wide tables or long cell text may need responsive styling or a horizontal-scroll container in the destination layout; preview at the screen widths you support.
Notes
Review scope, result limitations, and important precautions before use.
Tables are intended for data with meaningful row and column relationships, not general page layout. Check that headings accurately describe their cells and that the structure makes sense when read without visual styling. The generated snippet does not automatically add all context a complex table may need, such as a clear caption or carefully associated multi-level headers. Also test contrast, narrow-screen layout, and keyboard or assistive-technology access in the actual page where the table will appear.
Related
Discover related tools, collections, and available API capabilities.