Markdown - Table

markdown Table

Tables are used to represent the data in a multidimensional format.

Initially, tables were not supported in core markdown specification, Once extended vendors like GitHub formatted markdown supported tables, the Markdown team added inbuilt support.

The table contains the 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

Some of the rules of markdown tables

• Headers are separated by pipes
• tables without headers are not supported in core specification
• A minimum of 3 hyphens(dash symbol)under each header name is required, can declare more than three dashes
• Pipes(|) symbol is optional, but used for readability
• Each column of row data is separated by the pipe symbol
• There can be multiple rows
• pipe symbols 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

Align cell data using the 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