gitea-pages/pages/mydoc/mydoc_tables.md

title, tags, keywords, last_updated, datatable, summary, sidebar, permalink, folder

title	tags	keywords	last_updated	datatable	summary	sidebar	permalink	folder
Tables	formatting	datatables, tables, grids, markdown, multimarkdown, jquery plugins	July 16, 2016	true	You can format tables using either multimarkdown syntax or HTML. You can also use jQuery datatables (a plugin) if you need more robust tables.	mydoc_sidebar	mydoc_tables.html	mydoc

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

{% include note.html content="You can't use block level tags (paragraphs or lists) inside Markdown tables, so if you need separate paragraphs inside a cell, use <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](http://google.com). Or see [some link][mydoc_tags].
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.

Markdown doesn't allow you to add classes to tables, so you'll need to use HTML for any DataTables. Here's an example:

<table id="sampleTable" class="display">
   <thead>
      <tr>
         <th>Parameter</th>
         <th>Description</th>
         <th>Type</th>
         <th>Default Value</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Parameter 1</td>
         <td>Sample description
         </td>
         <td>Sample type</td>
         <td>Sample default value</td>
      </tr>
      <tr>
         <td>Parameter 2</td>
         <td>Sample description
         </td>
         <td>Sample type</td>
         <td>Sample default value</td>
      </tr>
    <tr>
       <td>Parameter 3</td>
       <td>Sample description
       </td>
       <td>Sample type</td>
       <td>Sample default value</td>
    </tr>
      <tr>
         <td>Parameter 4</td>
         <td>Sample description
         </td>
         <td>Sample type</td>
         <td>Sample default value</td>
      </tr>
   </tbody>
</table>

This renders to the following:

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.

{% include note.html content=" Try to keep the columns to 3 or 4 columns only. If you add 5+ columns, your table may create horizontal scrolling with the theme. Additionally, keep the column heading titles short." %}

{% include links.html %}