Using Tables and Table Layouts
FIGURE 5.21 The Tables toolbar
3. Choose the format that you want to use for your table by using the Formats list in the Table AutoFormat dialog box, as shown in Figure 5.22. Choosing a format shows a preview of the format in the Table AutoFormat dialog box.
FIGURE 5.22
The Table AutoFormat dialog box
4. Use the Formats to apply and Apply special formats sections to specify where you want to apply the styles configured in the format selected in step 3.
5. Click OK. A new table with auto formatting is created.
When you apply auto formatting to the table, a number of CSS styles are created inside the Web page. These styles are used to implement the formatting applied to the table and can be modified by using the CSS SharePoint Designer interface.
SharePoint Designer also inherits the FrontPage 2003 feature for creating and managing tables and cells called Table Layouts. A layout table or cell is nothing but an HTML table or cell that has SharePoint Designer layout tools enabled for it. Layout tools provide for resizing and management of the tables. As mentioned earlier, you can have the layout tools enabled for a table inserted by choosing Table ➪ Insert Table and then clicking the Enable layout tools check box in the Layout Tools section.
You can insert layout tables and cells by using the Layout Tables task pane, as shown in Figure 5.23. You access this task pane by choosing Task Panes ➪ Layout Tables.
The Layout Tables task pane has some default layout plans for tables that you can use to design your Web pages. These layout tables are listed in the Table layout section of the Layout Tables task pane. To insert a layout table based on a template, simply open a Web page, place the cursor at the location where you want the layout table to be placed on the page, and then click the template in the task pane.
The following exercise can help you understand how you can use the layout tools to design your tables in SharePoint Designer. If used correctly, layout tools can be of great help in resizing and formatting table layouts. In this exercise, you use the Layout Tables task pane to create a new lay-out table and then insert and resize laylay-out cells in it:
1. Create a new HTML page by choosing File ➪ New. The New dialog box opens. Ensure that the Layout Tables task pane is enabled by using the Task Panes menu option.
2. Click the Insert Layout Table button in the Layout Tables task pane. A new table with one row and one column, with layout tools enabled, appears on the Web page. By default, a layout table is represented with a green border in the Design view when you hover over the table border. You can click the green border to see the resizing tools. You can view the properties of this table by using the Table Properties dialog box, just like with any other HTML table. On all four sides of the table, you have dropdown menus showing the width of that side. Clicking on the dropdown menu on the top or the bot-tom of the table shows these options:
n Change Column Width: Allows you to change the width of the selected column n Make Column Autostretch: Specifies the width in percentages and uses it to
auto-stretch the columns based on the width of the page
n Use Column Spacer Image: Inserts a placeholder image (a white-colored image of the width and height of the column) in the table cell
3. Click the dropdown menu for the top table side and then choose Make Column AutoStretch. The display text of the dropdown menus on the top and bottom sides changes to reflect the percentage of page width being used.
4. Place the cursor inside the layout table you just inserted and then click the Insert Layout Cell button on the Layout Tables task pane to open the Layout Cell dialog box.
FIGURE 5.23
The Layout Tables task pane
5. Keep the defaults in the Layout Cell dialog box and then click OK. The one cell that exists in the layout table is now converted into the Layout Cell. By default, a layout cell is represented by a blue border in the Design view. You can click the blue border to enable the resizing tool for the layout cell.
6. Use the resizing boxes (small square boxes) on the blue border to resize the layout cell to half the height and width of the layout table.
7. Ensure that the layout cell is selected (a blue border shows with the resizing boxes) and then click the Insert Layout Cell button on the Layout Tables task pane. The Insert Layout Cell dialog box opens.
8. In the Insert Layout Cell dialog box, click the Vertical radio button in the Layout section and then click OK. This ensures that the new layout cell is inserted vertically next to the existing layout cell.
9. Using the resizing boxes, change the height of the new layout cell to half the height of the layout table.
10. Click the layout cell inserted in step 8 and then click the Insert Layout Cell button in the Layout Tables task pane to insert another layout cell in the table.
11. Keep the defaults in the Insert Layout Cell dialog box and then click OK.
12. Change the width of the newly created cell to half the width of the table.
13. Click the Insert Layout Cell button again to insert another layout cell vertically after the cell inserted in step 10. In the Insert Layout Cell dialog box, click the Vertical radio button in the Layout section.
14. Click OK.
TIP TIP
Avoid randomly resizing the layout cells and columns, as that may create unwanted new cells in the layout table. Instead, make room for the new cell by systematically resizing the existing cells and then fill the empty table space (indicated by a gray background) with a new cell.You now have a layout table with four layout cells in it. If you click the Code view tab, SharePoint Designer recognizes layout tables by using HTML comments placed inside the HTML code of the table and the cell:
<table cellpadding=”0” cellspacing=”0” style=”width: 986px; height:
450px”>
As highlighted in the previous code, there’s one layout table and four layout cells.