Creating Layout Tables in Microsoft Expression Web

Posted by: Minal Agarwal , on 2/28/2009, in Category Expression Web
Views: 40616
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
      Task Panes menu
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.
Layout Tables Task pane
 
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:
Insert Layout Cell window
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.
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.
     Create Table
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:
     Add cells to table
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’.
I hope you this article was a value addition. If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Marek Gronowski on Friday, December 2, 2011 3:25 AM
Hi Minal, Thank you for your very helpful article! I still have an embarrassingly simple question: How to fix the column width in Expression Web? When I create a Layout Table and start typing in a cell, that cell will expand and the text line will not break/wrap but will push the right border.

Thanks a lot,
Marek
Comment posted by Marek Gronowski on Friday, December 2, 2011 11:00 AM
Hi Minal, Thank you for your very helpful article! I still have an embarrassingly simple question: How to fix the column width in Expression Web? When I create a Layout Table and start typing in a cell, that cell will expand and the text line will not break/wrap but will push the right border.

Thanks a lot,
Marek
Comment posted by Boskh on Monday, December 5, 2011 6:06 AM
@Marek - I think you have somewhere set the property to 'No Wrap'. If a width is associated with a cell where No Wrap is enabled, and the content exceeds that width, the cell automatically gets stretched. SO remove the No Wrap property.
Comment posted by ormondron on Tuesday, January 24, 2012 11:47 AM
What version are you referencing, I have ew 4 and I am not able to follow your instructions. Maybe it is me since I am a newbe.

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook