14Tables and Footnotes


The dense table

The standard table used in the last section is the default go-to table for use in most situations. I do however, have denser version of this table that is useful where more information needs to be tabulated, it looks like this:

Symbol Address Rack/slot Card Signal Range Description
PM001_RUNNING I 00.0 1-1/04 32×DI 24 VDC 0/1 Inlet pump 1 - running
PM001_HEALTHY I 00.1 1-1/04 32×DI 24 VDC 0/1 Inlet pump 1 - healthy
PM001_AUTO I 00.2 1-1/04 32×DI 24 VDC 0/1 Inlet pump 1 - auto
MX001_RUNNING I 00.3 1-1/04 32×DI 24 VDC 0/1 Inlet contact tank mixer 1 - running
MX001_HEALTHY I 00.4 1-1/04 32×DI 24 VDC 0/1 Inlet contact tank mixer 1 - healthy
MX001_AUTO I 00.5 1-1/04 32×DI 24 VDC 0/1 Inlet contact tank mixer 1 - auto
SP001_RUNNING I 00.6 1-1/04 32×DI 24 VDC 0/1 Inlet sampling pump 1 - running
SP001_HEALTHY I 00.7 1-1/04 32×DI 24 VDC 0/1 Inlet sampling pump 1 - healthy
Table 99.1   Dense table

This is the standard table for comparison:

Item Function
01 Functional description 1
02 Functional description 2
03 Functional description 3
Table 99.2   The standard table

The basic differences are that the dense table is wider (90% of the central columns area, the standard table was 84%) and uses a noticeable smaller font size: 0.55 em, the standard table used 0.70 em.

The dense table very similar to the standard table and works in exactly the same way, the only difference is the dense table is declared with the class table-dense, the standard table used the class table-clean.

The HTML for the above dense table is (or at least for the first two rows and the caption row):

dense table html
<table class="table-dense" id="js--t99-01">
    <tr>                                                  <!-- Header row -->
        <th class="leading"></th>
        <th class="table-left" style="width: 19%">Symbol</th>
        <th class="table-cent" style="width: 10%">Address</th>
        <th class="table-cent" style="width: 8%">Rack/slot</th>
        <th class="table-cent" style="width: 8%">Card</th>
        <th class="table-cent" style="width: 9%">Signal</th>
        <th class="table-cent" style="width: 11%">Range</th>
        <th class="table-left" style="width: 35%">Description</th>
    <tr class="no-border">                                <!-- Data row -->
    <td class="leading" style="height: 3em"></td>
        <td class="table-left">PM001_RUNNING</td>
        <td class="table-cent">I 00.0</td>
        <td class="table-cent">1-1/04</td>
        <td class="table-cent">32×DI</td>
        <td class="table-cent">24 VDC</td>
        <td class="table-cent">0/1</td>
        <td class="table-left">Inlet pump 1 - running</td>

    ...<!-- REST OF TABLE -->

    <tr class="no-border">                                <!-- caption row -->
        <td class="leading"></td>
        <td colspan="7" class="table-caption">Table 99.2 Dense table</td>
Code 14.4   Dense table HTML

I’m not going to go through the CSS for this; it is virtually identical to the table-clean code, the only difference being the font-size settings. It has all the same components, descendant selectors and child pseudo classes and for exactly the same reasons. Leading, text alignment and the use of borders are all identical and work in exactly the same way.

End flourish image