VoriTools

Create an HTML table with matching CSS

Set the size, colours and hover behaviour; the preview and the copyable HTML/CSS update on the spot.

Runs locally in your browser

How to generate an HTML table with its CSS

Pick the number of columns and rows, choose a colour theme and a hover behaviour, and the preview and the copyable HTML/CSS update as you change them.

The table is generated in the browser: nothing is uploaded, the preview and the code are the same markup, and the copied code carries no watermark or backlink.

  1. Set Columns (1–50) and Rows (1–100). Rows counts the header row, so 7 rows produce one header row and six rows of cells.
  2. Choose a table style: Blue, Green, Gray, Orange, Brown, Black or No color. Picking No color switches the design selector to No style automatically.
  3. Choose the design: alternating rows, a filled header with white rows, or no styling at all.
  4. Decide whether the cells show placeholder text (Row:1 Cell:1) or stay empty, and whether rows light up on hover.
  5. Press Copy HTML to put the generated code on the clipboard, then paste it into your page.

The generated markup, its limits and the hover rule

What the generated code contains

The box holds a <style> block followed by the table itself: a <table class="tftable" border="1"> with a <thead> header row and a <tbody> of cell rows. The CSS targets that class only, so two tables generated here can sit on the same page without unique ids.

The preview underneath renders the same string, so what you see is what the copied code produces. The placeholder labels (Header 1, Row:1 Cell:1) are written in the language of the page, and the output carries no watermark and no backlink.

Size limits and invalid input

Columns are limited to 1–50 and rows to 1–100. While a field is empty or outside that range the status line above the code explains the range, and the table on screen keeps the last valid size instead of collapsing.

Leaving a field clamps it to the nearest allowed value — 999 becomes 50, an empty field returns to the last valid count. Letters are dropped as you type, so 12abc becomes 12.

Hover highlight, colours and copying

Row highlight is generated as a CSS rule (table.tftable tbody tr:hover) instead of a script, so the pasted table needs no JavaScript and no element id. Colours come from six fixed palettes; the No style design leaves only the border attribute.

Copy HTML copies the current content of the box. The code is only written to the clipboard — the page does not post your settings anywhere.

Recent tools: