Skip to main content

Table shapes in draw.io

The extended tables tool in draw.io is flexible and robust, offering more options for table styling and content.

Tip: The entity shape used in entity relationship diagrams is a table shape.

Add a table to a diagram​

Use the table tool in the toolbar to add a table to your diagram just as you would in Microsoft Word or Google Docs.

Insert a table via the draw.io toolbar

Add a title row​

Either enable the Title checkbox or hold down Shift as you drag to select the size of the table. This will add a title row even if you haven't enable the Title checkbox.

You can insert a table title easily by holding down shift and inserting a table as normal

Shortcut - Add a title when you add a table: Hold down Shift as you drag to select the size of the table. This will add a title row even if you haven't enable the Title checkbox.

This automatically adds a title row that spans all of the columns.

You can also add a title region to an existing table as described below.

Add title regions to cells​

Select a cell and drag the orange grab handle in the center of its top border to add a title region to the entire row. It can be fiddly to grab the title handle instead of the row boundary - click on the bottom or top of the orange diamond grab handle, and not in its center.

  • If you move the grab handle in the middle of the top table border, this will add a table title.
  • If you move the grab handle at the top of a selected cell, this will add a title region to all the cells in that row.

Now when you type a label, the text will appear in that title region instead of centered in the cell. You can add title regions to tables, and all cells in any row in a draw.io table

Resize and remove title regions​

Tables, rows and columns can have their own title regions. They are not set separately - for example, when you change the region of one column, all columns will use the same space for the title.

  1. Select one cell in a row or column that has titles.
  2. Click and drag the orange grab handle on the title separation line to the cell's outer edge to make the region disappear.

If you had text in that title region, it will now appear in the center of the column, row or table. You can resize and remove title regions in table cells, rows, columns and even the entire table itself in draw.io

Add text to table cells​

Click once to select the table, then click again on one cell to select just the cell. Enter your text just like you would a shape label.

Add text to a selected table cell just like you would a shape label in draw.io

If the cell has a title region, the text will appear there, otherwise the label will be centered in the cell.

Add a cross-functional flowchart (table)​

Cross-functional flowcharts are container tables with horizontal and vertical swimlanes. The cells in the first row and column have title regions. Process steps can be added into the cells of the table, and joined with connectors across the table cells to show a process flow between teams or categories.

Add text to a selected table cell just like you would a shape label in draw.io
  1. With nothing selected in your diagram, click on the Table tool in the toolbar.
  2. Select the Container checkbox, or hold down the Ctrl/Cmd key while you select a table with the number of rows and columns you need.
    Add a cross-functional table by selecting the Container checkbox in the Table tool in draw.io

Add columns and rows​

  1. Select a cell inside of a table.
  2. Select the Arrange tab in the format panel on the right.
  3. Use the table tools to add a column or row before or after your selected cell or row. If you have selected the entire table, this will add a row or column at before the beginning or at the end of the table.
Use the table tools in the Arrange tab in the format panel to insert and delete columns and rows

Shortcut - Copy a table row: Click on a cell in your table, then click on it again to select the row. Hold down either Ctrl or Cmd, grab and drag a copy of the row to a new position in the table, or press Enter.

Alternatively, hold down Ctrl/Cmd and press Enter to make a duplicate of the selected row directly below.

Move rows​

You can drag rows to new positions in the updated tables, either by selecting and grabbing the row itself, or using the reposition icon that looks like two horizontal lines on the right border of each row.

  • Select the row - click to select a cell, then click again to select the row - then drag it to a new position.
  • Alternatively, select the table (not a cell or a row/column), then grab and drag the row's reposition icon.
You can drag rows around to reorder them in tables in draw.io

Note: The reposition icons on the right double as connection points. If you try to drag the reposition icons without first selecting the table, you'll attach a fixed connector at that point.

Resize rows and columns​

Grab and drag the row or column borders to resize the row or column.

Make sure you don't grab the reposition icon on the right border of a row - this will move a row, rather than resize the column.

Relatively resize all rows and columns​

You can also resize the table keeping all of its cells relative to each other - this is behaviour is enabled by default.

  • Select the table, then drag the round handle at the side of the table instead of the final column or row border.
  • Drag the orange diamond in the middle of the table below the table title row.

Disable relative resize​

If you don't want to resize the other cells, change the table properties.

  1. Select the table (not a cell or a row/column).
  2. In the format panel on the right, expand the Properties section.
  3. Ensure the checkboxes for Resize last row and Resize last column are selected.
    Drag the row/column borders to resize them

Delete rows or columns​

  1. Select a cell inside of a table.
  2. Select the Arrange tab in the format panel on the right.
  3. Use the table tools to delete the selected column or row.
Use the table tools in the Arrange tab in the format panel to insert and delete columns and rows

Shortcut - Delete a table row: Click on a cell in the table, then click on it again to select the row. Press the Delete key, or right click and select Delete from the context menu.

Merge and unmerge cells​

Merge adjacent cells and unmerge merged table cells via the Arrange tab in the format panel, or using the Table tool in the Sketch whiteboard-like editor theme.

  • Merge is only available when you have selected multiple adjacent table cells.
  • Unmerge is only available when you have selected a merged cell in a table.
    Unmerge table cells in the draw.io and draw.io editor via the Arrange tab in the format panel

draw.io has many more keyboard shortcuts to help you diagram faster, including mouse+keyboard modifier shortcuts and table shape shortcuts.

HTML table shapes​

The HTML table shapes are still available in the Misc shape library (part of the General shape library). Hover over the shapes to see their names.

The older HTML tables are available as shapes in the Misc library in draw.io