Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
CSS Classes
When trying to figure out how to reduce the size of the HTML markup, I stumbled across the capability of CSS to specify the format of individual HTML elements. While that feature definitely looked promising, I soon realized that I would be stuck with having a single table format per page if I went down that road. The right solution for my problem was CSS classes: generic selectors that you can attach to any HTML element with the CLASS attribute. Transforming the inline formatting into various classes was pretty easy; I just defined a new class for every set of formatting parameters (see Listing 3).
Listing 3 CSS classes used to format various table cells
.tHeadColumn { font-size: 10pt; font-family: Verdana;
padding-top: 2pt; padding-bottom: 2pt;
border-left-width:1px; border-right-style:solid;
border-right-width:1px; border-top-width:1px;
border-bottom-style:solid; border-bottom-width:1px;
padding-left:8px; padding-right:8px }
.tRowColOne { font-size: 10pt; font-family: Verdana;
padding-top: 2pt; padding-bottom: 2pt;
border-left-width:1px; border-right-style:solid;
border-right-width:1px; border-top-width:1px;
border-bottom-width:1px; padding-left:8px;
padding-right:8px }
While the introduction of CSS classes was a definite improvement over having formatting embedded in HTML markup, the class definition was still highly repetitive. Even worse, if I would decide to change a single common parameter (for example, inter-row padding), I would have to edit a large number of classes. It would obviously be beneficial if I could define the common characteristics only once. A more in-depth look into CSS style sheet structure revealed the answer: a style sheet contains rules that define how individual selectors (classes, for example) are formatted. Each rule could have multiple selectors, and each selector could be defined in multiple rules.
Lesson #3: Define common formatting characteristics only once.
With this discovery, my class definitions and the HTML markup got way better (see Listings 4 and 5).
Listing 4 CSS classes used to format various table cells
.tHeadColumn, .tHeadColLast, .tRowColOne,
.tRowColTwo, .tRowColThree, .tRowColFour {
font-size: 10pt; font-family: Verdana;
padding-left:8px; padding-right:8px;
padding-top: 2pt; padding-bottom: 2pt;
border-width: 2px; }
.tHeadColumn, .tHeadColLast { border-bottom-style: solid; }
.tHeadColumn, .tRowColOne, .tRowColTwo, .tRowColThree {
border-right-style: solid; }
.tRowColOne, .tRowColTwo { text-align: left; }
.tRowColThree { text-align: center; }
.tRowColFour { text-align: right; }
.tEvenRow { background-color: #C0C0C0; }
Listing 5 Printout table formatted with CSS classes
<table cellspacing="0"> <tr> <th class="tHeadColumn">Header #1</th> <th class="tHeadColumn">Header #2</th> <th class="tHeadColumn">Header #3</th> <th class="tHeadColLast">Header #4</th> </tr> <tr> <td class="tRowColOne">Row #1, Col#1</td> <td class="tRowColTwo">Row #1, Col#2</td> <td class="tRowColThree">Row #1, Col#3</td> <td class="tRowColFour">Row #1, Col#4</td> </tr> <tr class="tEvenRow"> ... rest deleted ...
While I was pretty happy with the reduced complexity of the CSS style sheet and the almost-clean HTML markup, I was bothered by the fact that the classes styling individual cells in the table had so many different attributes. It wasn’t until a few years later, though, that I stumbled across a well-hidden feature of CSS: you can list more than one class in the CLASS attribute. Together with the capability to combine HTML element names and CSS classes in CSS selectors, this CSS feature made my CSS definitions clean and simple (see Listing 6).
Listing 6 CSS style sheet and HTML markup with multiple classes per table cell
<style>
.tCell {
font-size: 10pt; font-family: Verdana;
padding-left:8px; padding-right:8px;
padding-top: 2pt; padding-bottom: 2pt;
border-width: 2px; border-right-style: solid; }
.tLast { border-right-style: none !important; }
TH.tCell { border-bottom-style: solid; }
.tColOne, .tColTwo { text-align: left; }
.tColThree { text-align: center; }
.tColFour { text-align: right; }
.tEvenRow { background-color: #C0C0C0; }
</style>
... skipped ...
<table cellspacing="0">
<tr>
<th class="tCell">Header #1</th>
<th class="tCell">Header #2</th>
<th class="tCell">Header #3</th>
<th class="tCell tLast">Header #4</th>
</tr>
<tr>
<td class="tCell tColOne">Row #1, Col#1</td>
<td class="tCell tColTwo">Row #1, Col#2</td>
<td class="tCell tColThree">Row #1, Col#3</td>
<td class="tCell tColFour">Row #1, Col#4</td>
</tr>
<tr class="tEvenRow">
... rest deleted ...
Lesson #4: You can define more than one CSS class for each HTML element.