↧ Expand ↧↥ Collapse ↥
Result (updated automatically as you edit the table)

HTML Tables Generator

How to use the HTML tables generator?

  1. Enter the data. Copy cells from a spreadsheet (Excel, Google Sheets, LibreOffice Calc) or a table on a web page, click a cell and press Ctrl+V: the table grows to fit them. Or click a cell and type: typing replaces its text, while a double click or Enter edits the text that is there (Esc or a click elsewhere ends the edit). Tab and the arrow keys move to the next cell. Add and remove rows and columns with the Row and Column menus, or by right-clicking a cell. You can also import an Excel workbook or a CSV file with File / Import CSV or Excel file.
  2. Format it. Select cells by clicking them, by dragging over them or with Shift and the arrow keys (Ctrl+click adds a cell), then merge them, align their text, change their font and colours, or add links and images with the toolbar. Choose the table's look (borders, header, stripes) with the Theme button. Drag the right edge of a column's header to set the column's width.
  3. Copy the code. The table's HTML code appears under the editor as you edit: click Copy to clipboard and paste it into your page. Preview shows the table as the code draws it. The options under the code can, for example, keep the header in view while scrolling or make the rows sortable.

Where to put the code?

The code is a <style> element with the table's CSS followed by the <table>. Paste both where the table should appear, e.g. into an HTML block of your blog or site builder (WordPress, Drupal, ...); the style element can also go into your page's <head>. The table looks the same in all modern browsers, on desktop and mobile.

Where you cannot add a <style> element, e.g. in an e-mail, choose Styles: Inline in the options: each cell then carries its own styles. Choose Styles: None to style the table with your own CSS.

To learn the HTML and CSS of tables, see our guide How to make a table in HTML: merged cells, borders and stripes, column widths, tables that scroll on phones and tables in e-mail, each with the table that a browser draws from the code.

Put the table in WordPress, Blogger or a site builder

  • WordPress: in the block editor, click +, add a Custom HTML block and paste the code in it. In the classic editor, paste it in the Text tab.
  • Blogger: switch the post editor to HTML view and paste the code where the table goes.
  • Other site builders have a block called HTML, Embed or Code. Paste the code in it.

Some of them remove <script> elements, and with them the sorting of the rows. Some also remove <style> elements: then choose Styles: Inline.

Copy the table into Word, Google Docs or an e-mail

You do not need the code for this. Click Preview, select the table in the preview window by dragging over it, and copy it (Ctrl+C). Paste it in Word, Google Docs, Gmail or Outlook. The table keeps its merged cells, and most of its borders and colours.

Convert Excel or CSV to HTML, and HTML to Excel

Select the cells in Excel, Google Sheets or LibreOffice Calc and copy them. Click the top left cell of the editor and press Ctrl+V. The merged cells, bold text, alignment, colours and borders come with the cells. For a file, select File / Import CSV or Excel file.

To change a table you already have in HTML, select File / Paste table data, paste its code in the box and click Load. Check Paste with formatting to keep its colours, text style and alignment. To move it to Excel, click a cell, press Ctrl+A to select all cells and Ctrl+C to copy them, and paste them in the spreadsheet. Or select File / Download as CSV.

Common problems

The table looks different on my site
Your site's own CSS for tables applies to it too, for example its theme's borders or padding, and it may win over the table's CSS. Choose Styles: Inline: a style in a cell's own style attribute wins over the site's style sheet.
Two tables on one page, and one has the other's colours
Both tables use the class tg, so the second table's CSS applies to the first one too. Give them the same theme, or make one of them with Styles: Inline.
The table is too wide on phones
Check Scroll sideways on small screens. The table then scrolls sideways in its place, and the page does not.
The rows do not sort when I click the header
The site removed the script after the table. Check that the code you pasted ends with <script>, and that your site keeps it.