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 |
| <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)
<li>Bananas </li> <li> Toothpaste <br> <i>See also:</i> Cinnamon Toothpaste</li> <li> Sashimi </li> </ol> |
|
Example 2: Some Places of Interest (an unordered list)
Why these cities are places of interest is left as an exercise for the reader
<li> Istanbul </li> <li> Vancouver </li> <li> Yokohama </li> <li> Stuggart </li> </ul> |
|
Example 3: Two Almost-Random Things (a descriptive list)
<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> |
|