Next / Previous / Contents / TCC Help System / NM Tech homepage

4.5. CSS considerations in page design

All the generated pages use the stylesheet in Section 60, “The CSS-2 stylesheet”.

Note

The term rule is confusing in this context because it has two senses. A CSS rule is a command regarding the styling of an XHTML element. But a rule, in typesetting parlance, means a solid (ruled) line, because originally it was drawn with a ruler. What the author calls a ruled table, others might call a gridded table. The CSS concept of solid borders are used to implement ruled tables by specifying borders around each cell.

At design time, the question arises: what code applies the styles to a given XHTML element? Here are the author's design guidelines.

Here is a screen shot of a test XHTML page that shows how to place a thick rule around the entire table, and thin rules inside it with thicker rules before every second row and fourth column.

And here is the actual HTML with an embedded stylesheet. The border-collapse: collapse; rule is essential for sane design of ruled tables: it specifies that the border between any two cells will be the thicker of the borders specified by adjacent cells.

Suppose we want to group cells into groups of R rows and C columns. All we have to do is add class topper to every cell whose row number is a multiple of R, and add class lefter to every cell whose column number is a multiple of C.

ruly.htm
<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>Thick rules test</title>
    <style type='text/css'>
      table.census-table
      { border-collapse: collapse; border: 3px solid black; }

      th.row-label
      { text-align: left; background: #ddffdd; /* pale green */
        border: 3px solid black;
        padding: 2px; */ }

      td.d
      { border: 1px solid black; background: #ddffff; /* pale cyan */
        padding: 2px; text-align: right; }

      td.topper { border-top-width: 3px; }

      td.lefter { border-left-width: 3px; }
    </style>
  </head>
  <body>
    <h1>Thick rules test</h1>
    <table class='census-table'>
      <tr>
        <th class='row-label' rowspan='3' valign='top'>Great Skua</th>
        <td class='d topper lefter'>1</td>
        <td class='d topper'>2</td>
        <td class='d topper'>3</td>
        <td class='d topper'>4</td>
        <td class='d topper lefter'>5</td>
        <td class='d topper'>6</td>
        <td class='d topper'>7</td>
        <td class='d topper'>8</td>
        <td class='d topper lefter'>9</td>
        <td class='d topper'>10</td>
      </tr>
      <tr>
        <td class='d lefter'>11</td>
        <td class='d'>12</td>
        <td class='d'>13</td>
        <td class='d'>14</td>
        <td class='d lefter'>15</td>
        <td class='d'>16</td>
        <td class='d'>17</td>
        <td class='d'>18</td>
        <td class='d lefter'>19</td>
        <td class='d'>20</td>
      </tr>
      <tr>
        <td class='d topper lefter'>21</td>
        <td class='d topper'>22</td>
        <td class='d topper'>23</td>
        <td class='d topper'>24</td>
        <td class='d topper lefter'>25</td>
        <td class='d topper'>26</td>
        <td class='d topper'>27</td>
        <td class='d topper'>28</td>
        <td class='d topper lefter'>29</td>
        <td class='d topper'>30</td>
      </tr>
    </table>
  </body>
</html>