images & tables in office live
A few tips and tricks on how to use tables to arrange your content and images. Images can also be used as table backgrounds, I've included a few tips on how that works along with some creative ideas.
If you are new to using tables you may want to read Table Basics first.
images and content
| Placing images into a cell of a table is an easy way to arrange your content and images neatly. The Image goes into one cell and the text in the cell next to it. To center your image, place your cursor in the cell and hit backspace/delete to make sure there aren't any extra spaces before you put your image in. |
Sometimes it makes more sense to merge some rows or columns to help center everything just right. Right click in the table to bring up the menu to select merge. | 
|
|
| You can get quite complicated with different arrangements. It is usually best to try out these things on a page that you don't include in the navigation until you get the hang of it. |
|
tip... hitting enter after an image or text will move it up in the table cell. |
images as table backgrounds
To use an image as a table background, right click in the table and select properties and check the box that says 'Use Background Picture'. Click on the select button to choose an image from the Image Gallery then click apply.
An image as a table background will be the full size it is in the Image Gallery. You have to stretch the table or you can type in the size of the image in pixels in table properties to see the entire image.
If you stretch a table larger then the image the image repeats, horizontally and vertically. Your content can also stretch the table and your image too far. It can be tricky to work with a table with an image as a background.
You can add columns and rows and also use the fill bucket to color over some of the image. What is done with the fill bucket can be removed by going back to table properties and clicking apply again.
I hit the space bar across the empty cell to expand it and make the others smaller, since I had no content there. I higlighted the spaces gray so you can see them.
| contact me |  |
|
Tables with images as a background work the same as any other table. You can type text and text links in them. You can place images and even another table in them.
Modules and forms can also be placed in tables. Modules has a few tips and ideas for working with them.
An entire website can be designed around an image as inspiration, using some as table and/or zone backgrounds in different areas. That is how this one was done. |
be creative
You can use images as table backgrounds to enhance your site design and bring attention to important information. The images above and to the right are tables with background images and the borders changed to the page background color.
When using images choose ones that are related to your content, your business or that goes with the theme of your site. Whatever you use on your site should enhance your message or design, too many different things can actually be distracting.
When placing text over an image, take care that your image isn't so busy that it is difficult to read. Bold text can help but it's not quite enough for this one. |
| A solid or shaded color allows your text to be read more easily. |
tip
When using images as backgrounds it is important when naming your image file to avoid the
use of a space in the name. Some browsers will not display images with a space in the file
name. An underline can be used to help separate words and make it easier for us to read.
Increase the cell padding in your table to help keep your text inside the edges of the image. The padding in this table is set to 25. |
Images are an important element of web design, a combination of floating and the use tables can help arrange your content and images neatly. A little creative thinking using images as table backgrounds can add a beautiful touch to your website.
The table to the left is floated left so my text can be next to it.
If you are comfortable using CSS code on your site, background images and color can be used for the different zones. More creative options! The navigation at the right of the page is actually a background image applied to zone 3 with a custom navigation module and some additional images, eliminating the need to put it in a table. The code for that is on the CSS codes page.