2024-01-05 HTML learnings for this month

---

Contents

HTML notes and learnings

Table alignment

Item 2

End of document

---

HTML notes and learnings

So, I'm getting a bit ... ticked off with clicking the "open in new window" option on Blogger's "add link" dialog. So ... I should be able to put ' target="_blank" ' into the CSS style header for my "a" link. No? Need to check on a different page!

OK, well I tried that - at least simplistically with 'a {target:"_blank";}' in the "style" header block . Didn't work ; page opened in the same tag.

Now, why didn't it work?

Table fidding

Do I have unstructured ways to add a comment to a table. Or would a caption do? I've got "caption-side: bottom;" set in the style sheet.

I set up a TFOOT line below the TBODY section, including a TR with COLSPAN set to occupy the whole table.

I need to find a better way to set columns to R-align - better than cell-by-cell, at least. (Stack-Overflow suggests CSS of ... Which looks workable. But it's complicated. It's easier to change the default to , because that's what I'm going to use most often. And it's mucking up updating. Or is the system just broken? This is getting horribly complex - and not working with the big table in the MOND post.

Nope, I don't understand this. Yet.

Back to Contents.

This post is probably going to grow "Contents" and sections. It's a more incremental concept.

---

Table Column styling

Working on the MOND table, I realised that I hate the (default) left-alignment of tables. I need to find a way to make this.column left-aligned, that.column right-aligned, and other.column centered. Something better and more manageable than setting EVERY cell.

So, what I'm wanting is something like :

H1	H2	H3	H4
1	2	3	4
2,1	2,2	2,3	2,4
3,1	3,2	3,3	3,4
4,1	4,2	4,3	4,4
F1	F2	F3	F4

But every line is of the form : ..tr....td style="text-align:right"..4,1../td....td..4,2../td.. ..td style="text-align:center"..4,3../td.. ..td style="text-align:left"..4,4../td..../tr..
which is undesirably verbose.

StackOverflow has a question that suits, and an answer:

<colgroup> <col> <col style='text-align:right'> </colgroup> <tbody> <tr [...] then "if you look at the MDN [Mozilla Developer Network] docs for <col>, you find this: "Do not try to set the text-align property on a selector giving a <col> element. Because <td> elements are not descendant of the <col> element, they won't inherit it."

So, I think I need to go down the "define my own classes" route : HTML isn't rendered by column, it's rendered by rows. That's why there ,,tr..,,/tr.. (table rows) exist, but ..tc,,../tc,, (table columns) do not. That being said, the easiest way to style a column in HTML, is by applying the same CSS class to every ..td,,../td,, in the given column. You can type in the same class to every one manually, or you could write it programmatically, via javascript or a server-side script.

So I need a worked example of defining, say, three derived classes : td.l, td.c, td.r (TableData.Left, etc). This multiply-linked solution seems specific for 4-column tables, with the 3rd column R-aligned. Ungood, I think.

What I think I'm going to try is

1. define an extension to td (possibly also to th, for completeness?) "td.l", which inherits td's properties but adds "text-align: left;"
2. similarly "td.r" and "td.c"
3. then set up rows of [blah] td.r td.r td.c [blah]
4. Which isn't as elegant as I'd like, but if the alternative is having to write whole new sets of table definitions for every instance, may be good enough.

Testing (pretty-aligned)

Right	Centre	Left
r	c c	llll
rRRRR	c CCCC	LLLll
rRR	c cCCC	lLLL
rR	c cCC	lLLll

OK - I'm getting somewhere now. I need my own class in the STYLE header (wol.td.c etc), then have my own "td class=..." in each row. Which is still 8 more characters than I'd like per element, but it's getting better. Unfortunately, while it seems to be legal, it's not having the desired effects.

Nope, still too much burying data in presentation. Just stick to the long-winded method - it's little worse.

W3.CSS approach.

https://www.w3schools.com/w3css/w3css_tables.asp has a way of "classing" centre- or left- aligned table cells. But their implementation ends up with code like "<th class="w3-right-align"> Points</th>" ... which in itself isn't so great. BUT it does only need setting in the header they assert. OK, "imply" in the first level demonstration ; I checked and it's untrue. It needs setting on every cell. No benefit.

Back to Contents.

---

Foot - I still need to fix the image size problem.

End of document