Creating Layout Tables in Microsoft Expression Web
Posted by: Minal Agarwal
in Category Expression Web
Abstract: Tables were initially introduced to present data in an organized manner. And because of ease to manage and present data, tables were started gained popularity and were used to structure the layout of the pages. Even though CSS layouts are widely used, table layouts are popular too, among designers. Microsoft Expression Web has incorporated different tools for creating conventional tables and layout tables. In this article, we will explore the layout tables.
Creating Layout Tables in Microsoft Expression Web
Tables were initially introduced to present data in an organized manner. And because of ease to manage and present data, tables were started gained popularity and were used to structure the layout of the pages. Later CSS (Cascading Style Sheets) was introduced and is now widely used for laying out web pages. Even though CSS layouts are preferred over tabular layouts because of their own advantages, some designers still prefer to use table layouts. Microsoft Expression Web has differentiated between the ‘conventional tables’ (to present and organize data) and ‘layout tables’ (to design web pages) by providing different set of tools to create and modify tables as per their usage.
Though in HTML a table and a table layout is the same; Expression Web offers separate tools for creating and editing tables and table layouts. In Expression Web the ‘Layout Tables tool’ lets you create a table layout in your web page. In this article we will explore this Layout Tables tool.
The Layout Tables Task Pane
The Layout Tables Task Pane is through which Expression Web offers the tools to create a table layout. Follow these steps to launch the ‘Layout Tables’ task pane:
1. Launch Microsoft Expression Web and choose File > New > Page. In the New dialog box choose General > HTML page and click on OK.
2. Go to the Task Panes menu and click on Layout Tables
If your workspace already has Tag Properties or CSS Properties task panes open, this task pane will be docked next to them. Maximize the Layout Tables task pane to be able to see all the options.
Let us explore the toolbar. The toolbar is divided into 3 principal sections:
1. New tables and cells
This section contains the options that allow you to create a table.
a. Insert Layout Table - link creates a one cell layout table.
b. Insert Layout Cell… - inserts a cell into your table. As you click on this link the ‘Insert Layout Cell’ window is prompted as shown below:
Choose to insert a cell with horizontal (fixed width), vertical (fixed height) or inline layout and specify the dimensions that are within the range of the original table. For example, in the above screenshot the width for the horizontal cell layout is 450px and is grayed out, because the table layout created is 450px wide and hence the new cell to be inserted cannot exceed this width. You can also choose the location for the cell.
c. Draw Layout Table - To draw a table layout click on this button, and then use the pointer to click and drag to create a table anywhere you want.
d. Draw Layout Cell - To draw a table cell into your table. To insert multiple cells, click on the button, hold down the CTRL key while you click and drag your mouse pointer.
e. Show Layout Tool - This is a very handy tool since it selects a particular element, like a cell or the whole table and lets you modify the properties of the element (resize) or delete it. Place your cursor into the cell or table and click on Show Layout Tool, the whole element will be selected.
2. Table Properties
This section lets you edit the properties such as
a. Width - Changes the width of the table.
b. Height - Changes the height of the table.
c. Alignment - Sets the alignment of the table on the page to left, right or center align.
d. Auto-Scale Cells with Table - Lets you automatically adjust the width of the table to the sum of its cell width.
e. Set Page Margins - Prompts you with the ‘Advanced tab’ of the ‘Page Properties’ window.
Set margins for your page here.
3. Table Layout
This is the coolest of them all. Expression Web has designed some tabular layouts for you. You can just browse through all of them and then to insert one that you like just click on it. Whoa! It’s done! The particular tabular structure is inserted on your page and you can adjust the inner structure as you want.
Creating and formatting a table layout
Let us take an example and create a table layout to help you understand.
To create and resize a table layout
1. Go to New > Page > HTML page and create a new page. Launch ‘Layout tables’ task pane as shown above if not already present in the workspace.
2. Click on the Insert Layout Table to automatically let Expression Web to insert one cell table in your page. Or click on Draw Layout Table button and hold down the mouse pointer and drag it to create one cell table of desired width and height. In either case you can take your mouse pointer to the corners (denoted by black dots) and/or the edges of the layout (where green dots are displayed) and adjust the dimensions.
To add and resize cells in the table layout
1. Choose ‘Insert Layout Cell’ and in choose the options (discussed above) in the Insert Layout Cell window.
2. Or choose Draw Layout Cell button, bring your pointer to the table layout (in design mode) hold down the mouse at the location where you want to draw the cell, drag the pointer and release when you are done.
3. To insert multiple cells, click on the button, hold down the CTRL key while you click and drag your mouse pointer.
4. You can adjust the dimensions of the cell. First select the cell by clicking into it or clicking on ‘Show Layout Tool’ to highlight the table, and then place your mouse pointer on any of the black and green dots placed on the edges of the cell you want to resize, you will notice a change in the cursor, drag to resize the cell and release.
5. To move a cell, hover over your mouse pointer over the edge of the cell, when the cursor transforms to cross-arrows (move).
6. Whenever you highlight the entire table with the Show Layout Tool, Expression Web displays the dimensions of the entire table and all the cells. Each dimension has a small green down arrow besides it. See image below:
These arrows denote a drop down menu for each row and column. These menus are self explanatory. The row menu allows you to ‘Change Row Height’ and ‘Make Row Autostretch’. The column menu allows you to ‘Change Column Width’, ‘Make Column Autostretch’ and ‘Use Column Spacer Image’.