Adding Spans - HTML 4

Spanning is one of the main reasons tables are a flexible alternative for arranging elements in your Web page.

Spanning enables you to stretch items across multiple cells; you essentially tear down a cell wall. Whether you need to span rows or columns, you can use the concept of spanning to wrangle your table into almost any arrangement.

Column and row spanning takes careful planning. That planning should occur during the sketching phase (as we describe earlier in this chapter, in the section “Sketching Your Table”).

To span cells, you add one of these attributes to the <td> (cell) element:

  1. colspan extends a cell horizontally (across multiple columns).
  2. rowspan extends a cell vertically (across multiple rows).

Spanning cells can be done only by using (X)HTML attributes; CSS doesn’t provide equivalent functionality.

Column spans
To span columns, you use the colspan attribute in the <td> element and set the value equal to the number of cells you want to span.

Figure illustrates a cell that spans two columns.

Figure : The cell spans two columns

The cell spans two columns

In this example, the first cell spans the two cells in the next row. You use the colspan attribute set to 2, as shown in the following markup, because the cell spans two columns:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Tables</title>
</head>
<body>
<table border=”1” width=”630”>
<tr>
<td width=”630” colspan=”2”> contents </td>
</tr>
<tr>
<td width=”400”> contents </td>
<td width=”230”> contents </td>
</tr>
</table>
</body>
</html>
After you add a colspan attribute
  1. Verify that you have the appropriate number of <td> cells in the first row. For example, if you define a cell to span two columns, you should have one less <td> in that row. If you use colspan=”3”, there should be two fewer <td> cells in that row.
  2. Make sure that the other rows have the appropriate number of <td> cells. For example, if you define a cell to span two columns, the other rows in that table should have two <td> cells to fill out the two columns.

Row spans
You use the rowspan attribute with the <td> tag. Figure illustrates a cell that spans two rows. To span rows, you use the rowspan attribute in the <td> element and set the value equal to the number of cells you want to span.

Sketch your table first so you know which cells should span which columns and rows. The example design we use throughout most of this chapter uses the colspan attribute with the first cell. However, the design could have been just as simple if we used a rowspan with the last cell that contains the
navigational items. Either way, the table is efficiently laid out.

Figure : The last cell containing navigational items spans two rows.

The last cell containing navigational items spans two rows.

The modified table comes from the following markup (note the bold rowspan):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Tables</title>
</head>
<body>
<table border=”1” width=”630”>
<tr>
<td width=”400”> contents </td>
<td width=”230” rowspan=”2”> contents </td>
</tr>
<tr>
<td width=”630”> contents </td>
</tr>
</table>
</body>
</html>

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics