home   services   blog   about   contact

                                                                                         

| More

the basics of using tables in office live

 

With the new layouts and ability to change zone widths we can probably get our page content arranged nicely without needing a table, but there will still be instances when it will be useful to use one.  Knowing how to use them may still come in handy.

To insert a table, click in your zone and click on table at the top of the page editor. When the create a table menu appears, select generic style and change the rows and columns to what ever number you want. 

 

 

 

This example to the right I used just 1 row and column.  Click on the border of it and you can resize it and move it by dragging it, making it longer or taller. 
 /

float

left

Right click in your table and another menu will appear. Here you can insert and delete rows and columns, merge columns and rows, float and change your tables properties. To move the table, place your cursor on the page and click left, center or right justify before inserting.   You can drag it around too.

 

 left justify

right justify

Merging columns and rows gives you more options for your table layout.  Columns merge to the right of the cell the cursor is in.  Rows merge below the cell the cursor is in.  You can get a bit elaborate with the arrangement, but it is best to keep it simple.

 
 

. 

 .

. 

. 
 

 

 

.

 

...

.

.
..

Right click on the table and choose properties. Here you can change the outer border size and the color of the border and cell lines. You can also change the width and height of your table.  This is handy if you know what size you want it and would like to have more than one table the same size.  Your content can still stretch it larger if you aren't watchful.  I have changed the border width to 5, the color to red and the table width to 100px. 
.
.

tip

If you would like more color choices than those available in the color chart, in table properties you can type in the code for the border and/or background to any color you like. I have changed the background color in this Tip table to #b1cb81.

Want more color?  Place your cursor in one of the cells of your table and click on the fill bucket in the editor, choose another color from the chart. You can change the color of each of the cells. In my example below I also changed the border color to white. 

.
.

 

Note: now you need to highlight/select something in the table cell and then select a fill color in order for the cell to fill.

In Table Properties you can change the cell padding and spacing.  The cell padding creates more or less space between the contents of a table and the edge.  The bottom example has the cell padding set to 0.  The image now fits snugly in without extra space and the text is right up to the edge.

 
 

default cell padding of 8

cell padding set to 0

The cell spacing changes the space between the cells and rows, putting more or less space between them and the border of the table.

 spacing set
to 

6px

The next article Image and Tables, describes using tables to arrange content and using images as table backgrounds. 

 

 

 

 

 

© 2007 - 2009 office live design tips