66

I have a table:

    | This | Is | A | Table |
    | :--- | -- | - | ----: |
    | foo  | ba | r | elbaT |

I'd like the table to display in the center of my Markdown file instead of left-aligned. I am not trying to align text, but the entire table itself. Do I need to resort to HTML/CSS to achieve what I want?

This is for an Apiary.io project.

Zdenek
  • 3,653
  • 27
  • 34
Meredith
  • 3,928
  • 4
  • 33
  • 58
  • For Material for MkDocs: https://github.com/squidfunk/mkdocs-material/issues/3430#issuecomment-1005973474 – phoenix Jan 05 '22 at 18:34

6 Answers6

78

If you use the standard documentation, use the <center> tag like so.

Blueprint

FORMAT: 1A
HOST: http://www.google.com

# Tables
Notes API is a *short texts saving* service similar to its physical paper presence on your table.

<center>

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |

</center>

# Group Notes

(...)

Preview

If you use the ‘New Documentation’, it's not possible to center a table (since the table takes a full width of the column).

Preview

Baggz
  • 17,207
  • 4
  • 37
  • 25
  • 1
    While this at least directly answers my question, the second hit on Google (for me) leads to [a StackOverflow question asking why `center` is deprecated](http://stackoverflow.com/q/1798817/1708136). Thanks for the effort though – Meredith Jul 11 '14 at 00:35
29

  1. |-| is used to indicate the table header and : is used to indicate text alignment. Text is left aligned by default.

    Col 1 Col 2
    Value 1 Value 2
    Value 3 Value 4

  2. |:-| is used to left align the text inside header and column.

    Col 1 Col 2
    Value 1 Value 2
    Value 3 Value 4

  3. |-:| is used to right align the text inside header and column.

    Col 1 Col 2
    Value 1 Value 2
    Value 3 Value 4

  4. |:-:| is used to center align the text inside header and column.

    Col 1 Col 2
    Value 1 Value 2
    Value 3 Value 4
Dheemanth Bhat
  • 4,269
  • 2
  • 21
  • 40
yashod perera
  • 375
  • 3
  • 3
  • 6
    As is sometimes the case, the actual answer is at the bottom – AIDoubt Oct 03 '20 at 23:19
  • 10
    The question, however, is for centering the table itself, and not its contents. I can see how it's easy to misunderstand though. – Bryan K Jan 26 '21 at 18:22
  • In original answer, alignments are wrongly associated with the symbols. Correct association is :- for left and -: for right. – Dheemanth Bhat Jun 30 '23 at 01:42
16

A simple method that everyone seems to have overlooked is to enclose the table within a div and use the align="center" property on it.

<div align="center">

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |

</div>

Works just like <center> used to. No need to worry about <center> getting deprecated anymore. ;)

codesnerd
  • 767
  • 2
  • 8
  • 23
Rohan Lekhwani
  • 470
  • 4
  • 14
14

Yes. You can have GFM tables in API Blueprint – check http://docs.tables.apiary.io for rendered version of the blueprint source bellow. 

FORMAT: 1A

# Tables API 
Note: Tables can be handcrafted or generated at <http://www.tablesgenerator.com/markdown_tables>.

## Table 1
**Discussion option 1**

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |

# Message [/pages]
## Create a Message [POST]

### Table 2
**Discussion option 2**

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |

+ Request (application/json)

    ## Table 3
    **Discussion option 3**

    | Tables   |      Are      |  Cool |
    |----------|:-------------:|------:|
    | col 1 is |  left-aligned | $1600 |
    | col 2 is |    centered   |   $12 |
    | col 3 is | right-aligned |    $1 |

    + Headers

            Authorization:Bearer tokenString

    + Body

            { ... }

+ Response 201
Zdenek
  • 3,653
  • 27
  • 34
  • 5
    Isn't the question about "centering the whole table on the page"? Whereas this response is about "centering the text within a single column"? I can't find anywhere that any Markdown variant allows centering or indenting text (except pre/code blocks, but they also literalize the Markdown that defines the table). – jackr Jul 07 '14 at 17:18
  • Good point! I have misunderstood the answer – AFAIK there is no way to do it within Apiary. I will keep you updated on whether/how it is possible in the embedded documentation. – Zdenek Jul 08 '14 at 10:44
7

My solution detailed by Gaffney in an Apiary.io issue comment.

Basically I add custom stylesheets and scripts within apiary.apib HTML blocks to style the page with HTML instead of headwalling that a Markdown dialect isn't CSS.

Also "How to Center Anything in CSS".

Meredith
  • 3,928
  • 4
  • 33
  • 58
0

From Yihui's book(https://bookdown.org/yihui/rmarkdown-cookbook/kable.html) re: kable():

Tables are center-aligned by default when they are included in a table environment (i.e., when the table has a caption). If you do not want to center a table, use the argument centering = FALSE.

pdw5
  • 33
  • 6