To request editing rights on the Wiki, click here.

Help:Wiki University Wikitext--Tables - Row Spans

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps

Spanning rows in tables[edit | edit source]

  • 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[edit | edit source]

  • 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 pipe or exclamation marks:
| rowspan="2" style="width:25%; border:1px solid red" | Apples

  • 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:

{| style="border:1px solid red"
|+ style="font-size:14pt; " | Healthy Foods
|-
! style="width:25%; border:1px solid red" | Fruits
! style="width:25%; border:1px solid red" | Vegetable
! style="width:25%; border:1px solid red" | Nuts
! style="width:25%; border:1px solid red" | Grains
|-
| rowspan="2" style="border:1px solid red" | Apples
| style="border:1px solid red" | Peas
| style="border:1px solid red" | Peanuts
| style="border:1px solid red" | Wheat
|-
| style="border:1px solid red" | Carrots
| style="border:1px solid red" | Walnuts
| style="border:1px solid red" | Oats
|-
.
.
.

|}

  • 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[edit | edit source]

  • You cannot create sortable tables with rowspans.


Try these out[edit | edit source]

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

{| style="border:1px solid red; width:100%"
|+ style="font-size:14pt;" | Healthy Foods
|-
! style="width:25%; border:1px solid red" | Fruits
! style="width:25%; border:1px solid red" | Vegetable
! style="width:25%; border:1px solid red" | Nuts
! style="width:25%; border:1px solid red" | Grains
|-
| style="border:1px solid red" | Apples
| style="border:1px solid red" | Peas
| style="border:1px solid red" | Peanuts
| style="border:1px solid red" | Wheat
|-
| style="border:1px solid red" | Pears
| style="border:1px solid red" | Carrots
| style="border:1px solid red" | Walnuts
| style="border:1px solid red" | Oats
|-
| style="border:1px solid red" | Cherries
| style="border:1px solid red" | Corn
| style="border:1px solid red" | Cashews
| style="border:1px solid red" | Barley
|-
| style="border:1px solid red" | Orange
| style="border:1px solid red" | Beans
| style="border:1px solid red" | Almonds
| style="border:1px solid red" | Buckwheat
|}


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 merged 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 to it in the row.
A. True
B. False