Textile

Tables

| A | simple | table | row |
| And | another | table | row |
| With an | | empty | cell |

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 period 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 columns:

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. Add a table caption using the following on its own row. It must appear above your first table row/thead declaration. The usual (class#id), {style} and [lang] attributes can be used before the dot:

|=. Your caption goes here

8. Place a summary of your table after the optional table. definition:

table. This is a journey into sound. Stereophonic sound.

9. Column group specification is supported using the following syntax on its own row. It must appear above your first table row/thead declaration (either before or after any caption):

|:.

Specify the usual (class#id), {style}, [lang] and \colspan attributes before the dot to affect all columns in the <colgroup>. Any number appearing after the dot is considered to be a width designator for the entire <colgroup>.

You may also add ‘cells’ to this row, each of which will specify the span and width of a <col> tag. Examples…

Specify width of all columns in the colgroup:

|:. 100|

<colgroup width="100"></colgroup>

Specify width and span in a colgroup tag:

|:\3. 100|

<colgroup span="3" width="100"></colgroup>

Specify individual <col> tags to control the layout of columns:

|:. |\2. |\3. 50|

<colgroup>
    <col span="2" />
    <col span="3" width="50" />
</colgroup>

Designate a default span and width (plus class/@id@) to the <colgroup>, then override the widths of some columns:

|:\5(grpclass#grpid). 200 | 100 ||| 80 |

<colgroup class="grpclass" id="grpid" span="5" width="200">
    <col width="100" />
    <col />
    <col />
    <col width="80" />
</colgroup>

10. A ‘full kitchen sink’ table example:

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 |

Further reading: Tables

1. MDN: The HTML <table> element
2. W3Schools: HTML tables tutorial