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.