UNIT 5 Building Tables Your First Table Adding Content Tweaking Your Tables Customizing Cells Nesting Tables Cool for School
FrontPage in the Classroom is produced by ACT360 Media Ltd. in conjuction with Microsoft Corporation. Copyright 1998. All rights reserved. See our entire collection of online tutorials by visiting www.ACTDEN.com

Tables can display information - such as a set of numbers showing how teachers aren't paid as much as lawyers or doctors in the 90's.

How primitive! It's a good thing they fixed that by the year 2100.

Tables can also be used to position graphics and bodies of text on a web page - giving web publishers like us more control over layout and design.

Using tables in web pages Tables are used to display information in columns and rows - similar to how they are usually used in spreadsheets and word processing programs. Yet they are also used as a graphic design tool for laying out text and images on your web page. If you want to arrange your text in columns or place graphics that appear to float freely on the page, you will need to put this content into tables with invisible border lines. The table below shows how you can use a table to place your text and images. The lines have been left visible so you can see the table - but you would not normally be able to see them.

Okay, let's create a table. I know! Let's create a "virtual-yearbook" on the kids we've met. We can alternate pictures with text about them in a grid form. That's a great way to present our field data.

A virtual-yearbook. That idea just might catch on...

Creating a simple table 1. Open a web page in FrontPage Editor and click on the Normal tab. 2. Insert the cursor into the area where you want the table to be. Never place a table at the very top of your web page because doing so will prevent you from inserting new text above it in the future. 3. Click the Table button on the Standard toolbar. 4. You will see a drop-down grid. Select the number of columns and rows you want by holding down your left mouse button and moving the pointer down and to the right. A table will appear when you let go of your mouse button.

Okay, now we need to add text to our cells. We can start with the names of the kids we've met. Hmmm... Matthew and Ashley seem like popular names in this century.

Names have come a long way, hey Blip? We haven't met a single kid named Grog, Fusion, or Byte. Yet, in our time, you hear these names all the time.

Good observation, Pixel.

Adding text to table cells A "cell" is one of the boxes in the table. When you place your text or graphics into a table, you place it into one cell. To enter text into a cell: 1. Position the cursor in the cell. 2. Start typing. The cell will automatically expand to accommodate the text.

Now let's add a heading for our virtual yearbook. Something catchy.

20th Century Teens? Adolescence in the Information Age?

Adding captions to a table The caption of a table is like its title or heading. Unlike other text, caption text automatically moves with the table if you want to relocate it on your web page. To add a caption to a table: 1. Select the table by clicking anywhere within it. 2. Click Table on the Menu bar and select Insert Caption. 3. The cursor will move to the top of the table. Type in your caption. You can format caption text the same way you format regular text.

Okay, now it's time to put some images into the table. How about pictures of all the great people we've met?

Great. Hey, I noticed a lot of people wore little round window things on their noses. Was that some sort of fashion statement?

No, those were a primitive way to correct vision. They're called glasses. They didn't have vision-matic machines back then.

Adding images to a table 1. Position the cursor in the cell. 2. Click the Insert Image button. The Image dialog box will appear. 3. Choose an image and click Insert.

Let's make our table really stand out. How about some borders? I don't think they're hard to make.

Of course not. FrontPage is designed to be easy-to-use and very logical.

Defining borders Borders are the lines that give your table a grid-like appearance. You can adjust the width, color, and shadows of these borders using a few simple commands. To define table borders: 1. Position the cursor in the table. 2. Click Table on the Menu bar and select Table Properties. 3. To adjust border width, adjust the spin controls on the Border Size box. The numbers you see represent "pixels" - a size measurement traditionally used by graphic designers. 4. To adjust the color of the border and its shadows, select colors from the drop-down box under Custom Colors. 5. Click OK in the Table Properties dialog box. NOTE: If you want to use tables to lay out graphics, you can create an invisible table by choosing a zero setting in the Border Size box. FrontPage will still display the gridlines in Normal View so it will be easier for you to work with your table. However, these lines are for your reference only. They will disappear in Preview mode and your web site visitors will not see them.

Now it's time to add a background color to the table. It's a lot like adding a background color to a web page.

Be careful - not all browsers will support background colors in a table

Right, the Browser Wars of the early 21st Century. I learned all about that in Star Wars, Part 27.

Adding background colors You can add a background color to your entire table - but be careful. While Internet Explorer 4 recognizes background colors in tables, other browsers may not. If you want to make sure that your text will be legible in all browsers, choose a text color that is in sharp contrast to your web page background. If the table's background color does not appear in your visitor's browser, people will still be able to read the text. To add a background color to a table: 1. Position the cursor in the table. 2. Click Table on the Menu bar and select Table Properties. 3. Select a color from the Background Color drop-down box. 4. Click OK in the Table Properties dialog box.

Uh oh. We've run out of rows and columns and we still have more teenagers to describe. We're really fizzer-razzled now!

Chill, Pixel. We can add rows and columns to existing tables with ease.

Adding rows and columns To add a new row: 1. Place the cursor in the bottom-right cell. 2. Press the TAB key on your keyboard. To add a column: 1. Place the cursor in a cell next to where you want to add a column. 2. Click Table on the Menu bar and select Insert Rows or Columns. You will see the Insert Rows or Columns dialog box. 3. Click the Columns radio button, then adjust the spin controls on the Number of Columns box. 4. Click OK to close the dialog box.

Let's add some cell padding and spacing so our table has breathing room.

Defining cell padding and cell spacing "Cell padding" refers to the amount of space between the edge of the cell and the text or image within it. "Cell spacing" refers to the amount of space between each cell. When you adjust these two attributes, your selection will apply to the entire table. In other words, you cannot apply cell padding and cell spacing to only specific cells. To define cell padding and cell spacing: 1. Position the cursor in the table. 2. Click Table on the Menu bar and select Table Properties. 3. To adjust the padding and spacing, adjust the spin controls for the Cell Padding and Cell Spacing boxes. 4. Click OK in the Table Properties dialog box.

Hey, Blip. Our table is looking pretty good, but our columns and rows are all different widths and heights. If we don't fix them, we're going to lose marks for 'neatness'.

That's using your neuro-waves, Pixel! Lucky for us, FrontPage has a couple of commands that will help us tidy-up our columns and rows.

Changing cell width and height To make all your table columns and rows equal in width: 1. Select an entire row or column. You can do this by placing the mouse pointer above the top border or next to the left-hand border of your table. Once the pointer turns into an arrow, click your left mouse button once. 2. Click Table on the Menu bar and select Table Properties. 3. Click on Distribute Columns Evenly or Distribute Rows Evenly. To adjust cell height and width: 1. Position the mouse pointer over a border until it turns into a double-headed arrow. 2. Hold down your left mouse button, then drag your mouse left or right, up or down, to adjust the cell size. 3. Release the mouse button to lock the border into place. NOTE: You cannot make this adjustment to the left-edge and top-edge borders.

We'd better align the pictures in the cells so they're nice and centered. Neatness marks can make or break a good project!

Aligning objects in cells You can align objects in cells - vertically, horizontally, or centered. There are two ways to do this: To horizontally align objects in a cell: 1. Select the text or image in the cell. 2. Click one of the alignment buttons on the Format toolbar to Align Left, Center, or Align Right the object. To vertically align objects in a cell: 1. Select the text or image in the cell. 2. Click Table on the Menu bar and select Cell Properties. 3. Select an alignment option from the Vertical Alignment drop-down box. 4. Click OK in the Cell Properties dialog box. NOTE: If you select Bottom, the object will align with the bottom of the cell. If you select Baseline, the object will align with the bottom of the cell's largest text.

Okay. Our table is working out well, but I want to push the limits. What do you think about putting a table inside a cell?

A table inside a table? Now you're making my head explode. Okay, let's try it.

Putting a table within a table You can place a table into a cell - creating a table within a table. You may want to do this if you have a very complex graphic layout and need to align objects in particular way. Nested tables are also helpful if you need to add more white space to one particular cell. To place a table within a table: 1. Place the cursor in the cell into which you want to add a table. 2. Click the Table button on the Standard toolbar. 3. You will see a drop-down grid. Select the number of columns and rows you want by holding down your left mouse button and moving the pointer down and to the right. A table will appear when you let go of your mouse button. NOTE: Putting a table within a cell can make cell alignments and attributes much more complex - so be prepared to experiment. It's also a good idea to see what your table looks like in a few different browsers. Even different versions (i.e. Version 3, 4, or 5) of the same browser may present nested tables differently.

Using tables for visual summaries Tables have two main uses in a web site - as a graphic layout tool, and as a way to organize information. Tables can be very useful when you are laying out a complex graphic arrangement, although it's best to try this when you have a good bit of time on your hands. Using tables for graphic layout can be tricky; you'll probably need to do some experimenting to get it right. If you're working on a tight deadline, you may want to save this fancy stuff for when you have more time to play around. When you're using tables to organize data and convey information, there are many ways to go about it. Tables are great when you want to do a key visual summary. They allow you to condense stories, processes, debates and other information in a straightforward and simple way. Here are a few examples: 1. Comparing and contrasting two objects, people, or places For example, let's say you are comparing apples and oranges. Make a table with two cells across and several cells down. Type APPLES at the top of one column and ORANGES at the top of the other. Then list all the qualities of apples in cells under the first column, and all the qualities of oragnes under the other column. You can also add a third column on the left-hand side to label the qualities that you are describing. For example, color, shape, taste, etc. Comparing Apples and Oranges APPLES ORANGES Color Red, Green Orange Shape Round Round 2. Timeline steps in a process or life span Let's say you want to present the career of a famous sports star. Make a table with two rows and as many columns as you need for the different time periods. Enter the year of the event in the top row, then enter the event description in the bottom row. The Career of Slam Jones 1988 1989 1993 1994 Played for all-state team First-string player for Indiana First round draft pick for Chicago Won Rookie of the Year award 3. Reasons for and against something This is similar to the comparing and contrasting table described above. Make a table with two cells across and several cells down. If you are debating the "Reasons For and Against Midnight Snacks", place REASONS FOR at the top of one column and REASONS AGAINST at the top of the other. Type your reasons into each of the columns. 4. Parts and functions Let's say you are explaining the different parts of a computer. Make a table with two cells across and several cells down. Into the cell on the left, type "keyboard." Into the adjacent cell on the right, type in "for typing." Continue on, describing all the different parts. Parts of a Computer Part Function keyboard for typing monitor for viewing information mouse for selecting items