15
 

Tables

Github and Reddit support creating tables by dividing the column headers (first row) with dashes (-) and separating each column with a pipe (|). Optionally, you can add extra pipes on the ends.
Also, by including colons (:) in the header row, you can define text to be left-aligned, right-aligned, or center-aligned.

Click on the red points to know more. Move through the exercises by using the buttons or the dot menu at the bottom.

Click on the red points to know more. Move through the exercises by using the buttons or by swiping left or right.

| Header | Header | Header | |:---------|:--------:|---------:| | cell | cell | cell|
  • More

    Dashes don't need to match the length of the header text exactly.

    Close
  • More

    A colon on the left-most side indicates a left-aligned column.

    A colon on both sides indicates a center-aligned column.

    A colon on the right-most side indicates a right-aligned column.

    Close
  • More

    Pipes at the beggining and end are just for aesthetic purposes.

    Close

In this exercise, recreate with Markdown the following table:

2000 2010
50 30
Show generated HTML?

In this exercise, recreate with Markdown a little more complex table:

On the left On the right
88 99
Show generated HTML?

In this exercise, recreate with Markdown a more complex table:

Left Column Center Column Right Column
one two three
four five six
seven eight nine
Show generated HTML?

Play with the concepts you just learned!

For example:
Play with the optional pipes on the ends, what happens when you left some pipes on some columns? When you left the pipes on the beginning and delete the ones at the end?
Add other markdown elements to the rows of a table.

See the generated HTML. Even if you don't know HTML, try to understand what's happening. Go wild!

Show generated HTML?

Go to the end