Layouts/Tables

table exampleTables are used to help layout your content in rows & columns. For example: separating the page into two columns, text on the left, photos on the right. Tables are invisible if no styles have been applied, they will appear as a dotted outline in Webitor.

Using Webitor, you can edit cells of the table and apply border & shading, margin, padding, width & height to tables, cells, images, and almost any HTML elements.

Insert a Pre-made Layout

We have created a selection of pre-made layouts to make laying out your information quick and easy.

  1. Log into Webitor
  2. Click on the page where you would like your table inserted (so that your cursor is flashing on the page)
  3. Click the layout button on the left menu.
  4. You will be given a few options (click on more for other options)
  5. Click on the layout you want and it will appear on your page
  6. Delete out any text and replace it with your own.

Your layout options:

Inserts a heading and a new paragraph of text.

Inserts a paragraph with a image aligned to the right.

Inserts a 3 column table with 3 images and captions underneith.

Inserts a heading style.

Inserts a 2 column table.

Click this for more layout options.

Insert a New table

  1. Log into Webitor
  2. Click on the page where you would like your table inserted (so that your cursor is flashing on the page)
  3. Click the "insert a new table" icon (new)
  4. A popup will appear
  5. You have many options, but only columns, rows and width are compulsory.
  6. When you have adjusted all your settings click insert.

Your options are:

Columns: the amount of vertical cells across the page. table
Rows: the amount of cells down the page.
Cellpadding: pads the table so that text does not sit right up to the edge of the table. The larger the number entered the more padding applied. (Optional)
Cellspacing: adds a space between the cells of the table. The larger the number entered the more space applied. (Optional)
Alignment: where your table will sit on the page, left, centre or right. (Optional)
Border: add a border around your table by placing a 1 in the border box. OR Select a border style from the "Class" drop-down menu. (Optional)
Width: How wide your table is in % or pixels. For example; 80% will make the table 80% total width of the page.
Height: not often used, enter a number to control the height of your table. (Optional)
Class: This box shows all the predefined styles you can apply to your table, for example a border or text size. (Optional)

Advanced

ID: for CSS ID classes. (Optional) Advanced
Summary: (Optional)
Style: The CSS of the styles already selected. (Optional)
Language direction: (Optional)
Language code: (Optional)
Background Image: browse and upload a image you would to appear in the background of your table behind the text.
Border Colour: select the colour of your border by selecting the little white square, pick your colour with your mouse and click apply. (Optional)
Background Colour: select the colour of the background of the table by selecting the little white square, pick your colour with your mouse and click apply. (Optional)

rowEdit a table row

This is used to edit a individual row of the table. For example make all the cells text top aligned or add a background colour.

  1. Click a cell in the row you want to edit.
  2. click the Edit a table row icon (row)
  3. Adjust the settings
  4. Choose what cells to apply these changes to.
  5. Click update.

cell Edit Table Cell

This is used to edit a individual single cell in the table. For example make the cell text top aligned or add a background colour.

  1. Click the cell you want to edit.
  2. click the Edit a table row icon (cell)
  3. Adjust the settings
  4. Choose what cells to apply these changes to.
  5. Click update.

row Insert a New Row Before

As the name suggests this is used to insert a new row into your table.

  1. Click inside your table
  2. Click the "Insert a New Row Before" icon (row)
  3. A new row will be added above where you clicked.

row Insert a New Row After

As the name suggests this is used to insert a new row into your table.

  1. Click inside your table
  2. Click the "Insert a New Row After" icon (row)
  3. A new row will be added below where you clicked.

delete Delete Current Row

As the name suggests this is used to delete a row from your table.

  1. Click inside your table on the row you want to delete.
  2. Click the "Delete Current Row" icon (delete)
  3. The whole row will now be deleted, including any text and image inside of it.

col Insert a New Column Before

As the name suggests this is used to insert a new Column into your table.

  1. Click inside your table
  2. Click the "Insert a New Column Before" icon (col)
  3. A new column will be added to the left of where you clicked.

insert Insert a New Column After

As the name suggests this is used to insert a new Column into your table.

  1. Click inside your table
  2. Click the "Insert a New Column After" icon (insert)
  3. A new column will be added to the right of where you clicked.

delete Delete a Column

As the name suggests this is used to delete a Column from your table.

  1. Click inside your table on the column you want to delete.
  2. Click the "Insert a New Column Before" icon (delete)
  3. The whole Column will now be deleted, including any text and image inside of it.

merge Merge Table Cells

This is used to merge a number of cells into one.

Using Internet Explorer: Using Firefox:
  1. Click inside the cell you want to merge
  2. Click the "Merge table cells" icon (merge)
  3. A popup box will appear
  4. Type in the amount of rows & columns you would like to merge.
  5. For example:
    This table contains 4 columns, I want to merge the whole top row into 1, so I tell Webitor to merge 4 columns and leave the row as 1.
    Table Merge

 
  1. Click, hold and drag your mouse across the cells you want to merge.
  2. Click the "Merge table cells" icon (merge)
  3. Your cells now have merged into one.

split Split Merged cells

This is used to restore any merged cells.

hr Insert Horizontal Rule

This will insert a simple line on the page, useful for dividing up text, like on this page.