14Tables and Footnotes

Incidental tables are used to add clarifications or additional points into the main body of the text.

Incidental tables have a similar use to sidebars, but appear in the central area and can generally contain more information (they are much wider than sidebars).

The following is an example of an incidental table:

Unlike standard and dense tables, which have a very flexible and customisable arrangement of rows and columns, the incidental table has a much prescribed form having just two rows (one for the heading and one for the text) and a single column.

Let’s have a look at the HTML behind this:

<table class="table-incid">
    <tr>                                                 <!-- Header row -->
        <th class="table-cent">A note on Lorem ipsum</th>
    </tr>
    <tr>                                                 <!-- Data row -->
        <td class="table-left">
<p><span class="first-use">Lorem ipsum:</span> this refers to a nonsensical Latin text used to fill space in a document. It has the correct distribution and frequency of letters to match Standard English; it has been used as filler text since the fourteenth century: <span class="first-use">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span></p>

<p>Just type <span class="first-use">blind text</span> into Google to get copyable lorem ipsum, or just follow this link <a class="hlink nohyp" href="http://www.blindtextgenerator.com/lorem-ipsum">blind&nbsp;text</a>.</p>
        </td>
    </tr>
</table>

There’s nothing new in this. It is simply a table with a two rows, the first has a single heading cell <th> the second a single data cell <td>.

The table is of class table-incid and this is similar to the table-clean and table-dense of the previous sections. It works in much the same way. I’ve listed it below:

.table-incid {
    width: 84%;
    margin: 0 auto;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-family: "conc-t3-r";
    font-feature-settings: "ss02";
    font-size: 0.8em;
    background-color: #fbfbfb;
}
.table-incid th {
    font-family: "conc-c3-r";
    font-feature-settings: "ss02";
    font-size: 0.7rem;
    padding: 0.5rem 0.2rem 0.5rem 0.2rem; 
    border-top: 1px solid #cccccc;
}
.table-incid td {
    padding: 0.25rem 0.2rem;
    line-height: 130%;
   border-bottom: 1px solid #cccccc;
}
.table-incid em {
    font-family: "conc-t3-b";
    font-feature-settings: "ss02";
    font-style:normal;
}


.table-incid p {                           
    margin-top: 0.3rem;
    margin-bottom: 0.8rem;
}
.table-incid p:last-child {
    margin-bottom: 0.3rem;
}

Although the table looks different to the standard and dense tables that preceded it, the CSS is virtually identical.

The first ten lines of the table-incid class are identical to the table-clean class. They set the table width to 84% of the central column width and centre it within the column. The borders are collapsed (to produce a single border line between cells, see § 14.1.2) and a whitespace margin is added after the table. The font is again set to Concourse with British settings; the only difference being the font size is 0.8 em (slightly larger than the standard table).

The main difference is in the last line:

    background-color: #fbfbfb;

The table has a light grey background colour.

The next thing is to set the individual styles for the heading and data cells; this again is done with descendant selectors just like the standard and dense tables. The <td> cells (table-incid td) have exactly the same CSS as the <td> cells in the standard table (§ 14.2)

The heading cells (table-incid th) have two main differences, firstly, a small caps font (conc-c3-r), and a top border:

    border-top: 1px solid #cccccc;

This is the same colour as the bottom borders used in the standard and dense tables; it is just applied as a top border in this case.

The paragraph styles for the incidental table (table-incid p) are identical to the standard table; they just define the proper paragraph spacing.

The em style within the incidental table is again set to a Concourse (san-serif) font, again just like the standard table.

To use the incidental table, just enter the table heading between the <th>...</th> tags and enter the table contents surrounded by <p>...</p> tags within the <td>...</td> tags

The incidental table will support multiple paragraphs and the inline stylings specified in § 10.9.