Creating Tables of Data

Tables are useful for cordoning off individual bits of data into cells, which are little boxes arranged in horizontal rows and vertical columns. Figure 10-1 shows a data table in the Expression Web Design view.

Figure 10-1: Data table in Design view.

Inserting a data table

Expression Web has several methods for creating a data table. This one is the easiest and fastest:

1. Place the cursor in the page where you want the table to appear.

2. On the Common toolbar, click the Insert Table button.

   A grid of white boxes representing table rows and columns appears underneath the button.

3. Click and drag your cursor on the grid until the number of highlighted boxes equals the number of rows and columns you want your table to contain (see Figure 10-2).

   
   Figure 10-2: Using the Insert Table button.

   As you highlight boxes, the number of rows and columns appears at the bottom of the grid.

   If you don't know exactly how many rows or columns you need, just pick something close. You can add or delete rows and columns later.

4. Release the mouse button.

   A new, empty table appears in your page, indicated by gray dotted lines.

Scrunching existing text into a data table

If you already have text that you want to format into a data table, either in Expression Web or in a word processing program, you can convert text separated with commas or another character into a table. To do so, follow these steps:

1. In your word processing program (or a text editor, such as Notepad), type the text for your table. If the text is already in Expression Web, skip to Step 5.

   Separate each line of text that you want to appear in its own row by placing the text inside its own paragraph. Section each row into "columns" by separating the text with commas or some other character. Do not apply any formatting to the text.

   Don't worry if the spacing is uneven-everything lines up nicely when you convert the text into a table.

   Warning 

   We don't recommend using tabs to separate bits of data. Expression Web interprets them as nonbreaking spaces, which makes a mess in your code. Use commas or some other character, and refrain from putting spaces between the characters and the chunks of data so that no extra spaces end up in your table that you later have to delete.

2. Select and copy all the text to the Windows Clipboard.

   Use your word processing program's Edit Copy command or Ctrl+C.

3. In Design view, insert your text on the page by pressing Ctrl+V, or choose Edit Paste.

   The text appears on the page, with the Paste Options button next to it. Some programs, such as Notepad, don't cause the Paste Options button to appear.

4. Click the down arrow next to the Paste Options button and select the Remove Formatting option.

   This step removes all coding from the text carried over from the word processing program. If you don't see a Paste Options button, ignore this step.

5. Highlight the text and then choose Table Convert Text to Table.

   The Convert Text to Table dialog box appears.

6. Select the option next to the text separator that you want Expression Web to recognize when it creates columns.

   If the text separator in your page isn't a comma, select the Other option and then, in the accompanying text box, type the text separator character.

7. Click OK.

   The dialog box closes, and a table materializes around the selected text, indicated by gray dotted lines.

Tip 

You can copy a data table from Excel, and Expression Web already recognizes it as a table, preserves row heights and column widths.

Inserting stuff into a table

After your table is on the page, you can insert anything into a table cell that you can insert into a regular paragraph: text, pictures, and even other tables. Just click inside a cell and proceed as usual. By default, the cell height and width stretch to accommodate whatever you place inside, so don't be alarmed if your table cells grow and shrink as you type and insert stuff. The table settles down and behaves itself after you get all its cells filled.

Text entered into a cell wraps as you type, which means that, when the text reaches a cell boundary, the word being typed jumps down to a new line. You create line breaks by pressing Enter or Shift+Enter.

Tip 

A block of text that you enter within a table cell is not by default a paragraph (<p>). If you want to format the cell as a paragraph, select the text and, on the Common toolbar, select Paragraph <p> from the Style drop-down list. We talk about how to format text in Chapter 3. Defining text as a paragraph allows you to create a style rule that specifies how the paragraph looks.

If you're ready to type text in another cell, press Tab until the cursor ends up in the destination cell, and then type away. If you press the Tab key when the cursor is sitting in the last cell in the bottom row of the table, a new table row appears, and the cursor jumps to the first cell in that new row so that you can continue to add to the table. To move the cursor backward through a table, press Shift+Tab.

GLANCE AT THE CODE 

Take a look at the code for an inserted table that we typed some text into:

 <table style="width: 100%"> <tr>           <td>Tree</td>           <td>Vine Maple</td> </tr> <tr>           <td>Shrub</td>           <td>Red Twig Dogwood</td> </tr> <tr>           <td>Perennial</td>           <td>Sedum &#39;Autumn Joy&#39;</td> </tr> <tr>           <td>Annual</td>           <td>Sunflower</td> </tr> </table> 

Notice that the first tag is <table>, which tells the browser to expect a table. The matching closing tag, </table>, tells the browser that the table is done. The opening tag contains an inline style rule (<table style=“width: 100%”>) that tells the browser to make the table as wide as the browser window (or other containing element, such as a <div>; we talk about <div> elements in Chapter 8). This property value is the default width for a new, unformatted table.

If Expression Web is set to write width as a class-based style rather than inline (see the earlier sidebar "Taming tables with CSS styles"), the width is written in a style rule rather than inside the table tag, like this:

 .stylex {          width: 100%; } <table > 

Next comes the data itself. Each row of data opens with the <tr> (table row) tag that tells the browser where a new row of cells starts. The closing tag </tr> indicates where each table row ends. Nested within each set of <tr></tr> tags, each chunk of data (in this case, text) appears between its own set of <td></td> (table data) tags. Each set of <td></td> tags represents a single cell in the table. The following line of code shows the nesting order of table tags:

 <table><tr><td>data in a single cell</td></tr></table> 

If you insert a blank table, each <td></td> tag set looks like this:

 <td>&nbsp;</td> 

The &nbsp; "character" is a nonbreaking space. (If you press the spacebar while typing in Design view, you get these, too.) Expression Web uses non-breaking spaces as placeholders until you insert something else in the table's cells.

Whew! Aren't you glad that Expression Web takes care of adding all those HTML tags?

Selecting table parts

This section's heading sounds like something you do at a hardware store. But we're talking about how to select different parts of your table in order to format them in some way. Here's how you select the following table parts:

• Cells: To select a single cell, click inside the cell and then choose Table Select Cell. Or, on the Quick Tag Selector bar, click the <td> tag. To select more than one cell, select the first cell and then press and hold down the Ctrl key as you click each cell. Or, right-click and, from the pop-up menu that appears, choose Select Cell.

• Columns: To select a column, click inside the topmost cell in the column and then choose Table Select Column. Or, right-click and, from the pop-up menu that appears, choose Select Column. Or, pass the cursor over the table until the cursor hovers just above a column. The cursor turns into a stubby downward-pointing arrow. Click once to select the column. To select more than one column, select the first column and then drag until you highlight the area you want.

• Rows: To select a row, place your cursor in the leftmost cell and choose Table Select Row. Or, right-click and, from the pop-up menu that appears, choose Select Row. You can also pass the cursor over the left side of the table until the cursor hovers just to the left of a row. The cursor turns into a stubby arrow pointing to the right. Click once to select the row. To select more than one row, select the first row and then drag until you highlight the area you want. Or, on the Quick Tag Selector bar, click the <tr> tag.

• Entire table: Choose Table Select Table. Or, right-click the table and, from the pop-up menu that appears, choose Select Table. Or, on the Quick Tag Selector bar, click the <table> tag.

Changing a data table's dimensions

You have two options for controlling the dimensions of your table: Give the table absolute measurements (a fixed size) or proportional measurements (the particulars of which are based on the size of the visitor's browser window).

You may be tempted to opt for absolute measurements so that you can retain control over the table size. Consider, however, the unfortunate visitor who must view your page inside a small or low-resolution monitor. That visitor may need to scroll all over the place to see the table in its entirety and may curse the inconsiderate person who created such a table. By using proportional measurements, you enable the visitor's browser window to determine the dimensions of the table. You give up precise control, but your visitor gets to see the entire table, no matter what the monitor or window size.

Another option is to forgo specifying the table's height and width altogether. If you do this, the table stretches to accommodate the dimensions of whatever sits inside the table's cells, and no more.

Tip 

A good middle ground is to specify widths for columns rather than the dimensions of the table as a whole, and to let the content determine the height. In this way, you can give some columns an absolute width and give others a proportional width, creating a more flexible table. In the "Changing cell, row, and column dimensions" section, later in this chapter, we show you how to change column dimensions.

To reduce the overall percentage width of your table, hover the cursor over the little round handle in the middle of the table's right border until the cursor turns into a two-sided arrow. A tip pops up, telling you the percentage width of the table. (If you inserted a table and didn't fiddle with it yet, the width is 100 percent.) Click and drag the mouse to the left until the width matches the desired percentage. This action maintains the table's proportional dimensions, but changes its width in proportion to the page or its containing element (such as a <div>; we talk about <div> elements in Chapter 8).

REMEMBER 

Don't get frustrated if it takes a few tries to get what you want. When you're trying to select exactly what you want with the cursor, it can be a little squirrelly.

If you want to fine-tune your table's dimensions, follow these steps:

1. Right-click the table and, from the pop-up menu that appears, choose Table Properties.

   The Table Properties dialog box appears, as shown in Figure 10-3.

   
   Figure 10-3: The Table Properties dialog box.

2. In the Table Properties dialog box, select the Specify Width check box and, in the corresponding text box, type the width of the table.

   To specify a proportional width, type the width of the table as a percentage of the width of its containing element (such as the browser window or <div>). For example, if you type 50, Expression Web sets the width of the table at 50 percent, or half the width of the browser window or containing element. To specify an absolute width, type the table width in pixels. To turn off table width specifications, deselect the Specify Width check box.

3. Select the option that corresponds to the measurement you specified in Step 2.

   If you specified a proportional width, select the In Percent option. If you specified an absolute width, select the In Pixels option.

4. If you want to specify a table height, select the Specify Height check box; in the corresponding text box, type the table's height in pixels or as a percentage value, and then select the corresponding option.

5. Click OK to close the dialog box and change the table size.

Aligning a table

You can left-align, right-align, or center a table on the page or inside its containing element. Just follow these steps:

1. Right-click the table and, from the pop-up menu that appears, choose Table Properties.

   The Table Properties dialog box appears.

2. In the dialog box, choose an option from the Alignment list box.

   Your choices are Default, Left, Right, and Center. The Default option uses the visitor's default browser-alignment setting, which is left aligned.

3. Click OK.

   If you want to preview the table's alignment before saving changes, click the Apply button.

GLANCE AT THE CODE 

When you specify alignment for the table, Expression Web inserts the align attribute in the table's opening tag, like this:

 <table align="center"> 

Wrapping text around a table

Similar to a picture, adjacent text can wrap around the right or left side of a table. This effect is referred to as floating the table. To make your table float, do the following:

1. Right-click the table and, from the pop-up menu that appears, choose Table Properties.

   The Table Properties dialog box appears.

2. In the dialog box, choose an option from the Float list box:

   • Default: Creates no floating effect

   • Left: Causes the table to float over to the left margin, with adjacent text wrapping around its right side

   • Right: Causes the table to float over to the right margin, with adjacent text wrapping around its left side

3. Click OK to close the dialog box and change the table's floating setting.

GLANCE AT THE CODE 

Expression Web uses the CSS property float to align the table with its surrounding elements, which it inserts in the table's opening tag as an inline style or into an existing or new class-based style. (See the earlier sidebar "Taming tables with CSS styles.") Here are the two style properties (inline is listed first):

 <table style="float: left;"> .stylex  {           float: left; } 

Inserting blank space inside or between table cells

Adding space between the contents of table cells and their cell borders is known as cell padding. Padded cells open a table by placing white space around the contents of each cell. Figure 10-4 illustrates the difference a little padding makes. The table on the left contains no cell padding, and the table on the right has 5 pixels of cell padding applied. (We made the cell borders gray so that you can see them.)

Figure 10-4: The difference that cell padding makes.

Cell spacing determines how much space exists between cells and also affects the appearance of table and cell borders. Figure 10-5 illustrates how changes in cell spacing affect a table. The table on the left contains no cell spacing, and the table on the right has 5 pixels of cell spacing applied to it.

Figure 10-5: The difference that cell spacing makes.

To change cell padding or spacing, follow these steps:

1. Right-click the table and, from the pop-up menu that appears, choose Table Properties.

2. To enlarge the area between cell contents and their borders (cell padding), in the Cell Padding text box in the dialog box, type the desired amount of padding (in pixels). To add space between the cells, in the Cell Spacing text box, type the desired amount of spacing (in pixels) separating table cells.

3. Click OK to close the dialog box and change the cell padding and spacing settings.

GLANCE AT THE CODE 

When you change a table's cell padding or cell spacing, Expression Web inserts these attributes in the opening table tag:

 <table cellpadding="2" cellspacing="5"> 

You can specify cell padding with the CSS padding property (padding-top or padding-right, for example), which allows you to set padding differently around each side of the cell (create a style rule that targets the <td> tag). You can also use CSS in different ways to control the space between cells, rows, and columns. See the earlier sidebar "Taming tables with CSS styles" for more information.

Adding borders to data tables

In Expression Web, tables are born naked, without visible borders, although you can see them in Design view-light gray dotted lines, dutifully holding your data in tidy rows and columns. Figure 10-6 illustrates what a default table looks like in a browser.

Figure 10-6: A borderless table in a browser.

Tables have two types of borders:

• Cell border: Surrounds individual cells

• Table border: Surrounds the entire table

You set cell and table borders separately.

REMEMBER 

Expression Web controls both cell and table borders by creating CSS style rules, which gives you a lot of control over the border line style (solid, dotted, or dashed, for example), width, and color. You can have Expression Web write style rules for you as you format the borders, or you can write your own style rules by using the border properties. (We tell you how to create new styles in Chapter 7.)

To add cell borders, follow these steps:

1. Select all the cells in the table.

   For tips on how to select cells in a table, see the section "Selecting table parts," earlier in this chapter.

2. Right-click the table and, from the pop-up menu that appears, choose Cell Properties.

   The Cell Properties dialog box appears, as shown in Figure 10-7.

   
   Figure 10-7: The Cell Properties dialog box.

3. In the Size text box in the Cell Properties dialog box, enter the desired border thickness in pixels.

   The number you type refers to the thickness of the border surrounding the table. (Typing 0 in the Size text box makes borders invisible.)

4. To change the border color, from the Color list box, choose the color you like.

5. Click OK to close the dialog box.

GLANCE AT THE CODE 

This example shows you how Expression Web sets borders for table cells by writing a class-based style rule:

 .stylex  {           border: 1px solid #008000; } <td >cell contents</td><td            >cell contents</td> 

Notice that Expression Web inserts the class in each cell by inserting class=“stylex” in each <td> tag, which means that you have to select each cell that you want formatted. (See the section "Selecting table parts," earlier in this chapter.)

To add table borders, follow these steps:

1. Right-click the table and, from the pop-up menu that appears, choose Table Properties.

2. In the Size text box in the Table Properties dialog box, enter the desired border thickness in pixels.

   The number you enter refers to the thickness of the border surrounding the table. (Entering 0 in the Size text box makes borders invisible).

3. To change the border color, from the Color list box, choose the color you like.

4. If you prefer to put a single line between cells (rather than outline each individual cell with a box), select the Collapse Table Border check box.

   This setting turns borders into thin lines.

5. Click OK.

GLANCE AT THE CODE 

This example shows you how Expression Web sets table borders and collapses cell borders by writing a class-based style rule that targets the table:

 .stylex  {           border: 1px solid #008000;           border-collapse: collapse; } <table > 

You can also control which table and cell borders appear by experimenting with the Borders button on either the Common or Formatting toolbar. To do so, select the part of the table you want to affect (or select the entire table), and then click the arrow button next to the Borders button to display a menu of options. Choose the option you want and see how your table changes.

Warning 

Because table and cell borders are controlled by class-based CSS style rules, using the options available through the Borders button can cause Expression Web to generate a ridiculous number of styles, all of which set a border on one side or another of a cell. Unless you need to set borders for a particular cell or set of cells separately, select the cells you want to format all at one time and display the Cell Properties dialog box, which applies the same class-based style to the selected cells.

Another option is to use the AutoFormat function to slap a predefined set of attractive colors, border styles, and alignment options onto your table. To do so, click anywhere inside the table, and then click the Table AutoFormat button on the Tables toolbar (choose View Toolbars Tables). In the Table AutoFormat dialog box that appears, choose a table style from the list and adjust individual options until you like what you see. Click OK to close the dialog box and apply the format. Expression Web writes all the accompanying CSS styles needed to display the table in the format you choose.

Tweaking the table with the Tables toolbar

The Tables toolbar, shown in Figure 10-8, contains tools that give you precise control over your table's individual cells, rows, and columns. Select the cells, rows, or columns you want to change, and then click one of the buttons. Table 10-1 gives you the lowdown about what each button does.

Figure 10-8: The Tables toolbar.

Table 10-1: Table Options on the Tables Toolbar
Open table as spreadsheet

Button	Button Name	What It Does
	Column To the Left, Column To the Right	Inserts a column of cells to the left or right of the selected cell.
	Row Above, Row Below	Inserts a row of cells above or below the selected cell.
	Delete Cells	Deletes the selected cells.
	Merge Cells	Removes the borders between selected cells, creating one big combined cell.
	Split Cells	Creates multiple cells from one cell; you pick options in the Split Cells dialog box that appears.
	Align Top, Center Vertically, Align Bottom	Aligns the contents of the selected cells vertically inside the cells. See the Cell Properties dialog box for additional alignment options (explained elsewhere in this chapter).
	Distribute Rows Evenly, Distribute Columns Evenly	Makes each cell in the selected row or column an equal width.
	AutoFit to Contents	Adjusts the dimensions of columns and rows in the whole table to fit their contents precisely.
	Fill Color	Adds a background color to selected cells.
	Table AutoFormat	Applies a variety of predefined table styles and customizes individual options when you select a table style from the drop-down list or click the button to display the Table AutoFormat dialog box.
	Show Layout Tool	Displays the table layout visual guides (explained later in this chapter).
	Draw Layout Table	Draws a custom-size layout table (explained later in this chapter).
	Draw Layout Cell	Draws a individual cell in a layout table (explained later in this chapter).

In addition to the alignment options available on the Tables toolbar, the Cell Properties dialog box gives you more options for aligning content vertically and horizontally within cells. To access the Cell Properties dialog box, right-click the selected cells and choose Cell Properties from the pop-up menu that appears.

Adding a single cell

You can use the options on the Tables toolbar to add entire rows and columns. But if you want to add a single cell rather than an entire row or column, follow these steps:

1. Click inside the cell next to where you want the new cell to appear.

2. Choose either Table Insert Cell to the Left or Cell to the Right.

   A new cell appears.

REMEMBER 

When you insert a single cell, the cell dislocates the other cells in the row, creating a somewhat lopsided table. That's not a problem if that's the effect you're looking for. However, if you want to add a cell to a table and maintain the table's gridlike structure, consider splitting an existing cell in two (see Table 10-1).

Adding a background picture

You can add a background picture that sits behind the contents of a single cell, a selected group of cells, or the whole table. (We show you how to change your Web page's background in Chapter 5.)

To add a background picture to a table, follow these steps:

1. Select the cells, columns, or rows you want to change. (If you're not sure how, read the section "Selecting table parts," earlier in this chapter.) To change the background settings for the entire table, right-click the table and choose Table Properties from the pop-up menu that appears.

   If, instead, you're changing the background of selected cells, choose Cell Properties from the pop-up menu. Depending on your choice, the Table Properties or Cell Properties dialog box appears.

2. Select the Use Background Picture check box and, in the accompanying text box, type the location of the background image.

   If you don't remember the file's location, click the Browse button to display the Select Background Picture dialog box. After you select the file, the dialog box closes, and the picture's location appears in the text box of the Table Properties (or Cell Properties) dialog box.

3. Click OK to close the dialog box and apply the background setting.

REMEMBER 

Expression Web uses CSS style properties for cell and table background colors and pictures; it either creates new class-based rules or adds background properties to existing style rules. Here's an example of how Expression Web adds a background image to the whole table:

 .stylex  {           background-image: url('leaves. jpg') } <table > 

Changing cell, row, and column dimensions

Controlling the dimensions of table cells (and by extension, columns and rows) is similar to working with table dimensions because you can set an absolute size in pixels or a proportional size based on the size of the entire table. If you want to use absolute measurements, the easiest way to adjust the dimensions of cells, rows, and columns is to click a border and drag it to a new position.

To use proportional measurements to adjust the height or width of a cell, column, or row (or for more control over the absolute dimensions), follow these steps:

1. Select the cells, columns, or rows you want to format.

2. Right-click the selection and choose Cell Properties from the pop-up menu that appears.

   The Cell Properties dialog box appears (refer to Figure 10-7 earlier in this chapter).

3. In the Specify Width text box, enter the desired width.

   (If the text box appears dimmed, be sure that the Specify width check box is selected.)

   If you're specifying a proportional width, type the width of the cell or column as a percentage of the width of the table. For example, if you type 50, Expression Web sets the width of the cell or column at 50 percent, or half the width of table.

   If you're specifying an absolute width, type the width in pixels.

   To turn off width specifications, click to deselect the Specify Width check box. (If you do this, the size of the selected area is determined by the size of its contents.)

4. Select the option that corresponds to the measurement you specified in Step 3.

   If you're specifying a proportional width, select the In Percent option. If you're specifying an absolute width, select the In Pixels option.

5. Select the Specify Height check box; in the corresponding text box, type the desired height in pixels or as a percentage value, and then select the corresponding option.

   To turn off height specifications, deselect the Specify Height check box.

6. Click OK to close the dialog box and change the dimension settings.

Depending on which way you have Expression Web set up to write styles for width and height, cell width (and/or height) is specified in each cell's <td> tag as an inline style or as a class-based style rule. (See the sidebar "Taming tables with CSS styles," earlier in this chapter.) Columns are nothing more than a set of cells in a particular location in the table (<td>cell contents</td>). When you change the width of a column, Expression Web figures out which cells you selected and adds the necessary inline styles or class-based style rules to just those cells that make up the column.

Tip 

To distribute the rows and columns equally in the table, or to adjust the dimensions of columns and rows to fit their contents precisely, see the Tables toolbar options, explained in Table 10-1.

Warning 

Expression Web contains a quirk that makes it possible to set the width of table columns to a number not equal to the total width of the table. For example, if you set the width of a two-column table to 100 pixels, you can also set the width of the table's columns to a number totaling more or less than 100. Things also get funky if you set different widths for individual table cells (as opposed to entire columns of cells), especially if the table is complex. The solution is to keep your tables relatively simple. At minimum, preview your page in several Web browsers to see how your table looks to your visitors.

Deleting a data table

Building the perfect table takes some work, but deleting a table is effortless. You can either preserve the table's contents by converting the contents to regular paragraphs, or you can erase the table and its contents completely.

To convert the contents of a table into regular paragraphs, click inside the table and then choose Table Convert Table to Text.

To really delete a table, select the table by choosing Table Select Table (or click the <table> tag on the Quick Tag Selector bar), and then press the Backspace or Delete key.