How to use Tables

Apr 12
14:47

2008

Carol Zimmer

Carol Zimmer

  • Share this article on Facebook
  • Share this article on Twitter
  • Share this article on Linkedin

One of the lessons on how to use the editor for web pages.

mediaimage

If you want to put text beside pictures using the Insert/Edit Table Button is one of the ways to accomplish this.

Another use of the table is grouping pictures.

Once you click on the Insert/Edit Table Button the following screen will appear.

Let's start at the top right with Rows and Columns. Rows go up and down the page,How to use Tables Articles and Columns go across the page. If you want to do just one picture with text beside it like I did on the top of this page, you will want to have 1 in the box beside Row, and a 2 in the box beside Column. In the second table I still have the Row set to 1, but the Column is set to 4.

If you will look at the table at the top of this page you will see there are borders around the text and the picture. That is because I have the Border Size for that table set at 1. For the second table on this page I have set the Border Size to 0, and that is why you don't see any lines around the pictures.

I have the Alignment for both of these tables set for Center, which is center of page.

On the second table I have put "Another use of the table is grouping pictures." in the Caption field.

I tried using the Summary field, but it's not working.

Width - don't go over 550 pixels, as it will make your table to big for the webpage, otherwise it depends on what you are putting in the table. For the first table my picture was 350 pixels, so I set the table for 525 pixels to make the text fairly even from side to side. On the second table my pictures are 113 pixels, so I set the table for 452 pixels.

Height - I set the height the same as the height of the pictures I am going to use, but you can leave the height at the default setting, and it will adjust itself as you add pictures, just remember, that it will also adjust itself as you add text.

The Cell Spacing and the Cell Padding do pretty much the same thing, the higher the number, the more area around each individual cell. I have the spacing set at 1 on the first table, and 0 on the second. Even though the spacing is set at 0 there is still a little bit of space.

Once you get your Tables Properties filled out click OK. Now you can add pictures and text. Click inside a cell and start adding text, or go to the Insert/Edit Image and get a picture. Be sure the pointer is inside the cell you want to work with.

If you want to make changes just use your right mouse button (this is called a Right Click) and click anywhere inside the table. This will bring up a drop down file (I haven't yet figured out how to get a picture of a drop down file). If you want to adjust the entire table choose the Table Properties at the very bottom of the list. If you want to adjust a individual cell select the Cell Properties just above the Table Properties.

Cell Properties

Width - You can change the width of the individual cell, but it will change the width for the entire Column. As you add pictures to the cells they will atomatically adjust so the picture fits.

Height - You can change the height of an individual cell, but it will change the heightj of the entire Row. As you add pictures to the cells they will atomatically adjust so the picture fits.

Word Wrap - You will need to set this to yes. If you don't your text will continue to expand to the right, and the cell will expand with it, no matter what the table is set for. If you use the word wrap then the text will remain within the width you preset for the table.

Horizontal Alignment - This will put your pictures or text to the Left, Right, or Center of the cell.

Vertical Alignment - This will put your picture or text at the Top, Bottom, or Center of the cell, there is a Baseline but it is the same as Top.

Rows Span - If you want your picture or text to take up more than 1 cell this is where you can have it take up however many cells you want, as long as you have that many cells in that row.

Columns Span - If you want your picture or text to take up more than 1 cell this is where you can have it take up however many cells you want, as long as you have that many cells in that column.

Background and Border Colors

The above table shows examples of Background and Border Colors. The first picture to the left has a Background. The picture in the center has a Border, and the last picture has a Backgound and a Border. I havae the Cell Spacing for these set at 10, and the Table Border set at 6. Please notice, the Table Border only effects the outside of the entire table, not the individual cells.

If you get your table set up, and then realize you need more rpws, or columns, or that you have too many, right click anywhere inside the table, and the drop down file has listings for adding or deleteing rows and columns. Just remember the changes will effect the entire Row or Column, you cannot add or delete individual cells. The drop down file also has a Image Properties tab. To work with the Image Properties right click inside the cell where the picture you want to edit is.

That's using tables. For other lessons click on sitedesignseo in the content table at the top left of this page, and in the middle left column of that page you will find other functions of the editor explained.