The baseline value aligns content on a common baseline. This option is best used when a cell contains a single line of text.

If you look at a line of lowercase letters, you’ll see that the bottoms of most letters are aligned horizontally. (Letters such as g, y, and j are exceptions.) That line upon which the letters are aligned is the baseline. Setting the valign attribute to a value of baseline will align the content in your cell on the baseline.

When the valign attribute is set to bottom, the cell’s content is aligned at the bottom of the cell, as shown in Figure 9.8.

Figure 9.8. A valign value of bottom will align a cell’s content nicely along the bottom of the cell.

A valign value of middle will center the cell’s content vertically, as shown in Figure 9.9. This is the default setting. If no valign attribute is specified, cell content will be centered vertically.

Figure 9.9. A valign value of middle is the default setting and centers the cell’s content vertically.

The most common valign value is top. The table in Figure 9.10 shows the result of setting the valign value to top.

Figure 9.10. A valign value of top is the most common configuration for most Web sites.

This setting is often employed when using tables to align sliced images, as you’ll see later in this chapter.

Now that you know the basics of how a table is built in HTML code, let’s dig into how tables are created in Expression Web.

The table you’ve created has two rows and three columns. Say that you want to add a graphic into the left column of this table, and you want that graphic to take up the entire column. There are a couple of ways to accomplish that. You could slice the graphic into two pieces and insert one piece in each cell in the column. However, because the table has cellspacing and cellpadding values of 5, that won’t result in the effect you want. Instead, as shown in Figure 9.14, you’ll end up with space around the graphic that makes it painfully obvious that it’s two graphic files.

Figure 9.14. Slicing the Expression Web graphic for this table isn’t a good idea. As you can see, you end up with whitespace that makes it look awful.

In this case, a better solution would be to merge the two cells in the leftmost column into a single cell. You can then insert the Expression Web graphic into that one cell without having to slice it and you’ll end up with exactly what you want.

The first step in merging the cells in the leftmost column is to select both cells. There are many ways to do that.

I personally prefer to move the insertion point to the top of a column and then click when I see a downward-pointing arrow. After you select the cells, right-click on either of them and choose Modify, Merge Cells. You should end up with a table like Figure 9.15.

Figure 9.15. The leftmost column of the table has now been merged into a single cell. It’s now a perfect spot for our Expression Web graphic.

Click inside the cell that you’ve just merged and insert a graphic. You can use the ewd.jpg graphic from the ch10filesWebsiteimages folder on the CD that accompanies this book. Your table should now look like Figure 9.16.

Figure 9.16. The image is now sitting in a column of merged cells and looks perfect.

At this point, the alignment in your table looks fine. However, as new content is added, things will change.

You should now have a table that looks similar to Figure 9.17. Things have obviously gone terribly wrong and our table doesn’t look good at all at this point.

Figure 9.17. Our table has quickly gone from a nice-looking presentation to a terrible one. Fortunately, we can fix this pretty easily.

Fortunately, we can fix this problem with a few tweaks to alignment and a small change in the size of the table.

Your table should now look like Figure 9.19.

Figure 9.19. The table is starting to take shape now. It’s still a bit narrow, but alignment looks good.

The final step is to change the width of the table. There are several ways to adjust the width of a table.

To alter the width of the table in the Table dialog, check the Specify Width checkbox and enter a new value for the width, as shown in Figure 9.20. I have chosen a width of 765 and I’ve selected the In Pixels radio button so that the table will be 765 pixels in width. Your table should now look like Figure 9.21.

Figure 9.20. After the table’s width has been increased, the text becomes much more readable.

Figure 9.21. The completed table presents the information in a pleasing and well-formatted way.

Note

If your table runs way off the right edge of the screen after adjusting the width, see “Table Is Too Wide” in the “Troubleshooting” section of this chapter.

<table width="500">

<table style="width: 500px">

<style>
     .style1{
          text-align: right;
     }
</style>

<div class="style1">
     <table ...>
            ...
     </table>
</div>

In the example we just worked through, we created a table that had just the right number of rows and columns for our needs. In almost all cases in the real world, you will need to adjust the number of rows and/or columns after a table has already been inserted. Fortunately, Expression Web provides numerous ways for doing this.

It goes without saying that you can open the Table Properties dialog we’ve worked with previously and change the number of rows or columns. Adding a new row using this method will always add the row to the bottom of the table. Adding a new column using this method will always add the new column to the right side of the table. This may not be what you want, so if you want more control, you’ll need to use one of the other methods that Expression Web provides.

The Layout Tool was first introduced by Microsoft in FrontPage 2003. I must admit that because I was so entrenched in the traditional way of working with tables, I largely ignored this feature for quite some time. I must also admit that once I tried the Layout Tool once, I couldn’t live without it.

The Layout Tool bears a slight resemblance to the table features in Adobe Dreamweaver, but it’s much more powerful and flexible. When you activate the Layout Tool, your table borders change to a green color to indicate that the Layout Tool is active. Expression Web provides indicators in the user interface (shown in Figure 9.23) that make precise resizing of cells easy. Simply drag cell borders to the desired dimensions using the size indicators as a guide.

Figure 9.23. The table Layout Tool provides powerful features for configuring tables.

The Layout Tool is designed to assist you with configuring not only table layout, but also the dimensions of your table cells. Setting the dimensions of table cells properly can be challenging. If your table is 700 pixels wide, the combined width of all the columns in the table should add up to 700.

It’s easy to skew the width of a column so that the combined width of all your columns is either less or more than the table’s width. When that happens, it’s likely that you won’t notice it, but you will notice bizarre behavior in your cells. For example, you might set the width to 20 pixels for a particular column and yet no matter what you do, the column appears to be much wider in Expression Web.

The reason for this kind of odd behavior is simple: If you tell Expression Web that a table should be 700 pixels in width, it will expect that all of the columns of that table do actually add up to 700 pixels. When they don’t, Expression Web doesn’t know how to deal with it, so it guesses. One thing’s for sure: If you allow a computer to guess at anything, it will always guess wrong.

Take a look at Figure 9.23 again. Notice the numbers around the edges of the table? These numbers tell you the width and height of the cells in the table. If your table is configured correctly, you will see only one number for each value. However, if there is a contradicting width or height somewhere in the table, Expression Web will display the contradicting value followed by the actual value in parentheses.

I realize this might be a little hard to understand, so let’s have a look at it in detail. Instead of dealing with the entire table from Figure 9.23, let’s just look at the leftmost column. This column contains an image that is 216 pixels in width. The table cell itself is currently 220 pixels in width, but the actual HTML code says that the cell should be 84 pixels wide. Expression Web indicates this by displaying 84(220) in the layout cell, as shown in Figure 9.23.

To understand why Expression Web believes this cell should be 84 pixels wide, let’s look at the HTML code for this table. Listing 9.3 shows the HTML for the table.

 1     <table border="0" width="428" height="196">
 2          <!— MSTableType="layout" —>
 3          <tr>
 4              <td valign="top">
 5              <img src="images/newimage.jpg" width="216" height="162" /></td>
 6              <td valign="top">&nbsp;</td>
 7              <td valign="top" height="166" class="style1">NEWimage.com is the 8
 8               only Web design shop you&#39;ll ever need.</td>
 9          </tr>
10          <tr>
11              <td width="84">&nbsp;</td>
12              <td width="84">&nbsp;</td>
13              <td height="23" width="238">&nbsp;</td>
14          </tr>
15      </table>

After reading the material at the beginning of this chapter, this HTML code should be pretty easy to follow. You can see that there are two <tr> pairs, one for each row. Each <td> pair within a <tr> pair represents a column. If you look at Lines 11 and 12, you can clearly see that these cells are explicitly set to a width of 84 pixels. The corresponding cells in the rows above appear on Lines 4 and 6. In those cells, there is no explicit width setting, but the image in the first cell implicitly sets the width of those cells to at least 216 pixels, the width of the image. The result is a contradicting width of 84 pixels.

Fortunately, the Layout Tool makes it easy to fix contradicting widths. What you should do in this scenario is explicitly set all the cells in the first column to at least 216 pixels. To do that in Expression Web, click the cell width indicator and select Change Column Width, as shown in Figure 9.24. This will display the Column Properties dialog (see Figure 9.25). In the Column Properties dialog, set the Column Width to the desired value, check the Clear Contradicting Width checkbox, and click OK. In this case, the value we would enter for the column width is 221. By entering 221 for the column width, we account for the column width indicated by the Layout Tool along with the cell padding of 1 pixel.

Figure 9.24. The Layout Tool includes the ability to alter column width directly from a cell.

Figure 9.25. Using the Column Properties dialog, you can easily fix any contradicting widths in table cells.

Let’s have another look at the HTML now that Expression Web has removed the contradicting width.

<table border="0" width="428" height="196">
     <!— MSTableType="layout" —>
     <tr>
         <td valign="top">
         <img src="images/newimage.jpg" width="216" height="162" /></td>
         <td valign="top">&nbsp;</td>
         <td valign="top" height="166" class="style1">NEWimage.com is the only
         Web design shop you&#39;ll ever need.</td>
     </tr>
     <tr>
         <td width="221">&nbsp;</td>
         <td width="84">&nbsp;</td>
         <td height="23" width="238">&nbsp;</td>
     </tr>
</table>

Notice that Expression Web did not add a width attribute to the cell containing the image. Instead, it increased the width on the corresponding cell in the second row to 221. The Layout Tool now shows the width without a contradicting width, as shown in Figure 9.26.

Figure 9.26. The Layout Tool now shows that there is no contradicting width for the first column. Other columns still show contradicting values, but fixing that is easy.

Note

If you choose the Clear Contradicting Height or Clear Contradicting Width checkbox and Expression Web still indicates that there is a contradicting width or height, see “Cannot Clear Contradicting Height or Width” in the “Troubleshooting” section of this chapter.