favicon MakeMyTables Buy me a Shawarma 🌯

Need to copy paste HTML Tables from other Websites ? Now it's super easy with MakeMyTables.com !

MakeMyTables enables you to copy table structured content from any website, excel sheet or any kind of document, apply your own styles, update the content and paste the generated code into your website or export the table to excel format. With our advanced user interface, you can easily edit the content of HTML Table, add, shift or delete the rows and columns, and even split the content into multiple tables. To start from scratch, click on the GENERATE TABLE button.

favicon
To split the table place cursor to the end of any row and then click on split button You can not split the table by placing cursor at the end of last row
Row Separator
clear
Column Separator
clear
Row Separator and Column Separator can't be the same !
Please enter Row Separator !
Please enter Column Separator !

SPLIT TABLE

To split the table, place the cursor at the end of any row and click on the SPLIT TABLE button.

Please note that you can not split the table from the beginning or end of the content.

CUSTOM

Toggle this button for HTML TABLE mode.  Click here to see more info !

In desktop view, click on the table wrapper box to focus it and use keyboard shortcuts to ADD (+), DELETE (delete key), EDIT (enter / return), MOVE ROWS (arrow up & down) and MOVE COLUMNS (arrow left & right).

To move columns left and right you must ADD HEADER to the table and then click on column header to select and move that column.
Odd rows background :
Even rows background :
Color code is invalid !
Odd Columns color :
Even Columns color :
Color code is invalid !
Border color :
Color code is invalid !
You are in developer mode !
If you think MakeMyTables is useful, click on this button to   Buy me a Shawarma 🌯
GENERATED HTML CONTENT
Content Generated !

GENERATE HTML CONTENT

Click on this button to generate and copy the HTML code.

DEFAULT STYLE

This is useful for developers to edit the default style and add custom css classes.

ADD HEADER

Click on this button to add a header to the table and click on the header to move the columns left and right.

LAYOUT-1

Toggle on this button to change the layout of the website.

This is useful when you are dealing with tables with more columns.

STACK

Toggle this button to change the tables arrangement from STACK to SIDE BY SIDE.

  • STACK arrangement is useful when you are dealing with a single table or tables with more columns and lengthy content.
  • SIDE BY SIDE arrangement is only applicable in Desktop view (large screens).
  • In Mobile view (small screens) STACK arrangement is set as default for better UX and can't be changed.
  • In order to make use of this feature, you need to include Bootstrap library in your website. If you don't want to include Bootstrap, then toggle to CUSTOM STYLE and apply your own styles. It's super easy if you are a developer !
  • Highly recommend to use Bootstrap in your website.

CUSTOM MODE

The default Row Separator in CUSTOM Mode is set to return means pressing return/enter key or a line break (\n) is treated as a row closure (<tr>).

The default Column Separator in CUSTOM Mode is set to tab means the tab space (\t) is treated as a row clousre.

You have the option to change both the Row Separator and Column Separator. If it's a return or tab you can choose that value from the dropdown and if not you may enter the value. An additional option named empty return is also provided so that you may choose that option if the content format is key-value pairs in which key and value are separated by a return and the pair is separated by an empty line (empty return).

You can't set the same value to both Row Separator and Column Separator unless it is return. And if both the separators are set to return then your table will be having only 2 columns.

HTML TABLE MODE

You can toggle the mode to HTML TABLE.

In this mode you can copy paste the HTML content and do your custom styling and content updates.

You can copy multiple <table> tags if you want.

When to use return as Row Separator and tab as Column Separator ?

These are the default values for the CUSTOM Mode.

One scenario where you will be using these default values is when you are copying content from an Excel sheet.

When to use return as both Row Separator and Column Separator ?

Sometimes both rows and columns are separated by return / line break.

This format is useful on manually entering the content using keyboard.

When to use empty return as Row Separator and return as Column Separator ?

Sometimes columns are separated by return / line break and rows are separated by an empty return (empty line / line break).

This format is also useful on manually entering the content using keyboard and it will be easy to distinguish the rows on doing so.

When to use empty return as Row Separator and tab as Column Separator ?

In some cases columns are separated by tab space and rows are separated by empty return (empty line / line break).

How to use custom values as Row Separator and Column Separator ?

You can clear the values in Row Separator and Column Separator and enter your custom values.

Let's say the columns are separated by colon (:) and rows are separated by comma (,).

Recommend to use Bootstrap in your website.
Send your feedbacks and comments to makemytables@gmail.com.
Enjoy Making Tables favicon