Skip to content

Instantly share code, notes, and snippets.

@tabatkins
Created March 11, 2021 18:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tabatkins/a29f71075d0b31e014978983beb0078e to your computer and use it in GitHub Desktop.
Save tabatkins/a29f71075d0b31e014978983beb0078e to your computer and use it in GitHub Desktop.
There's a reason people don't like to write HTML tables,
and it's because they don't write good HTML in the first place.
Case in point, taken from a spec I'm editting right this moment:
```html
<table id="distinguishable-table" class="matrix data complex">
<tr>
<th class="corner"></th>
<th><div>
<span>boolean</span>
</div></th>
<th><div>
<span>numeric types</span>
</div></th>
<th><div>
<span>bigint</span>
</div></th>
<th><div>
<span>string types</span>
</div></th>
<th><div>
<span>object</span>
</div></th>
<th><div>
<span>symbol</span>
</div></th>
<th><div>
<span>interface-like</span>
</div></th>
<th><div>
<span>callback function</span>
</div></th>
<th><div>
<span>dictionary-like</span>
</div></th>
<th><div>
<span>sequence-like</span>
</div></th>
</tr>
...
</table>
```
I don't know how this got into the state it's in, but that's *awful*.
It's a heading row not in `thead`,
the tags are broken into newlines in an arbitrary pattern,
and the indentation is just *the worst*, totally self-inconsistent and wrong.
(The `div` and `span` are just some styling wrappers to enable a neat diagonal layout;
they're not the point of the complaints here.)
Here it is fixed:
```html
<table id="distinguishable-table" class="matrix data complex">
<thead>
<tr>
<th class="corner"></th>
<th><div><span>boolean</span></div>
<th><div><span>numeric types</span></div>
<th><div><span>bigint</span></div>
<th><div><span>string types</span></div>
<th><div><span>object</span></div>
<th><div><span>symbol</span></div>
<th><div><span>interface-like</span></div>
<th><div><span>callback function</span></div>
<th><div><span>dictionary-like</span></div>
<th><div><span>sequence-like</span></div>
</thead>
...
</table>
````
Everything rolled up into single reasonable lines,
omittable end tags omitted,
`thead` added...
it's a beautiful thing now.
(Technically the `</thead>` could be omitted
since it'll be implied when the parser sees the following `<tbody>` start tag,
but I prefer keeping it in
so I can rely on automatic `tbody` insertion instead,
which lets me reduce the indentation of the body rows by one level.)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment