14
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):
<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> <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> </tr> ...<!-- 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> </tr> </table>
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.