table parser add data attributes for easier styling

[pmario]

Main Goal TLDR;

Having the data-addr attribute on every cell, it will allow custom js-macros to create very specific STYLEs to make it easy for users to manually style single cells eg: <<tableBG green>>, without the need to count rows or columns, which is needed at the moment.

---

This PR adds some new attributes to tables created with wikitext. This makes it easier to style columns and specific cells.

• oddCol or evenCol classes are added to every table-cell.
  • colCount starts with 1
• data-row attribute is added to every TR element
  • rowCount starts with 0 for compatibility reasons and
  • TH element usually is row 0
• data-col attribute is added to every cell
• data-addr attribute added to every cell. The format is <rowCount>/<colCount>

This allows us to:

• Style a alternating columns based on CSS .oddCol and .evenCol
• Style a specific column based on CSS [data-col="x"] selector
• Style a specific row based on CSS [data-row="y"] selector
• Style a specific cell with CSS [data-addr="row/col"]

Related Talk threads:

• https://talk.tiddlywiki.org/t/coloring-table-cells-with-css/7430
• https://talk.tiddlywiki.org/t/highlight-the-background-color-of-any-cell-with-duplicate-content-in-any-row-or-column-in-a-table/9538
• https://talk.tiddlywiki.org/t/change-the-background-color-of-one-single-cell-easily/9751

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
tiddlywiki5	✅ Ready (Inspect)	Visit Preview	May 3, 2024 1:07pm

[pmario]

The best way to test is

| A | B | C | D |h
|Cell1 |Cell2 |Cell3 |Cell4 |
|Cell5 |Cell6 |Cell7 |<|
|Cell5 |~|Cell7 |Cell8 |
|>|Cell9 |Cell10 |Cell11 |