EDT4OL/Intermediate wiki skills/Tables

From WikiEducator
Jump to: navigation, search
Four-easy-steps.jpg


Icon summary line.svg
Mini challenge - Create a wiki table in four steps
Summary: Learn how to publish and edit wiki tables
Time7.svg
30 mins - 1 hour (depending on prior knowledge of wiki text and general understanding of markup languages)
Font2.svg
Linked to final: Intermediate wiki skills challenge

In this challenge, you will learn how to use wiki text (markup) for wiki tables while developing draft content for reuse in the learning materials you are developing in the course.



Icon objectives line.svg
Objectives

The purpose of this learn-by-doing challenge is to:

  • Build the wiki skills to publish and edit tables in WikiEducator
  • Consider requirements for the readability of online tables for mobile devices
  • Learn how to customise boilerplate table markup for editing your own tables
  • Prepare an initial draft of a table for use in your online content for this course



Overview

This mini challenge is divided into four steps. The table below will also serve as an example of the wiki markup for a 3 column table, which you may need to consult during step 4 of this mini challenge.

Step Activity Purpose
Step 1 Reflect on the advantages and disadvantages of using tables To be aware of the limitations of tables in an online environment
Step 2 Learn markup elements for a wiki table To be able to use the wiki syntax components to construct a basic table
Step 3 Copy and paste wiki text for a basic two column table To copy boilerplate wiki text to get started with creating and editing tables
Step 4 Create a three column table with three or more rows To edit an existing table using wiki markup to add rows and columns

Step 1: Reflect on the advantages and disadvantages of using tables

Purpose: To be aware of the limitations of tables in an online environment

Tables are useful for organising information in a clean and readable format. They are best suited to information that has a clear and logical structure.

However, they are difficult to read when there are too many cells with large amounts of information in each cell. This is especially true when a table is viewed in portrait mode on a mobile device, because the reader may lose context of the column headings when scrolling down through a large table, or where the text in the columns is squashed together to fit a narrow screen.

For these reasons,

  • Avoid using tables that have more than three columns. If there are more than three columns, consider transposing a table so there are more rows than columns, or try breaking up the information into multiple tables
  • Avoid tables that contain large amounts of information in the individual cells

Step 2: Learn markup elements for a wiki table

Purpose: To learn about the wiki syntax components used to construct a basic table

Wiki text Purpose
{| table start, required
|- table row, used to signify a new row for table cells
! table header cell, optional. Start each consecutive header cell on a new line, each with its own single mark (!)
| table data cell, optional. Start consecutive table data cells on new lines, each with its own single mark (|)
|} table end, required

Step 3: Copy and paste wiki text for a basic two column table

Purpose: To copy boilerplate wiki text to get started with creating and editing tables

The following wiki text illustrates how to create a two column table with headings, which you will highlight and copy to practise editing:

{| class="oeru1"
|-
! Column 1 heading
! Column 2 heading
|-
|Cell A text
|Cell B text
|-
| Cell C text
| ''Cell D text in italics''
|-
|}

Compare the wiki text above with the table it creates (below in published view):

Column 1 heading Column 2 heading
Cell A text Cell B text
Cell C text Cell D text in italics

Notes

  1. Always include the class parameter: "class="oeru1" immediately after the markup used for the start of a wiki table. This specifies the stylesheet used by the course website for the table and cell outlines,and the shading of rows on the published site. For the purposes of this course, avoid applying complex table styles which may not be recognised by the stylesheets on the published course site
  2. Avoid formatting the text of the header rows, for example bold or italics. The bold text is applied by the stylesheet specified by the class parameter above
  3. You can apply normal wiki markup (bold, italics, lists, links, images etc.) to data contained within cells
  4. To improve readability for fixing any syntax errors in wiki tables, we recommend starting each row and cell on a new line as indicated in the example above

Actions

  1. Open your sandbox page in a new tab or window
  2. Insert the following syntax [[/Tables/|Tables]] in edit mode onto your sandbox page. This will create a subpage for practising wiki tables
  3. Copy the table markup for a basic two column table above, onto the tables subpage you set up on your sandbox page, and save the page

Step 4: Create a three column table with three or more rows

Purpose: To edit an existing table using wiki markup to add rows and columns

  1. Using a piece of paper or word processor, construct a table in a subject area of your choice (possibly for reuse in a learning sequence you are developing for this course). Your table should have:
    • 3 columns
    • include heading labels for each column
    • 3 or more rows
    • Text for each cell in every row
  2. Go to your sandbox page, click on the 'Tables' subpage you created in step three above. Construct a three column, three row table using wiki markup to adapt the two column example on that page
  3. Remember to save your wiki page
Icon key points line.svg
Feedback

By clicking on the accordion below, you will find an example solution of wiki markup for a 3-column table which you can consult if you are having difficulty or encountering errors with your attempt. There is also a useful wiki tip for creating internal links to subheadings on the same wiki page.

H5P Object Parameters

The H5P parameters below will be replaced by the actual H5P object when it's rendered on the WordPress site to which it's been snapshotted.

161
h5p
100%
400px
font-weight: bold;
id1