Textile · Tables

More about: Tables

1) Headings are preceded by |_.

|_. First Header |_. Second Header |
| Content Cell | Content Cell |

2) HTML5 requires the use of a <thead> tag. A <tfoot> tag is optional.

The <thead> tag is added when |^. above and |-. below the heading are used.

|^.
|_. First Header |_. Second Header |
|-.
| Content Cell | Content Cell |
| Content Cell | Content Cell |

The <tfoot> tag is added when |~. above and |-. below the footer are used.

|~.
|\2=. A footer, centered & across two columns |
|-.
| Content Cell | Content Cell |
| Content Cell | Content Cell |

3) Attributes are be applied either to individual cells, rows, or to the entire table.

Cell attributes are placed within each cell:

|a|{color:red}. styled|cell|

Row attributes are placed at the beginning of a row, followed by a dot and a space:

(rowclass). |a|classy|row|

Table attributes are specified by placing the special table. block modifier immediately before the table:

table(tableclass).
|a|classy|table|
|a|classy|table|

4) Spanning rows and colums

A backslash \ is used for a column span.

|\2. spans two cols |
| col 1 | col 2 |

A forward slash / is used for a row span.

|/3. spans 3 rows | row a |
| row b |
| row c |

5) Vertical alignments within a table cell

|^. top alignment|
|-. middle alignment|
|~. bottom alignment|

6) Horizontal alignments within a table cell

|:\1. |400|
|=. center alignment |
| no alignment |
|>. right alignment |

7) A complex table example (from Netcarver’s Textile 2.2 Test Page)

p=. Full table with summary, caption, colgroups, thead, tfoot, 2x tbody

table(#dvds){border-collapse:collapse}. Great films on DVD employing Textile summary, caption, thead, tfoot, two tbody elements and colgroups
|={font-size:140%;margin-bottom:15px}. DVDs with two Textiled tbody elements
|:\3. 100 |{background:#ddd}|250||50|300|
|^(header).
|_. Title |_. Starring |_. Director |_. Writer |_. Notes |
|~(footer).
|\5=. This is the tfoot, centred |
|-(toplist){background:#c5f7f6}.
| _The Usual Suspects_ | Benicio Del Toro, Gabriel Byrne, Stephen Baldwin, Kevin Spacey | Bryan Singer | Chris McQuarrie | One of the finest films ever made |
| _Se7en_ | Morgan Freeman, Brad Pitt, Kevin Spacey | David Fincher | Andrew Kevin Walker | Great psychological thriller |
| _Primer_ | David Sullivan, Shane Carruth | Shane Carruth | Shane Carruth | Amazing insight into trust and human psychology through science fiction. Terrific! |
| _District 9_ | Sharlto Copley, Jason Cope | Neill Blomkamp | Neill Blomkamp, Terri Tatchell | Social commentary layered on thick, but boy is it done well |
|-(medlist){background:#e7e895;}.
| _Arlington Road_ | Tim Robbins, Jeff Bridges | Mark Pellington | Ehren Kruger | Awesome study in neighbourly relations |
| _Phone Booth_ | Colin Farrell, Kiefer Sutherland, Forest Whitaker | Joel Schumacher | Larry Cohen | Edge-of-the-seat stuff in this short but brilliantly executed thriller |

8) Make tables sortable

For a sortable table, first grab the javascript from this site,

and then insert a class named “sortable” for the table to be sorted, to make the table sortable:

table(sortable).
|^.
| |_. First Header |_. Second Header |
|-.
| line one of a | sortable|table |
| line two of a | sortable|table |

In order to add stripes to the sortable table, you need a CSS like this:

table.sortable tbody tr:nth-child(2n) td {
  background: #ffcccc;
}
table.sortable tbody tr:nth-child(2n+1) td {
  background: #ccfffff;
}

9) Table support

For further information using tables, see the developer notes on tables

Paste code into the box above.

TxStyle · Textile Documentation

Tables

More about: Tables

Further reading: Tables