HTML Tables Generator
How to use the HTML tables generator?
- 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; Tab in the last cell adds a row. Add a row or a column
at the end with the + under or right of the table, and add
and remove them anywhere 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, or drop it on
the table.
- 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.
- 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
Import. 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.