Support Center - Insert a Table
Home   Drag and Drop Interface   Pages Management   Domains   Mobile   SEO
Relevant to:
Express
This article is not relevant to Express Builder users (registered after 01/01/2014).
Please click here for Express Builder Support Center.
Old Interface
This article is relevant to Old Interface users (registered before 12/31/2013).

Insert a Table

A table is a content feature that offers a simple, clear and convenient presentation of tabular information. Although tables were designed chiefly to present tabular information, tables can be used to arrange content in a complex order or structure: positioning different elements such as text, images, videos and more on a single page.

Inserting a new table

Click on the Table button to insert a new table (). A window will appear in which the user can predefine certain table properties (which can be modified at a later stage, if necessary):

All of the table's settings can be defined from this window. This includes the following definitions:

  • Rows - determines how many rows the table will contain (widthwise).
  • The number in the Columns field will determine the number of columns in the table.
  • Width - defines the size of the table.
  • The Height field - predefines the table's height. This field can be left blank, allowing the table's height to be generated dynamically.
  • Cell Spacing - defines the space, in pixels, between adjacent cells.
  • Border Size - defines the width of the table's borders, in pixels. A transparent table can be created by setting the border size to zero.
  • Cell Padding - defines the space, in pixels, between the border of each cell and the content displayed in the cell.
  • Alignment - defines how the entire table will be aligned in relation to the page.
  • Border Color - allows the user to choose a specific color for the table's border, if the border's width is greater than zero.
  • Background Color - defines a fixed color for the background of the entire table.
  • Pasting the URL of an image in the Background Image URL defines a background for the entire table.
  • Clicking on the Advanced Options tab opens a window in which other useful settings can be defined by website builders who work with codes: Table ID codes; language direction; CSS styling and CSS classes for the table.

The following table is generated when using the definitions in the example above:

   
   
   

After generating the table, place the cursor in the table's cells and begin entering data.

Editing an existing table

The editing interface and the right mouse button can be used to edit an existing table. The dropdown menu offers a variety of editing options:

The following options appear in the "Cell" menu:

  • Insert Cell Before - to insert a cell above the one in which the cursor is located.
  • Insert Cell After - to insert a cell below the one in which the cursor is located.
  • Delete Cells – deletes a cell and its content from the table
  • The Merge Cells option is enabled when the user selects several cells by dragging the mouse over them. This option merges the selected cells into a single one.
  • Merge Right - merges the selected cell with the one to the right of it.
  • Merge Down - merges the selected cell with the one below it.
  • Split Cell Vertically - splits the cell into two, from right to left.
  • Split Cell Horizontally - splits the cell into two, horizontally.
  • Cell Properties - opens a window in which properties can be defined for a specific selected cell:
  • Width and Height - set the size of the cell. The size unit can be selected as well (set to pixels, by default). We recommend editing the dimensions of each cell to increase the table's compatibility with different browsers.
  • Word Wrap - defines how the text will appear in the cell – will it wrap around to the next line or not when reaching the end of the cell.
  • Align Horizontally and Align Vertically - determine the position of the cell's content – horizontally right, left or center and vertically top, middle or bottom.
  • Row Span and Cell Span options - allow the user to manually define the number of cells that a specific cell covers – used in complex table with cells of varying sizes.
  • Background Color and Border Color - allow the user to select colors for each specific cell.
  • Row and Column menus - give users the option of adding a row or column before or after the selected one, or of deleting a selected row or column.
  • Delete Table - deletes the entire table from the page
  • Table Properties - returns the user to the table generation screen where the table's settings can be modified.
 
© 2014 Livecity. All rights reserved