Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Tag Soup
The customer requirements for the printout I had to implement were pretty simple:
- The table should have a heading line with a distinctive bottom border.
- Even lines should be shaded for easier reading.
- There should be a vertical border between the columns.
- The first two columns should be left-aligned, the third centered, and the last right-aligned.
- The text used in the printout should be a bit smaller than the font size of the rest of the page.
- There should be a bit of padding between the lines of the table and a bit more padding between the columns.
The obvious implementation of these requirements by a hard-core old-school HTML coder that I was at that time was as follows:
- Use the CELLSPACING attribute of the TABLE element to achieve the desired padding.
- Use the ALIGN attribute of table cells (TD elements) to make the necessary alignments.
- Use the FONT elements to decrease the font size of the table text.
Not surprisingly, this way of formatting is rightfully called "the tag soup" (see Listing 1), and any standard-minded web developer looking at my HTML markup risked getting a serious heart attack. Even worse, I couldn’t implement half of the requirements (shading, bottom border of the table header, or inter-column borders). Obviously, it was time to try out some CSS tricks.
Listing 1 Printout implement as »tag soup«
<table cellspacing=3 border=0> <tr> <td align=left><font size=3>Col #1</font></td> <td align=left><font size=3>Col #2</font></td> <td align=center><font size=3>Col #3</font></td> <td align=right><font size=3>Col #4</font></td> </tr>
Lesson #1: Do not use HTML tags to achieve formatting or styling. HTML tags should be used for semantic markup, and CSS attributes should be used to format the content.