Improve CSS for Wiki Tables

[Carsten Klein <carsten.klein@…>]

See below attachments for a before / after comparison.

For me, the second looks better.

The changes would include a simple patch to trac.css.

trac.css

@@ -377 +377 @@
  border-collapse: collapse;
  border-spacing: 0;
 }
-table.wiki td { border: 1px solid #ccc;  padding: .1em .25em; }
+table.wiki td { border: 1px solid #ccc;  padding: .1em .25em; vertical-align: top; }
 table.wiki th {
  border: 1px solid #bbb;
- padding: .1em .8em;
+ padding: .1em .25em;
  background-color: #f7f7f7;
+ text-align: left;
 }
 
 .wikitoolbar {

[Carsten Klein <carsten.klein@…>]

Before the change

[Carsten Klein <carsten.klein@…>]

After the change

[rblank]

Horizontal alignment can be controlled using the table syntax:

||=Left =||= Right=||=  Center  =||
||Some long text||Some long text||Some long text||

Rendered:

Left	Right	Center
Some long text	Some long text	Some long text

I'm not sure about top vertical alignment, it might be a good idea.

BTW, on TracDev/PluginDevelopment, you could save some horizontal space by not repeating the interface name for the first two columns. For example:

Extension Point Interface	Description
trac.env.IEnvironmentSetupParticipant (source​)	Plugins that provide their own data models must implement this interface to be able to create the required tables in the database on either the creation of a new environment, or during the upgrade of an existing environment.

[Carsten Klein <carsten.klein@…>]

Will change the page according to your input. Thanks!

[Carsten Klein <carsten.klein@…>]

However, still remains the issue of wiki.table th { padding: 0.1em 0.8em } which is different from wiki.table td { padding: 0.1em 0.25em} even when setting headers in the wiki markup to =Left =…

This would still yield unaligned headers in respect to the column content.

[cboos]

• vertical-align: top for <td>: eventually, I'll have to see how it looks on the various tables we already have
• text-align: left for <th>: not by default; the usual expectation for headers is center, but this can be easily changed (see Remy's explanations in comment:1 and more generally WikiFormatting#SimpleTables)
• I'll check the padding.

[anonymous]

If I remember correct, the \ character is now used for continuing table cells across several lines of wiki text. What if that character is used for controlling the vertical alignment within a table cell?

||\HleftVtop || (horizontally left, top-aligned)

|| \HmiddleVtop || (horizontally centered, top aligned)

(Off-topic: is this critical for 0.12? Then please have a look at #9269 :)

[mrelbe]

comment:5 was written by me (mrelbe)

[cboos]

About the suggestion in comment:5: I don't like markup that gets in the way of reading the content.
The wiki markup should follow the almost full text idea, so that you have a close match between what you'd type in a plain text README or mail. If we have some explicit layout indications, then they should be clearly distinguishable from the actual text, which is not the case in your suggestion. For example, in the complex tables examples, the alignment can be specified as normal CSS in the style="…" attribute of the th/td blocks.
Another approach would be to have a non-textual specification of the vertical alignment for the pipe-based syntax. I think ​MoinMoin has such annotations already (<^>, <V>). Note that our horizontal alignment hints are neater than <(>, <:> and <)> as being made of space characters only, they really don't get in the way of reading the content.

[mrelbe]

I have to agree with you, the proposal in comment:5 was written without too much thought…

To save my face, and in the spirit of your remarks, what about keeping vertical alignment in the middle by default, and indicate top alignment like this (for what it's worth):

||^HleftVtop || (horizontally left, top-aligned)

||^ HmiddleVtop || (horizontally centered, top aligned)

One also has to consider this combined with header rows:

||=^HleftVtop =|| (horizontally left, top-aligned)
||^=HleftVtop =|| (horizontally left, top-aligned)

||=^ HmiddleVtop =|| (horizontally centered, top aligned)
||^= HmiddleVtop =|| (horizontally centered, top aligned)

I'll stop there, since I fear this is perhaps received as an equally bad idea…

[cboos]

||^ for top (||. for bottom?) would indeed be quite nice.
I keep that in mind as an idea for future enhancement.
It's not completely trivial either as this has to play well with ||= (||=^ and ||=. or ||^= and ||.=?).

[cboos]

Patch partially applied in r9653.

Let's keep middle vertical alignment by default, as well as center horizontal alignment for table headers.

Ideas for an enhanced annotation for specifying vertical alignment in the pipe-based table syntax noted in TracDev/Proposals/AdvancedWikiFormatting@29.