html

On using code as illustration

This morning we had a team breakfast session in the recently redecorated Herman Boerhaave (*) meeting hall of our Millennium Tower.

Part of the decoration of the wall behind the projector screen was this bit of html:

Below I’ll explain why I’m certain that for every meeting I’ll have there I’ll be annoyed by it.

I’ve found the source of the code (“Here at HTML.am, you can find all things HTML - from HTML codes, HTML editors, HTML generators and more.”) and the complete snippet is this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { width:400px;background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:50%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

What’s wrong with this code

  • The CSS is inline.
  • The CSS and HTML are not indented.
  • There’s no space between the properties and the values.
  • For such a short <style> declaration there’s no need for <!-- Start/End Styles --> comments.
  • The colors are not defined in a consistent way: a background-color is defined in hexadecimal (#000, which would be black as a named color) while the color is defined as the named color white.
  • The classname does not follow any CSS naming convention.
  • The table does not have a <thead> and tbody.

Here’s what I would have like to see on the wall

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.c-table--rigidtwocolumn {
  width: 400px;
  background-color: #eee;
  border-collapse: collapse;
}

.c-table--rigidtwocolumn th {
  background-color: #000;
  color: #fff;
  width: 50%; 
}

.c-table--rigidtwocolumn td, .c-table--rigidtwocolumn th {
  padding: 5px;
  border: 1px solid #000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table class="c-table--rigidtwocolumn">
  <thead>
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell 1</td>
      <td>Table cell 2</td>
    </tr>
    <tr>
      <td>Table cell 3</td>
      <td>Table cell 4</td>
    </tr>
  </tbody>
</table>

Why .c-table--rigidtwocolumn?

  • c-table is the component name
  • --rigidtwocolumn describes the modifier of the component: it’s a fixed width table that can only contain two columns of equal width

Here’s a fiddle if you want to improve my fix!

(*) About Herman Boerhaave

Simplex sigillum veri: ‘The simple is the sign of the true’

Herman Boerhaave was a Dutch botanist, chemist, Christian humanist, and physician of European fame. He is regarded as the founder of clinical teaching and of the modern academic hospital and is sometimes referred to as “the father of physiology,” along with Venetian physician Santorio Santorio (1561–1636). Boerhaave introduced the quantitative approach into medicine, along with his pupil Albrecht von Haller (1708–1777) and is best known for demonstrating the relation of symptoms to lesions. He was the first to isolate the chemical urea from urine. He was the first physician to put thermometer measurements to clinical practice. His motto was Simplex sigillum veri: ‘The simple is the sign of the true’. He is often hailed as the “Dutch Hippocrates”.

Source: https://en.wikipedia.org/wiki/Herman_Boerhaave