Created
March 11, 2021 18:37
-
-
Save tabatkins/a29f71075d0b31e014978983beb0078e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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