Multimarkdown Tables
You can use Multimarkdown syntax for tables. The following shows a sample:
| Priority apples | Second priority | Third priority |
|-------|--------|---------|
| ambrosia | gala | red delicious |
| pink lady | jazz | macintosh |
| honeycrisp | granny smith | fuji |
Result:
Priority apples | Second priority | Third priority |
---|---|---|
ambrosia | gala | red delicious |
pink lady | jazz | macintosh |
honeycrisp | granny smith | fuji |
<br/><br/>
.HTML Tables
If you need a more sophisticated table syntax, use HTML syntax for the table. Although you’re using HTML, you can use Markdown inside the table cells by adding markdown="span"
as an attribute for the td
tag, as shown in the following table. You can also control the column widths.
<table>
<colgroup>
<col width="30%" />
<col width="70%" />
</colgroup>
<thead>
<tr class="header">
<th>Field</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td markdown="span">First column **fields**</td>
<td markdown="span">Some descriptive text. This is a markdown link to [Google](http://google.com). Or see [some link][mydoc_tags].</td>
</tr>
<tr>
<td markdown="span">Second column **fields**</td>
<td markdown="span">Some more descriptive text.
</td>
</tr>
</tbody>
</table>
Result:
Field | Description |
---|---|
First column fields | Some descriptive text. This is a markdown link to Google. Or see some link. |
Second column fields | Some more descriptive text. |
jQuery DataTables
You also have the option of using a jQuery DataTable, which gives you some additional capabilities. To use a jQuery DataTable in a page, include datatable: true
in a page’s frontmatter. This tells the default layout to load the necessary CSS and javascript bits and to include a $(document).ready()
function that initializes the DataTables library.
You can change the options used to initialize the DataTables library by editing the call to $('table.display').DataTable()
in the default layout. The available options for Datatables are described in the DataTable documentation, which is excellent.
You also must add a class of display
to your tables. You can change the class, but then you’ll need to change the trigger defined in the $(document).ready()
function in the default layout from table.display
to the class you prefer.
You can also add page-specific triggers (by copying the <script></script>
block from the default layout into the page) and classes, which lets you use different options on different tables.
If you use an HTML table, adding class="display"
to the <table>
tag is sufficient.
Markdown, however, doesn’t allow you to add classes to tables, so you’ll need to use a trick: add <div class="datatable-begin"></div>
before the table and <div class="datatable-end"></div>
after the table. The default layout includes a jQuery snippet that automagically adds the display
class to any table it finds between those two markers. So you can start with this (we’ve trimmed the descriptions for display):
<div class="datatable-begin"></div>
Food | Description | Category | Sample type
------- | ------------------------------------- | -------- | -----------
Apples | A small, somewhat round ... | Fruit | Fuji
Bananas | A long and curved, often-yellow ... | Fruit | Snow
Kiwis | A small, hairy-skinned sweet ... | Fruit | Golden
Oranges | A spherical, orange-colored sweet ... | Fruit | Navel
<div class="datatable-end"></div>
and get this:
Food | Description | Category | Sample type |
---|---|---|---|
Apples | A small, somewhat round and often red-colored, crispy fruit grown on trees. | Fruit | Fuji |
Bananas | A long and curved, often-yellow, sweet and soft fruit that grows in bunches in tropical climates. | Fruit | Snow |
Kiwis | A small, hairy-skinned sweet fruit with green-colored insides and seeds. | Fruit | Golden |
Oranges | A spherical, orange-colored sweet fruit commonly grown in Florida and California. | Fruit | Navel |
Notice a few features:
- You can keyword search the table. When you type a word, the table filters to match your word.
- You can sort the column order.
- You can page the results so that you show only a certain number of values on the first page and then require users to click next to see more entries.
Read more of the DataTable documentation to get a sense of the options you can configure. You should probably only use DataTables when you have long, massive tables full of information.