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