14Tables and Footnotes

In­ci­den­tal ta­bles are used to add clar­i­fi­ca­tions or ad­di­tional points into the main body of the text.

In­ci­den­tal ta­bles have a sim­i­lar use to side­bars, but ap­pear in the cen­tral area and can gen­er­ally con­tain more in­for­ma­tion (they are much wider than side­bars).

The fol­low­ing is an ex­am­ple of an in­ci­den­tal table:

Un­like stan­dard and dense ta­bles, which have a very flex­i­ble and cus­tomis­able arrange­ment of rows and columns, the in­ci­den­tal table has a much pre­scribed form hav­ing just two rows (one for the head­ing and one for the text) and a sin­gle col­umn.

Let’s have a look at the HTML be­hind 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 noth­ing new in this. It is sim­ply a table with a two rows, the first has a sin­gle head­ing cell <th> the sec­ond a sin­gle data cell <td>.

The table is of class table-incid and this is sim­i­lar to the table-clean and table-dense of the pre­vi­ous sec­tions. 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;
}

Al­though the table looks dif­fer­ent to the stan­dard and dense ta­bles that pre­ceded it, the CSS is vir­tu­ally iden­ti­cal.

The first ten lines of the table-incid class are iden­ti­cal to the table-clean class. They set the table width to 84% of the cen­tral col­umn width and cen­tre it within the col­umn. The bor­ders are col­lapsed (to pro­duce a sin­gle bor­der line be­tween cells, see § 14.1.2) and a white­space mar­gin is added after the table. The font is again set to Con­course with British set­tings; the only dif­fer­ence being the font size is 0.8 em (slightly larger than the stan­dard table).

The main dif­fer­ence is in the last line:

    background-color: #fbfbfb;

The table has a light grey back­ground colour.

The next thing is to set the in­di­vid­ual styles for the head­ing and data cells; this again is done with de­scen­dant se­lec­tors just like the stan­dard and dense ta­bles. The <td> cells (table-incid td) have ex­actly the same CSS as the <td> cells in the stan­dard table (§ 14.2)

The head­ing cells (table-incid th) have two main dif­fer­ences, firstly, a small caps font (conc-c3-r), and a top bor­der:

    border-top: 1px solid #cccccc;

This is the same colour as the bot­tom bor­ders used in the stan­dard and dense ta­bles; it is just ap­plied as a top bor­der in this case.

The para­graph styles for the in­ci­den­tal table (table-incid p) are iden­ti­cal to the stan­dard table; they just de­fine the proper para­graph spac­ing.

The em style within the in­ci­den­tal table is again set to a Con­course (san-serif) font, again just like the stan­dard table.

To use the in­ci­den­tal table, just enter the table head­ing be­tween the <th>...</th> tags and enter the table con­tents sur­rounded by <p>...</p> tags within the <td>...</td> tags

The in­ci­den­tal table will sup­port mul­ti­ple para­graphs and the in­line stylings spec­i­fied in § 10.9.