markdown Table

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, the Markdown team added inbuilt support.

The table contains following components

  • Caption
  • header and footers
  • body

Tables containers rows and columns and headers. It can be created using the Pipe operator ! and dash symbols -.

Headers are created using a minimum of three hyphens, Columns of data or headers can be separated by the 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 the browser is

Header1 Header2 Header3
data1 data2 data3
data11 data12 data13

Some of the rules of markdown tables

  • Header are separated by pipes
  • tables without header are not supported in core specification
  • Minimum of 3 hyphens(dash symbol)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 the 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

Markdown table 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 symbols, symbols need to be escaped.

table data can include

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

Output is

Header1 Header2 Header3
bold style code block italic
|escape pipe `backtick data13

Align cell data using colon symbol

header and cell data can be aligned to the left or right of columns in a table The 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 aligning table data

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