Appendix: Common HTML Templates

On This Page

• Overview
• Table With Header Row
• Table With Header Column
• Table with Header Row and Header Column
• Nested Bulleted List
• Nested Numbered List
• Interrupted Numbering
• Definition Lists
• Double Underlines

Overview

You can copy and paste these templates into Canvas, edX or other platforms that accept HTML code.

Table With Header Row

This produces a table with a header row at the top, two columns, and two rows of cells. Each header acts as a label to a column of cells.

The following is an example of a table with a header row.

Table With Header Column

To create a table with headers on the side, labeling rows, use the following code. Note that the headers now have scope=”row”, and are included as the first item in a row. This would produce a table of two columns and three rows, where the first (left-most) column would be headers.

The following is an example of a table with a header column on the left side.

Table with Header Row and Header Column

This table will have a header row at the top, which will apply to each column. The leftmost column will also contain headers that apply to the second cell in each row.

The following is an example of a table with both a header row and header column.

Bulleted Lists

When making sub-lists, the new list should always be inside the <li> tag of the older list. When working in edX, the editor does not do this automatically, so you will have to write lists in an editing program and then paste them into edX.

The eDS standard style guide for edX specifies a specific format for bullets. To change the style of the bullet, place the following in the <ul> tag of the list and change VALUE to the style you want (see below):

style="list-style-type: VALUE;"

List bullets should be in the following format:

• Top level list: default, black disc (just write <ul>)
• Second level: circle (VALUE should be “circle”)
• Third level: square (VALUE should be “square”)
• Further levels: repeat this order

The following is an example of a typical bulleted list. Delete parts you don’t need.

Numbered Lists

When making sub-lists, the new list should always be inside the <li> tag of the older list. When working in edX, the editor does not do this automatically, so you will have to write lists in an editing program and then paste them into edX.

The eDS standard style guide for edX specifies a specific format for numbering. To change the numbering style, place the following in the <ol> tag of the list and change VALUE to the style you want (see below):

style="list-style-type: VALUE;"

Numbered lists should be in the following format:

• Top level list: default, decimal (just write <ol>)
• Second level: lowercase letters (VALUE should be “lower-alpha”)
• Third level: lowercase Roman numerals (VALUE should be “lower-roman”)
• Further levels: repeat this order

The following is an example of a typical numbered list. Delete parts you don’t need.

Interrupted Numbering

Sometimes text or graphics will appear between items in a list, and this may reset the numbering back to 1. For example:

1. This is the first item.

1. This is the second item, but a picture has interrupted the numbering.

This occurs because inserting the image caused the editor to treat both items in the list as separate lists. If you view the HTML code, you will see two sets of <ol> and </ol> tags, one above and one below the image.

The above list might look like this (some code omitted from the image tag for clarity):

To fix the numbering on a list:

1. Open the HTML editor for the component.
2. Find the beginning <ol> tag for the second part of the list (in this case, after the picture).
3. In the <ol> tag, after the tag abbreviation, add a space and write start=”#”, replacing # with the number that the second list should start with.

The following shows how the list above would be fixed to have the second item start with the number 2. New code is indicated with bold text.

1. This is the first item.

2. This is the second item. The numbering is now correct.

Definition Lists

Definition lists are used where a key term needs to be followed by a definition. They may not be often used in most courses, but are useful for formatting a list of vocabulary terms.

Definition lists have starting <dl> and ending </dl> tags, as well as two components: the vocabulary term (<dt> and </dt>) and the definition (<dd> and </dd>). Each term must have at least one definition after it, but can have multiple definitions if you need to provide multiple alternatives. The following is an example definition list with no formatting.

When creating definition lists, you may need to add formatting to make the terms and definitions more distinct. Standard formatting often used on lists is to bold the term and indent the definition. The following example applies formatting using this standard.

Double Underlines

To create a double underline:

Unfortunately, this code cannot be produced in Pressbooks.