Markdown - Table

This tutorial covers Markdown tables - align left,center,right and include content format content styles inside it, syntax with examples..

Table basics

Tables are used to represent the data in multidimensional format.Initially tables are not supported in core markdown specification, Once extended vendors like github formatted markdown supported tables,Markdown team added inbuilt support.

Tables containers rows and columns and headers, can be created using Pipe operator ! and dash symbols -. Headers are created using minimum of three hyphens, Columns of data or header can be separated by pipe symbol.

here is a table syntax

|Header1 |Header2  | Header3|
--- | --- | ---
|data1|data2|data3|
|data11|data12|data13|

following is generated html code

<table>
   <thead>
      <tr>
         <th>Header1</th>
         <th>Header2</th>
         <th>Header3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>data1</td>
         <td>data2</td>
         <td>data3</td>
      </tr>
      <tr>
         <td>data11</td>
         <td>data12</td>
         <td>data13</td>
      </tr>
   </tbody>
</table>

Output generated in browser is

Header1Header2Header3
data1 data2data3
data11data12data13

Some of the rules of markdown tables

  • Header are separated by pipes
  • tables with out header are not supported in core specification
  • Minimum of 3 dashes under each header name is required, can declare more than three dashes
  • Pipes symbol is optional, but use for readability
  • Each column of row data is separated by pipe symbol
  • There can be multiple rows pipe symbol on row start and end are optional.
  • table’s data like header and row can contain simple text or markdown content

Include content format styles

table cell data can include all other markdown content styles like links,bold if cell content wants to include pipe or backtick symbol,symbols needs to be escaped.

table data can include

|Header1 |Header2  | Header3|
|--- | --- | ---|
|**bold style**| `code block`|data3|
|\|escape pipe|\`backtick|data13|

Output is

Header1Header2Header3
bold stylecode blockitalic
|escape pipe`backtickdata13

Align cell data using colon symbol

header and cell data can be aligned to left or right of a columns in a table Below example explains about alignment

  • Content to align left by prefix colon : before dashes - :---
  • Right align by suffix colon : after dashes - ---:
  • Centre align by prefix and suffix colon : for dashes - :---:

|Header1 |Header2  | Header3|
|:--- | ---: | :---:|
|Align left| Align right|center text|
|cell data1|cell data2|cell data3|

Example for align table data

Header1Header2Header3
Align leftAlign rightcenter text
cell data1cell data2cell data3