Column span

In Figure 13-4, <td colspan="2"> tells the browser to make “cell 1” occupy the same horizontal space as two cells—to make it “span” over two columns. The resulting spanned cell is indicated in Figure 13-4. Note that the row containing the spanned cell now only has one td element instead of two.

    <table>
    <tr>
    <tdcolspan="2">Cell 1</td>
    </tr>
    <tr>
    <td>Cell 3</td><td>Cell 4</td>
    </tr>
    </table>
The colspan attribute expands cells horizontally to the right

Figure 13-4. The colspan attribute expands cells horizontally to the right

Setting the colspan to a number greater than the actual number of columns (such as colspan="4" for the example) may cause some browsers to add empty columns to the table , possibly throwing your elements out of alignment.

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.