Landing Pages

Add a table to a rich text module

Last updated: October 24, 2020

Applies to:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

Tables can be useful for organizing lists, displaying calendars, or to add a caption under an image. Learn how to add a table to a rich text module on a HubSpot page, blog post, email, or knowledge base article.

Please note: tables aren't supported in the drag and drop email editor.

Add or remove a table

  • Click any rich text module to open the content editor.
  • In the rich text toolbar, click the Insert dropdown menu and hover over Table
  • Select the number of columns and rows for your table on the grid, then click to insert the table into your content.
  • To expand your table's height or width, click and drag the blue corners.
  • Add content to any cell within the table. Images will resize to fit within the cell you've selected. 
  • To adjust the size of a row or column, click and drag the edge.
  • To delete a table from your content, click the table and select Remove.

insert-table

Edit your table

You can modify properties your entire table, or edit specific cell(s) by highlighting them with your cursor. To edit your table:

  • Click the table and select Edit.
  • On the Format tab, you can:
    • Insert a new row or column within a cell. 
    • Delete a row or column selected in your table.
    • Merge two or more cells selected in your table.
    • Split cells that were previously merged.
  • Click the Style tab to edit your table's colors, borders, and spacing. To access all the styling options available for your table, click Advanced.
    1. Layout: select how your table aligns with other content in your rich text module. 
    2. Border: customize the style of the table border:
      • Color: click the color bubble to select an image with the color picker. To enter a specific hex value, click the Advanced tab.
      • Width: the width of the border around the edge of the selected cells.
      • Style: select a style for your table's border (dots, dashes, etc.).
    3. Dimensions: customize the size of your table.
      • Width: set an exact width for the selected cells.
      • Height: set an exact height for the selected cells.
      • Cell padding: adjust the spacing around the selected cells.
    4.  Table caption: add a caption above your table.
    5. Responsive: click to toggle the Responsive switch on to allow horizontal scrolling. This way your content won't overflow on a smaller screen size.
    6. CSS: edit the source code for styles applied to your table.
    7.  
  •  
  •  

Please note: updating code in the CSS field requires a basic understanding of HTML.

table-style

Copy and paste a table from a spreadsheet

You can also copy and paste a table from a spreadsheet into the editor. However, with this method it's possible that extra space might appear within the table rows and columns. To remove that space, review the source code of the editor and ensure that your table's cellpadding and cellspacing attributes are set to 0. 

source-code-cellspacing