BLACK BEAR ventures

Canmore, Alberta, Canada www.CanmoreOffice.com

Home     About Us     Office Live Tips     Contact Us     Photos     Site Map      
Columns by Table     Embed Animoto     Image Rollover Effect      
How to extend Layout Flexibity Using Tables within Office Live Zones
Column management using Office Live Tables - When you need more columns/containers than the default zone layouts provide.

(You can only set overall table properties in Office Live. A cell properties utility for managing cell widths/heights within tables is absent from the interface.)

The Workaround:
Start by adding at least 6 carriage returns to the blank zone to give yourself some vertical working space around your table grouping. I instead of inserting a single table with 3 columns, insert 3 single sell (Generic) tables like so - each on its own line, no lines in between:

 
 
 
Start with the first table, right click on the lower right corner of the table border and select float left. Do this for each of the remaining two tables. (make sure you float all the tables or they won't line up precisely.)
The tables will line up horizontally.
You then just have to make sure that the total width of the 3 horizontally aligned tables including padding and margins do not exceed the width of the zone container. If the total horizontal width exceeds the zone width, tables will start dropping down below.  To carry on adding content below multiple floated tables, you need to locate the cursor immediately below the last table and insert an HTML module. Cut and paste this style into the HTML module:
<div style="clear:both; height:20px;"><!-- x --></div>


 
 
Table 1 & 3 each have 8px internal padding applied to them. The padding can be set to zero in each table's property settings as you can see with this table.
 
To get rid of the grey border around each table, open each table property setting and set it to the same colour as the background (see col 3, no border - border color set to #ffffff to turn it white)
 - a sloppy fix but office live does not have a way to turn off the borders in the properties interface. Setting borders to 0 has no effect.



You can nest tables within tables as well.

Hi
Hi























Some additional content goes in here after the HTML module that contains the clear float code.