Hexo

마크다운 테이블 정렬 Markdown Table

markdown, markdown table, pipe, 마크다운, 마크다운 테이블, 마크다운 테이블 안에 |, 마크다운 테이블 안에 코드, 마크다운 테이블 정렬, 마크다운 표, 테이블 정렬

마크다운 테이블 Markdown table

마크다운 문법으로 테이블을 간편하게 그릴 수 있습니다. 보통 키보드에서 Backspace아래에 있는 |을 사용하는데요.
| 이 기호는 영어로 파이프(pipe)라고 부릅니다.

마크다운 테이블 예시는 아래와 같습니다.

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

가운데 정렬을 하기 위해 Are 밑에 :-------------:를 사용하고, 오른쪽 정렬을 사용할 때에는 ------:를 사용하면 됩니다.
그리고 굳이 위와 같이 이쁘게 테이블 정렬을 하지 않아도 됩니다. 보기 편하라고 정렬을 하기는 하지만 굳이 바쁘다면 아래와 같이 테이블을 만들어도 상관 없습니다. 출력되는 결과는 위와 같습니다.

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

꿀 TIP

마크다운에 테이블 안에 | 파이프 기호를 사용하려면 파이프 기호 대신에 &#124; 를 입력하면 됩니다! HTML에서는 &#124;가 파이프로 보입니다. 더해서 그 부분을 코드화 시키고 싶다면 <code>&#124;</code>입력하면 됩니다.

1
2
3
4
a     |  r  
------------|-----
`a += x;`  |  r1
<code>a &#124;= y;</code>  |  r2
a r
a += x; r1
a |= y; r2

그리고 그리는 것도 못하고 안에 내용만 써서 테이블을 만들고 싶다! 귀찮은 분들은 아래의 링크를 클릭하도록 합시다. (저도 테이블 그리기 귀찮아서 잘 사용하고 있습니다.)

귀찮음

  • 마크다운 테이블을 만드는데 아주 유용한 사이트 :

Markdown Tables Generator

테이블 제너레이터 위의 이미지를 클릭하면 크게 볼 수 있습니다. 위의 이미지를 클릭하면 크게 볼 수 있습니다.
  1. 1번에 테이블에 내용을 입력합니다.
  2. 2번의 Generate 버튼을 클릭합니다.
  3. 3번의 버튼을 클릭해 만들어진 내용을 복사합니다.
  4. 원하는 곳에 붙여넣기(Ctrl + v) 하시면 됩니다.

Reference

Share