Page MenuHomePhabricator

Easier and better alignment within Wiki Tables
Open, MediumPublic


Author: D.U.Thibault

Right now, specifying alignment within Wiki tables is somewhat painful, what with having to type style=text-align:right; or some such in front of every cell.

The wish is to be able to specify, within a table's block of headers, the data column alignments once, in compact notation. We'd also like not only right/center/left alignment but also number alignment (on the number's decimal separator, even for scientific notation). Something like:

{| border=1 cellpadding=2 [...]
! data-align=left | Header 1
! data-align=number | Header 2

In this example, the two headers define the alignment to use for any following data cells (the first two columns, anyway).

These settings would be locally overridden (on a per-cell basis) by the usual style=text-align:whatever;| instructions.

Version: unspecified
Severity: enhancement



Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 6:53 PM
bzimport added a project: MediaWiki-Parser.
bzimport set Reference to bz418.
bzimport added a subscriber: Unknown Object (MLST).

maybe have a look at the <col> html tag. I have no idea if it's still
valid xhtml though.

zigger wrote:

See also bug 986, which requests the HTML tags COL, COLGROUP, TBODY and THEAD. wrote:

This functionality would be handled by <colgroup> and <col>. They are valid in HTML5, which is the future (XHMTL2.0 is dead). Also totally stale.

*** This bug has been marked as a duplicate of bug 986 ***

TheDJ reopened this task as Open.EditedFeb 1 2016, 12:43 PM
TheDJ added a subscriber: TheDJ.


As detailed in T2986#1649109, the properties text-align and vertical-align (which are the corner stone of this request), are not actually assignable by way of the COL or COLGROUP elements.

Instead, I think that in order to properly solve this, we would likely require a form of T483 to target the <td>'s with selectors. Possibly combined by an extension to the wikicode syntax ?

Should this be closed once TemplateStyles is deployed?

I don't think TemplateStyles is going to solve the root problem. Sure, theoretically it will give the ordinary users much more flexibility in styling their tables, but it isn't reasonable to expect that most will want to deal with full-blown CSS. Currently, the best way of achieving per-column alignment seems to be defining specific classes that should cover all possible cases: col-1-center, col-2-right, etc., and then adding them to the table header, e.g. {| class="wikitable col-3-right col-4-right". This is cumbersome, especially for larger tables, but at least it doesn't require technical knowledge from the ordinary editors.

I suggest using data-align="..." (left, center, right) in the column header. Modeled on data-sort-type="..."

See Help:Sorting. data-sort-type="..." is discussed in the section called "Forcing a column to have a particular data type":

data-sort-type="..." is placed in the column header to force a column to sort by text, number, etc..

data-align="..." (left, center, right) could be used to force a column's cells to be aligned left, right, or center.

See List of countries by intentional homicide rate:

The country, region, and subregion columns need their text aligned left. The rate and count columns need their data aligned right. So there are 3 text columns aligned left, and 2 data columns aligned right. By default, browsers left-align all cells, other than header cells. Header cells are center-aligned by default.

So the main editors at that table used inline CSS to align every data cell to the right. They used class=plainrowheaders to align the text in the row header cells (country names) to the left.

This table is periodically updated every year or 2 as new data comes out. The alignment CSS has to be added to all those cells again. This method is a lot of clutter, and unnecessary work.

Usually one can use tab2wiki, LibreOffice Calc, and/or the Visual Editor to update these type of tables relatively quickly. Except for the cell content alignment.

See the Visual Editor section at the bottom of Help:Table.