Insert a table in 'Change content'

To insert a table into your web page, click this button and, with your mouse, select how many rows and columns you would like.



Once a table has been inserted you can resize it manually in the 'Paint box'. Click on the table until you see small white square boxes appear around the edge of it. Hover yourmouse over the white boxes. Click down and pull the mouse across the page. This will manually resize your table to taste.

To edit and change your table in more detail you can also double click on the table border to bring up the ‘Table properties’ pop up box. Alternatively right click on the edge of the table and select ‘properties’ from the drop down menu to bring up the following screens.


Table wizard tab




The ‘Table wizard’ tab allows you to add rows and columns by clicking the ‘Columns +/-’ and ‘Rows +/-’ buttons. The ‘ColSpan +/-’ buttons allow you to merge two columns together and the ‘Span +/-’ buttons allow you to join two rows together.


Table tab


The ‘Table tab’ allows you to customise your table further:



Cell padding: Adjust the spacing inside a table cell here.

Cell spacing: Adjust the gaps between each cell in the table here.

Borders: Specify your table border thickness here. ‘100’ is the maximum thickness, ‘0’ is no border at all.

Background colour: Click in the box to specify the background colour of the table.

Border colour: Click in the box to specify the border colour of the table.

Collapse table border: Remove all padding and spacing here.

Summary: Here you can describe the contents of the table. Although this will not be visible, it will help people with disabilities view the table contents.

Caption: Here you can add a caption to the top of the table.

Thead: Here you can add a table header that runs along the top of the table as the first row.

Tfoot:
Here you can add a table footer that runs along the bottom of the table as the last row.

CSS class: Advanced users only: If you have created cascading style sheets for your website you can type a ‘class’ into this box.

Width and height: Specify the width and height of your table here.

Alignment: Specify the alignment of your table (i.e. to the left, right or middle) here.

Text-align: Specify the alignment of the text inside the table (i.e. to the left, right or middle) here.

Float:
This will give your table a ‘floating’ effect.

Title:
Here you can give a title for your table. Although this will not be visible, it will help people with disabilities view your table.


General tab
- advanced users only

The ‘general’ tab allows you to create default settings for table cells that you insert into your web page. These will apply every time you add a table.

Style builder tab - advanced users only

The ‘style builder’ tab allows you to create default settings for text within the tables that you insert into your web page. These will apply every time you add a table. You can set fonts styles, text spacing, background images, borders and layouts to taste.

Click here for Mr Site's top table tips.