A few basics 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 and 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. |  | | Careful, it's easy to accidently merge a cell with content you wanted and have it disappear! Save your page before you do, and if anything unwanted happens click on 'Web Pages' in the Editor and select the page you are on. When it asks if you want to save you changes, choose cancel. |
| 
| 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 you want 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. | I used the above technique to create a header for a example web page. | | 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. |
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 blue. 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 be distracting. | An entire website can be designed around an image as inspiration, using some as table backgrounds in different areas. |
|
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. |
Increase the cell padding in your table to help keep your text inside the edges of the image. This tables padding is set to 20. |
| Images are an important element of web design, use tables to arrange your content and images neatly. A little creative thinking using images as table backgrounds can add a beautiful touch to your website. |
top office live design tips © 2007 - 2008 www.oldesigntips.com, all rights reserved. | |
tip... You can type in the path of the image instead of waiting for the image gallery to load. /images/yourimage.jpg another tip... You can also use an image from the document gallery. Just type /documents/ instead of /images/. |
yet another tip... leave a little extra space around the edges of your image to give you room to get the image right in your table without it repeating. |
| | | |
|