Edgewall Software

Opened 12 years ago

Closed 12 years ago

#9309 closed enhancement (fixed)

Improve CSS for Wiki Tables

Reported by: Carsten Klein <carsten.klein@…> Owned by: Christian Boos
Priority: normal Milestone: 0.12
Component: wiki system Version: 0.12dev
Severity: trivial Keywords: tables css
Cc: Branch:
Release Notes:
API Changes:
Internal Changes:


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

    377377 border-collapse: collapse;
    378378 border-spacing: 0;
    380 table.wiki td { border: 1px solid #ccc;  padding: .1em .25em; }
     380table.wiki td { border: 1px solid #ccc;  padding: .1em .25em; vertical-align: top; }
    381381table.wiki th {
    382382 border: 1px solid #bbb;
    383  padding: .1em .8em;
     383 padding: .1em .25em;
    384384 background-color: #f7f7f7;
     385 text-align: left;
    387388.wikitoolbar {

Attachments (2)

CSS Change to Wiki Tables Before.png (62.8 KB ) - added by Carsten Klein <carsten.klein@…> 12 years ago.
Before the change
CSS Change to Wiki Tables After.png (63.3 KB ) - added by Carsten Klein <carsten.klein@…> 12 years ago.
After the change

Download all attachments as: .zip

Change History (12)

by Carsten Klein <carsten.klein@…>, 12 years ago

Before the change

by Carsten Klein <carsten.klein@…>, 12 years ago

After the change

comment:1 by Remy Blank, 12 years ago

Horizontal alignment can be controlled using the table syntax:

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


Left Right Center
Some long textSome long textSome 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.

comment:2 by Carsten Klein <carsten.klein@…>, 12 years ago

Will change the page according to your input. Thanks!

comment:3 by Carsten Klein <carsten.klein@…>, 12 years ago

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.

comment:4 by Christian Boos, 12 years ago

Keywords: tables css added
Milestone: 0.12
Owner: set to Christian Boos
  • 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.

comment:5 by anonymous, 12 years ago

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 :)

comment:6 by Mikael Relbe, 12 years ago

comment:5 was written by me (mrelbe)

comment:7 by Christian Boos, 12 years ago

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.

in reply to:  7 comment:8 by Mikael Relbe, 12 years ago

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…

comment:9 by Christian Boos, 12 years ago

||^ 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 ||.=?).

comment:10 by Christian Boos, 12 years ago

Resolution: fixed
Status: newclosed

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.

Modify Ticket

Change Properties
Set your email in Preferences
as closed The owner will remain Christian Boos.
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from Christian Boos to the specified user.

Add Comment

E-mail address and name can be saved in the Preferences .
Note: See TracTickets for help on using tickets.