CSS styling of SPIP tables

CSS stylesheets give fine-grained control over the presentational display of tables generated by SPIP.

CSS stylesheets give fine-grained control over the presentational display of tables generated by SPIP.

Using tables is a simple method for presenting data in rows and columns.

To get the most out of this article, it’s recommended that you understand the HTML table syntax: the <table> tag, which inserts a table within an HTML page, is one of the most used tag in HTML and here we explain how you can personalise the styling of this tag in SPIP.

To insert tables in SPIP’s articles (and other content areas) the authors use the following syntax:

||Table Caption|Table Summary||
| {{Name}} | {{Date of birth}} | {{City}} |
| Jacques | 5/10/1970 | Paris |
| Claire | 12/2/1975 | Belfort |
| Martin | 1/31/1957 | Nice |
| Marie | 23/12/1948 | Perpignan |

which will display like this:

Table Caption
Table Summary
Name Date of birth City
Jacques 5/10/1970 Paris
Claire 12/2/1975 Belfort
Martin 1/31/1957 Nice
Marie 23/12/1948 Perpignan

CSS styling allows us to control the display of such tables with fine-grained options. Here are the available CSS selectors:

-  table.spip is used to modify the general style of the table as a whole, specifically its size, margins, position, and other properties that may "cascade" to sub-elements of the table (text justification, fonts, etc.);

-  table.spip caption is used to modify the style of the (optional) table caption;

-  table.spip tr.row_first is used to modify the style of the "first row" of the table (shown here in yellow with the default SPIP style). In order for this first row to be considered as a header row, each of its element should be made "bold" [1];

-  table.spip tr.row_odd and table.spip tr.row_even are used to style all subsequent rows. One obvious use for this is to alternate the colour or background colour for consecutive rows (shown here in light grey and dark grey with the default SPIP style), which makes the table much easier to read;

-  table.spip th and table.spip td are used to specify the style, respectively, for the table headers [2] and the individual table cells, by changing, for example, their internal spacing (padding) to "space things out" for improved legibility.

Footnotes

[1using the {{... }} shortcut

[2the cells in the first line of the table where the content has been entered in bold

Author Mark Published : Updated : 29/06/23

Translations : català, English, Español, français, italiano, Nederlands