Help:Wiki University HTML-- Tables - Column Spans





<< Previous Chapter Next Chapter >>

SPANNING COLUMNS IN TABLES
This ability to span columns is especially useful when separating sections of one table into different topics.
 * When we create tables, sometimes we want a cell to cover more than one column like in the following example:
 * NOTICE the first row consists of two cells, each spanning two cells of the following row.

HOW TO SPAN COLUMNS

 * If we want to span two columns, for example, we use a class called "colspan."

colspan="2"


 * This coding is inserted right after the Foods that have a .......


 * NOTICE the "2" represents the number of columns to span.

Here is the coding for the first three rows of the above table: 
 * NOTICE again the location of the class "colspan."
 * NOTICE that the new row only has two cells, but each cell has a "colspan" in it. The two colspans cover the four cells in the next row.

COLUMNS HAVE TO ADD UP

 * Make sure that the columns you span add up to the total number of cells in the next row.
 * If you span a total of four columns or cells, you must have two colspan="2" in the preceding row, otherwise you will get who knows what!

RESTRICTIONS

 * You cannot create sortable tables with colspans.

TRY THESE OUT . . . ..


 Exercises
 * Use this coding for a table

Check your answers
 * Merge all the cells in the second row.
 * Merge the first three cells in the fourth row.

 Quick Quiz
 * Colspans must equal the number of cells in the next row.
 * A. True
 * B. False


 * If you have a row with four cells you can have in the preceding row one cell with a colspan="3" plus the remaining cell.
 * A. True
 * B. False


 * If you have a row of seven cells you can have in the preceding row one cell with a colspan="2", the next cell with a colspan="3" and the remaining cell with a colspan="2".
 * A. True
 * B. False

Check your answers

<< Previous Chapter Next Chapter >>