Help:Wiki University HTML-- Tables - Column Spans

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

SPANNING COLUMNS IN TABLES

  • When we create tables, sometimes we want a cell to cover more than one column like in the following example:
Healthy Foods
Foods with short shelf life Foods with long shelf life
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • NOTICE the first row consists of two cells, each spanning two cells of the following row.

This ability to span columns is especially useful when separating sections of one table into different topics.

HOW TO SPAN COLUMNS

  • If we want to span two columns, for example, we use a class[1] called "colspan."
colspan="2"
  • This coding is inserted right after the <td or <th tags:
<td colspan="2">Foods that have a .......</td>

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

Here is the coding for the first three rows of the above table:

<table style="border:1px solid red; width:100%">
<caption style="font-size:14px; text-align:center">Healthy Foods</caption>
<tr>
<td colspan="2" style="border:1px solid red; text-align:center"> Foods with short shelf life</td>
<td colspan="2" style="border:1px solid red; text-align:center">Foods with long shelf life</td>
</tr>
<tr>
<th style="width:25%; border:1px solid red" > Fruits</th>
<th style="width:25%; border:1px solid red" > Vegetable</th>
<th style="width:25%; border:1px solid red" > Nuts</th>
<th style="width:25%; border:1px solid red" > Grains</th>
</tr>
<tr>
<td style="border:1px solid red">Apples</td>
<td style="border:1px solid red">Peas</td>
<td style="border:1px solid red">Peanuts</td>
<td style="border:1px solid red">Wheat</td>
</tr>
.
.
.
</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 . . . . .

Tests.gif
Exercises
  • Use this coding for a table

<table style="border:1px solid red; width:100%">
<tr>
<th style="border:1px solid red; width:25%">Fruits</td>
<th style="border:1px solid red; width:25%">Vegetable</td>
<th style="border:1px solid red; width:25%">Nuts</td>
<th style="border:1px solid red; width:25%">Grains</td>
</tr>
<tr>
<td style="border:1px solid red">Apples</td>
<td style="border:1px solid red">Peas</td>
<td style="border:1px solid red">Peanuts</td>
<td style="border:1px solid red">Wheat</td>
</tr>
<tr>
<td style="border:1px solid red">Pears</td>
<td style="border:1px solid red">Carrots</td>
<td style="border:1px solid red">Walnuts</td>
<td style="border:1px solid red">Oats</td>
</tr>
<tr>
<td style="border:1px solid red">Cherries</td>
<td style="border:1px solid red">Corn</td>
<td style="border:1px solid red">Cashews</td>
<td style="border:1px solid red">Barley</td>
</tr>
<tr>
<td style="border:1px solid red">Orange</td>
<td style="border:1px solid red">Beans</td>
<td style="border:1px solid red">Almonds</td>
<td style="border:1px solid red">Buckwheat</td>
</tr>
</table>


  • 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
  1. This is another built in wikitext mini-program.

Navigation menu