HTML Table Generator

A student with a web assignment due that afternoon opens this table generator, creates a 5-by-6 table, adds course names, and copies the HTML directly into their webpage. That’s the everyday use case for our HTML Table Generator—no need to memorize tags or hand-code . Build your table on a visual canvas much like a spreadsheet, and get clean, standards-compliant HTML code instantly on the right.

Common use cases

This tool is for anyone who wants to display information in a table without writing HTML by hand. It is especially useful in these situations:

• Students and personal websites: Create class schedules, club event calendars, or portfolio comparison tables, then copy the code straight into your blog or assignment page.
• Content creators: Articles often need comparison tables, such as phone specs or pros-and-cons comparisons. Generate the table code here and paste it into your CMS HTML editor for more accurate formatting than doing it manually.
• Office teams and reports: Turn spreadsheet data into web-based reports when your company CMS cannot upload Excel files. Rebuild the table here, embed the generated code, and customize borders and background colors for a more polished report.

How to use this tool

When you open the HTML Table Generator, you’ll see the canvas on the left and a code preview on the right. The workflow follows four simple steps: size, content, styling, and code.

1. Set the table size: Enter the number of rows and columns in the toolbar—for example, 5 rows and 6 columns—then click “Generate Table” to create a blank table on the canvas.
2. Add content: Double-click any cell to enter text, such as “Monday” or “Math.” Use the arrow keys or Tab to move quickly between cells.
3. Adjust structure and styling: Select one or more cells, then click “Merge Cells” to turn them into a larger heading cell. Use “Border Width,” “Border Color,” and “Background Color” to style the table. Changes appear in the code preview instantly.
4. Copy the code: The panel on the right automatically generates complete HTML table code. Click “Copy Code,” then paste it into your webpage file, blog editor, or CMS HTML editor.

If you change the row or column count by mistake, use “Undo” in the toolbar. “Clear Table” resets everything in one click.

A complete example

Let’s create one of the most common examples: a weekly class schedule for a personal webpage. Assume the schedule has 5 rows and 6 columns, with weekday headings in the first row and time slots in the first column.

Steps:

1. Enter “5” in the “Rows” field and “6” in the “Columns” field, then click “Generate Table.”
2. Double-click the first cell in the first row and enter “Time / Day.” Enter “Monday” in the second cell, “Tuesday” in the third, and continue through “Friday.”
3. In the first column, enter “8:00–9:30” in row two, “10:00–11:30” in row three, “14:00–15:30” in row four, and “16:00–17:30” in row five.
4. Enter class names in the relevant cells, such as “Calculus,” “English,” and “Physical Education.”
5. To emphasize the heading row, select all cells in the first row and choose “Merge Entire Row” from the dropdown next to “Merge Cells.” The row becomes one large header. Then set its background color to light blue (#e6f2ff) in the toolbar.
6. Select the entire table, set the border width to “1px,” and set the border color to “#333” to create clear grid lines.
7. The code preview on the right will now show an HTML snippet similar to this:

  ...(subsequent rows follow the same pattern)

  

    
Time / Day
  
  

    
8:00-9:30
    
Calculus
    
English
    
Physical Education
    
Computer Fundamentals
    
Study Hall
  

Click “Copy Code,” then paste the snippet directly into your HTML file. Open it in a browser to see a class schedule with a colored header row.

Understanding the generated code

The HTML in the code preview follows web standards and displays in all modern browsers. Check these key details to confirm your table looks as intended:

• border attribute: If the code includes border="1" or style="border:1px solid ...", the table will have borders. If it does not, make sure you set a border width in the toolbar.
• colspan/rowspan: Merged cells create colspan="number" or rowspan="number" attributes. Larger numbers mean more merged columns or rows. If merged cells are misaligned, you likely selected the wrong range—return to the canvas and merge the cells again.
• inline styles: Generated code uses inline styles (the style attribute) for colors, borders, and similar formatting. This preserves the look when pasted into most webpages. If you prefer centralized styling, you can move those rules into a CSS file manually.

Common mistakes

• Forgetting to add borders: Newly generated tables may have no borders by default. When pasted into a webpage, they can look unstructured. Set the border width to at least 1px in the toolbar.
• Selecting the wrong range when merging cells: You must select adjacent cells to merge them. If the selected cells do not form one continuous rectangle, the merge button will be unavailable. Drag from the top-left to the bottom-right to create a rectangular selection.
• Editing the code preview directly: The code preview is read-only. Any manual edits there will be overwritten the next time you edit the canvas. Adjust the canvas first, copy the code, then make further edits in an external editor if needed.
• Treating the table as a complete webpage: The generated code is only a <table> snippet. It does not include <html> or <body> tags. Paste it inside the <body> of an existing HTML page so the browser can render it.

Notes

• The generated HTML works in major browsers, including Chrome, Firefox, Edge, and Safari. Very old browsers, such as IE 8 and earlier, may interpret some CSS properties differently, so preview your table in the browser you plan to support.
• Tables use percentage-based widths by default, such as width:100%, so they adapt to the width of their parent container. If you set a fixed pixel width, the table may overflow on narrower pages and require manual adjustment.
• Row height and column width currently expand automatically based on content; manual column resizing is not supported yet. For precise pixel widths, add a width attribute to <td> or <th> after copying the code.
• This tool does not save any data. Everything runs locally in your browser, and your table will be lost when you close the page. Be sure to copy your code before leaving.

FAQ

Q: How do I add or remove rows and columns?
Change the values in the “Rows” and “Columns” fields, then click “Generate Table.” This creates a new table, so existing content will be lost. To keep any content, copy the code first and paste the data into the new table afterward.

Q: How do I split a merged cell?
Select the merged cell and click “Split Cells,” if the toolbar includes that option. If it does not, clear and regenerate the table, or copy the code and manually remove the colspan/rowspan attributes.

Q: Can I use the generated code in Word?
Word can paste HTML-formatted content, but some styling may be lost. Generate the table code, paste it into a webpage to review it, then take a screenshot or export it as a PDF for your Word document. You can also copy a screenshot of the table from the canvas.

Q: Will the table look distorted on mobile?
The table defaults to 100% width and scales with the screen, but tables with many columns or long content may require horizontal scrolling on small screens. You can wrap the table in a container with overflow-x:auto; this wrapper is not included automatically.

Try the table generator above now: create the rows and columns you need, enter your data, and copy the code in one click to add a polished table to any webpage.

Methodology / References

• W3C HTML 5.3 Specification: Table Elements — The standard definition of HTML tables, including the semantics and usage of table, tr, td, th, colspan, rowspan, and related elements.
• MDN Web Docs: <table> element — Mozilla’s documentation for the HTML table element, with detailed attribute guidance and examples.

Last updated July 14, 2026 · Maintained by Toolkk