FamilySearch Wiki:Manual of Style-Tables
Purpose
- Below describes the process of updating old wiki tables to new ones in an effort to comply to WCAG 2.1 AA guidelines.
- The Wikipedia Manual of Style that describes accessibility best practices was used to clarify what is allowed and not allowed when creating tables on the Research Wiki.
- See Manual of Style-Table Examples for examples of approved tables with wikitext.
Checklist
- Defined as Wikitable
- Scope defined
- Row defined
- Remove color
Color
- To solve contrast color of a table and the black and blue text, use Color picker at W3schools
- Typically, the color must be at least 90%
- Known colors that pass WCAG 2.1 AA guidelines can be found below and on WCAG Acceptable Table Colors Wiki page.
- Light pink: #FEE8E8
- Light lavender: #FCE6FE
- Light violet: #F3ECFE
- Light Cyan: #DBFBFD
- Light blue: #E6F0FE
- Light magenta: #F1EBF1
- Light peach: #FCECCC
- Light green: #E2FCE0
Creating New Tables
New tables should be created in Excel (or Google Sheets, Libre Office, or whatever spins your beanie) with scope tags in the first column. The header row should be identified as "col" and each row as "row". This will facilitate the text manipulation you will need to do with Notepad++.
It is not necessary for the first column of a table to be the row header, but it does make it easier for users if the table is arranged so the first column contains significant data elements.
Remember Excel2wiki does not add captions! You must do this manually. Person failing to comply with this directive will be first against the wall when the revolution comes. Captions can be added after the header row and before the first data row by using a pipe and plus sign (|+) followed by the caption text.
Excel2Wiki
Pasting data from a spreadsheet that looks like this:
| A | B | C | D | E | |
|---|---|---|---|---|---|
| 1 | scope="col" | Rating | Rank | Name | Actor |
| 2 | scope="row" | Captain | Captain | James Tiberius Kirk | William Shatner |
| 3 | scope="row" | First Officer | Commander | Spock | Leonard Nimoy |
| 4 | scope="row" | Chief Medical Officer | Lt Commander | Leonard "Bones" McCoy | DeForest Kelley |
| 5 | scope="row" | Chief Engineer | Lt Commander | Montgomery "Scotty" Scott | James Doohan |
Into Excel2wiki produces this code:
{| class="wikitable"
! scope="col" !! Rating !! Rank !! Name !! Actor
|-
| scope="row" || Captain || Captain || James Tiberius Kirk || William Shatner
|-
| scope="row" || First Officer || Commander || Spock || Leonard Nimoy
|-
| scope="row" || Chief Medical Officer || Lt Commander || Leonard McCoy || DeForest Kelley
|-
| scope="row" || Chief Engineer || Lt Commander || Montgomery Scott || James Doohan
|}
Which displays like this:
| scope="col" | Rating | Rank | Name | Actor |
|---|---|---|---|---|
| scope="row" | Captain | Captain | James Tiberius Kirk | William Shatner |
| scope="row" | First Officer | Commander | Spock | Leonard Nimoy |
| scope="row" | Chief Medical Officer | Lt Commander | Leonard McCoy | DeForest Kelley |
| scope="row" | Chief Engineer | Lt Commander | Montgomery Scott | James Doohan |
Which isn't what you want.
Here are the changes that need to be made for the header row. Change this:
! scope="col" !! Rating !! Rank !! Name !! Actor
to this:
! scope="col" | Rating ! scope="col" | Rank ! scope="col" | Name ! scope="col" | Actor
Then change the data in each row from this:
| scope="row" || Captain || Captain || James Tiberius Kirk || William Shatner
to this:
| scope="row" | Captain | Captain || James Tiberius Kirk || William Shatner
Having a newline in the table after the cell where the scope="row" tag appears causes the following cells to display with a light-colored background.
Notepad++ Find and Replace Instructions
These instructions use Notepad++'s "Replace" function with "Regular expression" search mode. There are two steps to reformat both the header and data rows. Make sure your cursor is at the beginning of the file before starting this process, or make sure the "Wrap Around" checkbox in the Replace window is checked.
To edit the table in Notepad++ first copy the new table from Excel2Wiki by clicking on the Copy to clipboard link, Open Notepad++ and create a new file (CTRL+N) and paste (Ctrl+V) the Excel2Wiki data into the new file.
Reformatting the Header Row
Perform these two steps in order:
- Step 1
- Change the first "!!" to "|"
- Purpose: To correctly format the first header element.
- Open Replace Dialog: Press Ctrl + H.
- Search Mode: Select Regular expression.
- Find what: ^(! scope="col") !!
- Replace with: \1 |
- Action: Click Replace All.
- Step 2
- Break up the remaining "!!" and add "! scope="col" |"
- Purpose: To format the subsequent header elements onto new lines.
- Open Replace Dialog: (If not already open) Press Ctrl + H.
- Search Mode: Ensure Regular expression is still selected.
- Find what: !!
- Replace with: \n! scope="col" |
- Action: Click Replace All.
Reformatting Data Rows
Perform these two steps in order:
- Step 1
- Change "| scope="row" ||" to "! scope="row" |"
- Purpose: To change the formatting of the row scope and initial pipe.
- Open Replace Dialog: Press Ctrl + H.
- Search Mode: Select Regular expression.
- Find what: \| scope="row" \|\|
- Replace with: ! scope="row" |
- Action: Click Replace All.
- Step 2
- Change the first "||" on each line to a return and single pipe
- Purpose: To break the row and introduce the leading pipe for the remaining data.
- Open Replace Dialog: (If not already open) Press Ctrl + H.
- Search Mode: Ensure Regular expression is still selected.
- Find what: (^.*?\|.*?)\|\|
- Replace with: \1\n|
- Action: Click Replace All.
Updating Existing Tables
These instructions use Notepad++'s "Replace" function with "Regular expression" search mode. There are two steps to reformat the header row and one step for the data rows. Make sure your cursor is at the beginning of the file before starting this process, or make sure the "Wrap Around" checkbox in the Replace window is checked.
To edit the table in Notepad++ first copy the existing table from the FSRW using Edit Source, use your cursor to highlight the table, press Ctrl+C to copy it, then create a new file in Notepad++ (CTRL+N) and paste the table (Ctrl+V) into the new file.
Reformatting the Header Row
Perform these two steps in order:
- Step 1
- Change the first "!!" to "|"
- Purpose: To correctly format the first header element.
- Open Replace Dialog: Press Ctrl + H.
- Search Mode: Select Regular expression.
- Find what: ^! (.*?) !!
- Replace with: ! scope="col" | \1\n! scope="col" |
- Action: Click Replace All.
- Step 2
- Break up the remaining "!!" and add "! scope="col" |"
- Purpose: To format the subsequent header elements onto new lines.
- Open Replace Dialog: (If not already open) Press Ctrl + H.
- Search Mode: Ensure Regular expression is still selected.
- Find what: !!
- Replace with: \n! scope="col" |
- Action: Click Replace All.
Reformatting Data Rows
This is a single step:
- Purpose: Change each data row to add prefix text "! scope="row"", and the FSHI template with alternate text to the DGS number in the first column.
- Open Replace Dialog: Press Ctrl + H.
- Search Mode: Select Regular expression.
- Find what: ^\| (\d+) \|\|(.*)$
- Replace with: ! scope="row" | {{FSHI|DGS=\1|alt=\1}}\n|\2
- Action: Click Replace All.
Simple Table Design
Wikitext
{| class="wikitable"
|+ Main Characters of Star Trek: The Original Series
|-
! scope="col" | Rating
! scope="col" | Rank
! scope="col" | Name
! scope="col" | Actor
|-
! scope="row" | Captain
| Captain || Kirk, James T || William Shatner
|-
! scope="row" | First Officer
| Commander || Spock || Leonard Nimoy
|-
! scope="row" | Chief Medical Officer
| Lt Commander || Leonard McCoy || DeForest Kelley
|-
! scope="row" | Chief Engineer
| Lt Commander || Montgomery Scott || James Doohan
|}
Table Display
| Rating | Rank | Name | Actor |
|---|---|---|---|
| Captain | Captain | Kirk, James T | William Shatner |
| First Officer | Commander | Spock | Leonard Nimoy |
| Chief Medical Officer | Lt Commander | Leonard McCoy | DeForest Kelley |
| Chief Engineer | Lt Commander | Montgomery Scott | James Doohan |
Examples of Specialized Code for Tables
Left-aligning code for cells
Wikitext
{| class="wikitable"
! scope="row" style="text-align: left;" | Azzate
|[[GuidedResearch:Varese|Varese<br>]]
| [[GuidedResearch:Lombardia Region|Lombardia (Lombardy)]]
|-
! scope="row" style="text-align: left;" | Azzio
|[[GuidedResearch:Varese|Varese<br>]]
| [[GuidedResearch:Lombardia Region|Lombardia (Lombardy)]]
|-
! scope="row" style="text-align: left;" | Azzone
|[[GuidedResearch:Bergamo|Bergamo<br>]]
| [[GuidedResearch:Lombardia Region|Lombardia (Lombardy)]]
|}
Table Display
| Azzate | Varese |
Lombardia (Lombardy) |
|---|---|---|
| Azzio | Varese |
Lombardia (Lombardy) |
| Azzone | Bergamo |
Lombardia (Lombardy) |