Web Development and Design Foundations with XHTML, 5th Edition

8.1 Using Tables on Web Pages^321

The XHTML code for the table follows:

<table border="1">

<tr>

<td rowspan="2">This spans two rows</td>

<td>Row 1 Column 2</td>

</tr>

<tr>

<td>Row 2 Column 2</td>

</tr>

</table>

The valignAttribute. This attribute specifies the alignment of the text or image in

the cell. The default vertical alignment is middle, shown in the rowspanexample in

Figure 8.15. Use the valignattribute when you need the contents of a cell to be verti-

cally aligned at the top or bottom of a cell. Common values for the valignattribute

are top, middle, and bottom. Figure 8.16 shows the valignattribute used to top align

the contents of the first cell.

Figure 8.16
The first cell in this
table uses the
valignattribute

The XHTML code for the table follows:

<table border="1">

<tr>

<td rowspan="2" valign="top">This spans two rows</td>

<td>Row 1 Column 2</td>

</tr>

<tr>

<td>Row 2 Column 2</td>

</tr>

</table>

HANDS-ON PRACTICE 8.2

You will continue to work with the Trillium Web site. Launch Notepad or another text

editor and open the services.html page from your trilliumch8 folder. Center the table on

the page with the align="center"attribute. Configure the width of the table to 75%.

Set the cellpaddingto 5 and the cellspacingto 0. See Figure 8.17 for an example.

Be sure to use the summary attribute to help provide for accessibility. Save your page

and test it in a browser. Compare your work to the sample in the student files

(Chapter8/8.2).