Help:Wiki University Wikitext--Tables - Column Spans

MAIN PAGE

WIKI

WIKITEXT

HTML/CSS

FAMILY HISTORY CENTERS

VISUAL EDITOR

Lessons

1. HOME
2. Introduction
3. Headers
4. Lists
5. Nesting Lists
6. Links
7. Broken Links
8. Comments
9. Categories
10. Image Embedding
11. Image Tooltips & Borders
12. Image Links
13. Images & Text; Embedding PDF
14. Snipping Tool & Paint
15. Paragraphs
16. Inline Styling
17. Changing Fonts
18. Font Colors
19. Backgrounds
20. Multi-attributes
21. Font Bold-Italics
22. Div Tag - Intro
23. Borders
24. Padding
25. Margins
26. Width and Height
27. Alignment - Horizontal
28. Tables
29. Breadcrumb Trails
30. Ref/Footnotes
31. SEO

---

Intermediate

1. Table - Borders
2. Tables - Widths
3. Tables - Captions
4. Tables - Col Labels
5. Tables - Cells
6. Tables - Rows
7. Tables - Placement
8. Tables - Sorting
9. Tables - Scrolling
10. Tables - Col Spans
11. Tables - Row Spans
12. Alignment - Vertical
13. Templates
14. Infobox - Creating
15. Infobox - Placing
16. Image Maps

---

Advanced

1. Research Record Templates
2. If functions
3. Sidebars
4. Navboxes
5. Position - Relative
6. Position - Absolute

---

Flexbox

1. Flexbox Training

---

Additional Helps

• Common Wiki Fixes
• Wiki Tips
  
• Wikitext Cheatsheet

<< Previous Chapter

Next Chapter >>

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 called "colspan."

colspan="2"

• This coding is inserted right after either the | or ! tags.
  
  

When using the pipe "|", you will need to add in the "text-align:center" attribute in order for the name to be centered:

|colspan="2" style="text-align:center" | Foods that have a .......

If you use the "!" instead of the pipe "|", then the name defaults to the center and is bolded:

!colspan="2" style="" | Foods that have a .......

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

{| style="border:1px solid red"
|+ style="font-size:14pt; " | Healthy Foods
|-
| colspan="2" style="border:1px solid red; text-align:center; background-color:wheat" | Foods with short shelf life
| colspan="2" style="border:1px solid red; text-align:center; background-color:wheat" | Foods with long shelf life
|-
! 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
|-
.
.
.
|}

• NOTICE again the location of the class "colspan."
• NOTICE a pipe needs to be added before the title, separating it from the colspan and style commands.
• 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

{| style="border:1px solid red; width:100%"
|-
! style="border:1px solid red; width:25%" | Fruits
! style="border:1px solid red; width:25%" | Vegetable
! style="border:1px solid red; width:25%" | Nuts
! style="border:1px solid red; width:25%" | 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
|}

• Merge all the cells in the second row.
• Merge the first three cells in the last row.

Check your answers

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