Tables
Simple tables can be built by separating fields with pipe characters
You type
| name | age | sex |
| joan | 24 | f |
| archie | 29 | m |
| bella | 45 | f |
Resulting HTML
<table>
<tr>
<td> name </td>
<td> age </td>
<td> sex </td>
</tr>
<tr>
<td> joan </td>
<td> 24 </td>
<td> f </td>
</tr>
<tr>
<td> archie </td>
<td> 29 </td>
<td> m </td>
</tr>
<tr>
<td> bella </td>
<td> 45 </td>
<td> f </td>
</tr>
</table>
What appears on the screen
| name | age | sex |
| joan | 24 | f |
| archie | 29 | m |
| bella | 45 | f |
Specify header cells by marking them with an underscore and period.
You type
|_. name |_. age |_. sex |
| joan | 24 | f |
| archie | 29 | m |
| bella | 45 | f |
Resulting HTML
<table>
<tr>
<th>name </th>
<th>age </th>
<th>sex </th>
</tr>
<tr>
<td> joan </td>
<td> 24 </td>
<td> f </td>
</tr>
<tr>
<td> archie </td>
<td> 29 </td>
<td> m </td>
</tr>
<tr>
<td> bella </td>
<td> 45 </td>
<td> f </td>
</tr>
</table>
What appears on the screen
| name | age | sex |
|---|---|---|
| joan | 24 | f |
| archie | 29 | m |
| bella | 45 | f |
Cell Attributes
The period used above marks the end of a cell’s attributes. Other attributes can be applied as well.
You type
|_. attribute list |
|<. align left |
|>. align right|
|=. center |
|<>. justify |
|^. valign top |
|~. bottom |
Resulting HTML
<table>
<tr>
<th>attribute list </th>
</tr>
<tr>
<td style="text-align:left;">align left </td>
</tr>
<tr>
<td style="text-align:right;">align right</td>
</tr>
<tr>
<td style="text-align:center;">center </td>
</tr>
<tr>
<td style="text-align:justify;">justify </td>
</tr>
<tr>
<td style="vertical-align:top;">valign top </td>
</tr>
<tr>
<td style="vertical-align:bottom;">bottom </td>
</tr>
</table>
What appears on the screen
| attribute list |
|---|
| align left |
| align right |
| center |
| justify |
| valign top |
| bottom |
You can also specify colspans with a backslash, followed by the cell width.
You type
|\2. spans two cols |
| col 1 | col 2 |
Resulting HTML
<table>
<tr>
<td colspan="2">spans two cols </td>
</tr>
<tr>
<td> col 1 </td>
<td> col 2 </td>
</tr>
</table>
What appears on the screen
| spans two cols | |
| col 1 | col 2 |
Rowspan is specified by a forward slash, followed by the row height.
You type
|/2. spans 2 rows | a |
| b |
Resulting HTML
<table>
<tr>
<td rowspan="2">spans 2 rows </td>
<td> a </td>
</tr>
<tr>
<td> b </td>
</tr>
</table>
What appears on the screen
| spans 2 rows | a |
| b |
All block attributes can be applied to table cells as well.
You type
|{background:#ddd}. Grey cell|
Resulting HTML
<table>
<tr>
<td style="background:#ddd;">Grey cell</td>
</tr>
</table>
What appears on the screen
| Grey cell |
Table and Row Attributes
Table-wide attributes can be applied before the first row of the table. On its own line, followed by a period.
You type
table{border:1px solid black}.
|This|is|a|row|
|This|is|a|row|
Resulting HTML
<table style="border:1px solid black;">
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>row</td>
</tr>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>row</td>
</tr>
</table>
What appears on the screen
| This | is | a | row |
| This | is | a | row |
Attributes can be applied to a single row by supplying the attribute before the row starts, using a table modifier and following it by a period.
You type
|This|is|a|row|
{background:#ddd}. |This|is|grey|row|
Resulting HTML
<table>
<tr>
<td>This</td>
<td>is</td>
<td>a</td>
<td>row</td>
</tr>
<tr style="background:#ddd;">
<td>This</td>
<td>is</td>
<td>grey</td>
<td>row</td>
</tr>
</table>
What appears on the screen
| This | is | a | row |
| This | is | grey | row |
A full table styles can be used if they are available. This is great to keep consistency of overall table formatting. Just use the style attribute for the entire table.
You type
table(listing).
|_. name |_. age |_. sex |
| joan | 24 | f |
| archie | 29 | m |
| bella | 45 | f |
Resulting HTML
<table class="listing">
<tbody>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr>
<td>joan</td>
<td>24</td>
<td>f</td>
</tr>
<tr>
<td>archie</td>
<td>29</td>
<td>m</td>
</tr>
<tr>
<td>bella</td>
<td>45</td>
<td>f</td>
</tr>
</tbody>
</table>
What appears on the screen
| name | age | sex |
|---|---|---|
| joan | 24 | f |
| archie | 29 | m |
| bella | 45 | f |
