Help:Wiki University HTML-- Tables - Row 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 ROWS IN TABLES

  • You have learned how to span columns with individual cells; you can also span rows as well.

Here is an example:

Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • NOTICE in the first column, the first cell of the second row was merged with the first cell of the third row.

This ability to span rows is not quite as useful as spanning columns but it does have its uses.

HOW TO SPAN ROWS

  • If a cell is to span two rows, as in the above example, we use a class called "rowspan":
rowspan="2"
  • This coding is inserted right after the <td> or <th> tags:
<td rowspan="2" style="width:25%; border:1px solid red"> Apples</td>

  • NOTICE the "2" represents the number of rows to span.
  • However to merge cells in a column, we erase the number of cells in the column to equal to the number we specified in the rowspan attribute minus one.
    • So if we want to merge two cells in a column we erase only the cell immediately below it.
    • If you were combining three cells, you would delete just the two immediately below, not three cells below.

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;">Healthy Foods</caption>
<tr>
<th style="width:25%; border:1px solid red">Fruits
<th style="width:25%; border:1px solid red">Vegetable
<th style="width:25%; border:1px solid red">Nuts
<th style="width:25%; border:1px solid red">Grains
</tr>
<tr>
<td rowspan="2" 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>
We removed the cell for "Pears" <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>
</table>


  • NOTICE again the location of the class "rowspan."
  • NOTICE that the third row is missing the FIRST cell because it was merged with the cell in the row above.

RESTRICTIONS

  • You cannot create sortable tables with rowspans.

TRY THESE OUT . . . . .

Tests.gif
Exercises
  • Merge the cells with Barley and Buckwheat in them.
  • Merge the cells with Peas, Carrots and Corn in them.

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>
</table>


Quick Quiz
  • If you are going to merge three cells in a column, you must delete the number of cells in the column under the cell to be marged to equal the number call for in the rowspan code minus one.
A. True
B. False
  • If you want to merge two cells that are under each other in a column, you delete the cell next it in the row.
A. True
B. False

Navigation menu