ORANGEBOT.AI

HTML Table Generator

Build an HTML table with CSS styling and copy the code. Choose the number of rows and columns, type your data straight into the grid, tick the style properties you want — sizes, colors, borders, alignment, padding and caption placement — and the generator emits clean HTML with a ready-to-paste CSS block.

Properties
Styles (check to enable)

Table data — click a cell to edit

Editable table data; the first row holds header cells

HTML Table Generator builds HTML + CSS table code: set rows, columns and caption, click cells to enter data, tick any style property (widths, colors, borders, alignment, padding, caption) and press Generate Table. Everything runs in this browser tab — nothing is uploaded to a server.

How to use it

  1. Set Rows (1–50) and Columns (1–12), and edit the Caption text — clear it for a table without a caption.
  2. Click any cell in the data grid to enter table data; the first row holds the header cells.
  3. Tick a style property to enable it, then set its value: table / column / row sizes in % or px, header & body background colors, border color, width and style (from none to double, groove, inset…), border collapse and spacing, text align, padding, and caption side and alignment.
  4. Press Generate Table — the HTML + CSS appears in the Code box, and a rendered Preview shows exactly what the code produces. Invalid fields are listed by name and the previous code stays intact.
  5. Press Copy code to put the snippet on your clipboard, or Reset to start from the default 4×4 table.

Privacy

The table and its code are built entirely in your browser. Nothing you type is uploaded to a server, and no network request is made with your content.