HTML & CSS: Tables 2

 

Rowspan & Colspan

 

I. We begin with a standard HTML table. One new element here is the tag to add a caption to the table.

 

II. We can improve this table. The tags 'rowspan' and 'colspan' give you more control over the layout of a table. Colspan allows you to specify that a given cell will continue across several columns. In the example below, note how 'colspan' is used to allow the heading to span 6 columns.

 

III. We can make the table more interesting by adding a photo of Roberto Clemente. We can add the photo to the table using 'rowspan'. In the example below, note how 'rowspan' is used to allow the cell holding the photo to span 3 rows.

Note the use of an inline style to make the background of the large cell in the top row gold. An inline style is used 'locally' to make a change to one element.

 

 

Exercise

Create or modify a table that has at least 4 columns and 3 rows. Use a 'caption' tag. Use 'colspan' to have a cell span several columns. Use 'rowspan' to have a cell span several rows. Don't just mimic what I did in the examples above.