Section 53. Customize Your Table for Effective Page Layout

53. Customize Your Table for Effective Page Layout

BEFORE YOU BEGIN

6 About Proper HTML Coding

SEE ALSO

35 Add a Table

48 Use the HTML Views

When the table is inserted into the page, it is a container with no set boundaries, which means it is going to expand to fit any content inserted. This makes a great holder for the content. Keep in mind that you can section up your page to a point, but you have to work with the size and format of the table to force the table to "lock down" so that, as you add text, it shapes the content rather than having the content shape the table.

1.	Click on a Resize Handle and Resize the Table Click anywhere in your table and notice that the table gets small square resize handles on the sides and corners. Click on any resize handle and drag it in. See how it shapes your web page. Note that the table resizes and the text in the table reflows to match the new widths of the columns that were automatically changed when the table width was reduced.
2.	Click on the Delete Widget to Delete a Table Row Click in any cell and delete the row by clicking on the delete widget that appears on the edge of the table cell. KEY TERM Widget A small and nonobtrusive piece of user interface in a program that enables you to change some property or execute some action more or less at the location of the change, rather than in a menu or a toolbar. It is very easy to delete a row of cells . This happens most often when you create a table with more rows or columns than you end up using in your final layout.
3.	Click on the Create New Row Below Widget to Create a New Row Click in any cell, but avoid using the headline. Then create a new row by clicking on the Create New Row Below widget. A new row appears. You can add a row above by clicking on the Create New Row Above widget. You can also add and delete columns in the same way with the widgets at the top of each selected cell. These abilities mean you can add new content by moving or deleting existing rows at will. You, not the software, are in control!
4.	Select the Column Click in any cell and then drag down across at least two cells below it to select the column. You must select at least two cells to let the software know you want a column, not just a cell or two. Also, if you click and drag across two or more cells, you are selecting the cellsnot their contents. 53. Customize Your Table for Effective Page Layout
5.	Right-Click on the Cells to Set the Cell Properties Right-click on the selected cells and select Table Cell Properties from the context menu, or go to the Table menu and select Table Properties . The Table Properties dialog box appears and has two tabs that are loaded with attributes that you can apply to the table. On the Table tab of the dialog box, you can set the number of columns and rows, the width and height of the table, the border width of the table, and the spacing and padding of the cells, which enables you to add space around the edges of the tables. Padding adds space between the content and the edge of the cell, making more room around the edges of the table. Cell spacing makes the space between two cells wider. The Cells tab of the dialog box has all the attributes you can assign to either individual cells or to groups of cells in columns or rows. You can modify your selection in the Selection area, which makes it easy to select a whole column or row if you haven't done so before you opened the dialog box. In the Size area, you can set the width and height of the selected cells. The Content Alignment area enables you to control where the content in your cells lines up. The Cell Style drop-down box enables you to set the cell as a normal cell or a header cell (the difference between which is beyond the scope of this book). The Text Wrap is a handy drop-down box that enables you to adjust content that won't wrap or continue to the next line. You can select cells and can set column headings that won't resize, no matter what the user does on his screen. Experiment and enjoy the control you will have over your page format. Want more customizations? The background color lets you set a color for the cells that is either the color of the page background or some other color to enable you to set a row or column off. TIP The best way to figure out how to use Cell Padding and Cell Spacing is setting the padding to 10 or so. Now set the border width to 10 or 20. That is one change. Now set the spacing to 10 or so and the border width to 10 or 20. Observe the changes carefully .
6.	Set the Width of the Cells Set the width in the Size area of the Cell tab of the Table Properties dialog box to 200 pixels and then select the check box next to it. Click the OK button to apply the change and save the file. The column with the headline should now be only 200 pixels wide, which should make it quite narrow compared to the right column with the text. Try other values and compare the effects.