Actions

Work Header

A Complete Guide to 'Limited HTML' on AO3

Chapter 3: Tables and Lists

Summary:

Tables and Lists

Chapter Text

Note: No CSS skin has been added to this work. What you see below is the default A03 formatting for each of these HTML tags.

The tags supported by A03 are for tables and lists are shown below, with examples of how to code them and what they look like. These build on the concept of nested tags introduced in chapters one and two; instead of having bold inside of itallic, we begin to nest rows inside of tables and data inside of rows. Similarly, we open a list, and nest individual list elements inside of it.


Tables start by opening a table using the 'table' tag. Once open, rows can be added using the 'tr' tag; and then data added to the rows as either a header (using the 'th' tag) or a plain data cell (the 'td' tag). If special css formatting is being used for the table header, body, or footer, those OPTIONAL tags may be used to group rows. The first table shows te tags and links to the w3school page (they have a great table tutorial that I relied heavily upon when creating the Marvel Periodic Table of the Elements) and the lower table is to show the default formatting A03 provides for each table element

As with all default formatting, it will appear differently when different site skins are engaged. If you want to force a view for your work, you will need to rely on CSS, not HTML.

Parent Tag Child Tag 1 Child Tag 2 Child Tag 3 Definition
table - - -   html table
(table) caption - -   table caption
COLS (table) colgroup - -   tags columns for formatting
(colgroup) col -   column formatting
SECTIONS (table) thead (tr) -   table header content
(table) tbody (tr) -   table body content
(table) tfoot (tr) -   table footer content
ROWS (table) tr -   table row
CELLS (tr) th   header cell
(tr) td   table cell

<caption> … The Caption
<thead> … The table header section (2 rows) <td> … Table Cell
(in Header)
<th> … Header Cell First Last Age Theme Color
<tbody> … The table body section (6 rows) Tony Stark 45 Red & Gold
<td> … Table Cell (in Body) Harry Potter 11 Red & Gold
Rainbow Brite 12 All
Jason Bourne 38 n/a
Elvira 50 Black
Buffy Summers 18 n/a
<tfoot> … The table footer section (1 rows) Avg. Age 29 <td> … Table Cell
(in Footer)

Moving on from tables, There are three types of lists supported by A03 = ordered, unordered, and descriptive. All of these are shown in the examples below and are created using the following six tags:

Tag           Meaning
ol           ordered list
ul           unordered list
li           list item (within an ordered or unordred list)
dl           description list
dt           term definition in a description list
dd           term in a description list

Example 1: Steven Rogers' best spit takes in the 21st century (an ordered list)

<ol>
<li>Bananas </li>
<li> Toothpaste <br>
<i>See also:</i> Cinnamon Toothpaste</li>
<li> Sashimi </li>
</ol>
  1. Bananas
  2. Toothpaste
    See also: Cinnamon Toothpaste
  3. Sashimi

Example 2: Some Places of Interest (an unordered list)

Why these cities are places of interest is left as an exercise for the reader

<ul>
<li> Istanbul </li>
<li> Vancouver </li>
<li> Yokohama </li>
<li> Stuggart </li>
</ul>
  • Istanbul
  • Vancouver
  • Yokohama
  • Stuggart

Example 3: Two Almost-Random Things (a descriptive list)

<dl>
<dt> DD Tag </dt>
<dd> <p> Inside a 'dd' tag you can put paragraphs, line breaks, images, links, lists, etc.</p>
<p>And, when one is being crass, the DD tag is what you wake up to after the lactation fairy visits.</p>
</dd>

<dt> Babies </dt>
<dd> Babies are technically just the juvenile members of the species. Unfortunately 'technically' covers a lot of ground, and diapers don't quite cover the rest. </dd>
DD Tag

Inside a 'dd' tag you can put paragraphs, line breaks, images, links, lists, etc.

And, when one is being crass, the DD tag is what you wake up to after the lactation fairy visits.

Babies
Babies are technically just the juvenile members of the species. Unfortunately 'technically' covers a lot of ground, and diapers don't quite cover the rest.