ZAMBAK_IT_ExpressionWeb2

17

2

10

4

6

3

9

85

3

Buildin Your Web Site from Scratch 51

52 Chapter 3

Table Uses

The traditional use of tables is to display information in columns and rows – similar to how they are used in other Microsoft Office programs: spreadsheets, word processing programs etc. Another usage of tables is to lay out text and images as a graphic design tool on your web page. Tables can firmly position text and images on the page and when the window is resized they will keep their places in the table.

However, layout tables are being replaced by CSS, because page-sized tables take longer to load than CSS-based layouts, and also tables cannot be easily adjusted to accommodate small displays, such as cell phones.

CSS is no doubt the future and it will eventually replace table layout, but you may still need to understand table layout if you're working with an older site and don't have time to bring it up to CSS standards. Table-based layout is easier to master than CSS layout, so you can get your site up much more quickly.

On web pages, tables can serve many functions:

Page layout

Displaying information in formatted tabular form

Adding background color and borders to blocks of text

In this chapter you will create a web site about the Solar System and we will cover how to build and format tables, for both Web page layout and data.

Laying Out a Web Page with Tables

You can create an easy-to-read, well-organized web page by using tables for laying out a page. You can build the structure of the page using tables. Keeping the same layout throughout the entire site gives you the possibility to come up with an overall design that is appropriate for all the pages. When you plan your web page layout, you need to consider in advance the various elements that will be placed in each page. You need to decide which page elements will be used

and their locations on the page.

You can use the predefined layout tables that are available in the Layout Tables and Cells task pane to help you get a quick start on a Web page. You can also create your own custom layout table by drawing tables and cells. Additionally, you can edit a Web page that

contains layout tables and cells.

To add a predefined layout table:

Create an empty web site and then build all web site pages.

54 Chapter 4

Open the default page and select Table>Layout Tables. The Layout Tables task pane opens.

Choosing a table layout

Click the Table layout which you want to use for your page.

and specify a value.

Laying Out Web Pages With Tables 55

Inserting Interactive Buttons

Expression Web allows you the ability to create professional looking rollover interactive buttons for your web pages instead of using a separate graphics program. You can choose from many ready-made buttons, specify the text you want on each button, and then buttons are automatically created for normal, hovered, and pressed states.

When you create an Interactive Button, Expression Web creates the image files for states that make up the button. When you save your Web pages, it prompts you to save the button image files.

Place your mouse pointer where you want to add the button.

Select Insert>Interactive Button. The Interactive Buttons dialog box opens

Your site appearance has been changed, but you can take the table to the center of the page and take the interactive buttons to the top of the cell to have a better view of the page.

To take the table to the center of the page;

Right click on the page, and select Table Properties.

Placing the table at the center

Select Center for the Alignment in the Layout section. To take the interactive buttons to the top of the cell;

Right click in the cell, and select Cell Properties.

Placing vertically at the top

Select Top for the Vertical Alignment in the Layout section.

Save and preview the page to see the changes.

Previewing a

Web site

Laying Out Web Pages With Tables 57

Creating a Table

Before you create a table, you must specify how many columns and rows it will contain. If it is not certain you can add or delete rows and columns later.

To insert a table:

Open the default page and place the cursor where you want to insert the table.

Select Table>Insert Table. The Insert Table dialog box opens.

Inserting a new table

Specify how many columns and rows you want to create in the Insert Table dialog box.

Specifying table size

Click OK to see the inserted table. Another way to create a table:

Click the Insert Table button on the common toolbar.

Drag the mouse over the grid, highlighting the cells that should appear on the table. When the table size has been selected, release the mouse button.

Specifying table size

The table is inserted into the web page. Tables are displayed as an empty grid when they are added to a page

Resize the cells by putting your cursor on the cell divider and dragging it.

58 Chapter 4

If you have a table of varying row heights and column widths, you can equalize the width or height of selected rows or columns:

Select the rows or columns which you want to make an equal height or width.

Select Table>Modify>Distribute Rows Evenly or Distribute Columns Evenly.

Adding text to cells

Click your cursor within a cell and begin typing.

When you're filling out a table, you can press the Tab key to jump to the next cell on the right (or the next row) or press the Shift and Tab keys simultaneously to move in the opposite direction.

Formatting a Table

Changing Table Size and Alignment

Select Table>Table Properties>Table. The Table Properties dialog box opens.

Specify a value for table width that determines how big you want your table to be by using Specify width in the Table Properties dialog box.

Specify width: You can have a fixed width (In pixels) or a width relative to the page (In percent - it will be resized automatically when you resize your browser window). If not defined, your table will grow horizontally to fit the content you place inside of it.

Laying Out Web Pages With Tables 59

Deleting Rows or Columns

Select the row or column which you want to delete by selecting

Table>Select>Row or Column.

You can also select the row or column by moving the cursor around the border until it changes to a small black arrow that points at the table and clicking.

Select Table>Delete>Delete Columns or Edit>Cut or

Right click and select Delete>Delete Rows or Delete>Delete Columns.

Defining Borders

To make the borders visible:

Select the table by clicking Table>Select>Table.

Select All Borders from the common toolbar.

Making table borders visible

Now the table borders are visible.

You can specify the border size and color.

Right click on the table and select Table Properties. The Table Properties dialog box opens.

Opening Table

Properties dialog box

Specify the Size and Color in the Borders section.

If you set the Size to 0, the border and all of its grid lines will disappear.

Check the Collapse table border box to make the table border solid, instead of the default bevel style.

Making table border solid

60 Chapter 4