마크 다운은 내가 거의 모든 것을 쓰는 형식입니다 - READMEs,플러그인 문서,릴리스 노트,풀 요청 설명,WP Adminify 의 변경 로그,내 내부 메모의 절반. 그것은 하나를 제외한 모든 구성에 대해 방해가됩니다. 테이블이 관련된 순간,나는 쓰기를 멈추고 파이프 문자를 계산하기 시작하며 흐름이 사라졌습니다. 5 행 테이블에 열을 추가하고 6 줄을 손으로 편집하고 있으며,더하기 구분 기호 행,페이지가 렌더링 될 때까지 올바르게 얻었는지 알 수 없습니다.
TL;DR: X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 마크다운 테이블 생성기 스프레드시트 스타일의 그리드를 제공하고 입력할 때 유효한 GitHub Flavored Markdown 을 생성하며 CSV,스프레드시트 붙여넣기 또는 기존 Markdown 테이블을 가져와서 재구성할 수 있습니다. 클릭 한 번으로 열별 정렬을 설정하고 Markdown,HTML 또는 CSV 를 내보냅니다. 모든 것이 브라우저에서 실행됩니다.
이 도구는 테이블 구문이 소스 형식이 편집과 적극적으로 싸우는 Markdown의 한 부분이기 때문에 존재합니다. 이 가이드에서는 GFM 테이블의 작동 방식, 렌더링 여부를 결정하는 규칙, 행을 끊는 이스케이프 트랩, 워크플로 테이블에 생성기를 사용하는 방법을 다룹니다. 일반적으로 스프레드시트, 쿼리 결과 또는 누군가가 이미 작성한 테이블에서 나옵니다.
Markdown 테이블이란 무엇입니까?
마크다운 테이블은 세 가지 재료가 고정된 순서로 쌓여 있습니다: 헤더 행, 구분자 행, 0 개 이상의 본문 행 테이블은 코어 마크다운의 일부가 전혀 아닙니다 - 테이블에 의해 정의된 확장입니다 GitHub 맛 마크다운 사양가 되므로 테이블이 GitHub 에서 렌더링되고 다른 곳에서는 리터럴 파이프로 나올 수 있습니다. 셀은 파이프 문자로 구분되며 각 행은 정확히 한 줄을 차지합니다.
| Tool | Category | Offline |
| --- | --- | --- |
| JSON Formatter | Coding | Yes |
| YAML to JSON | Data | Yes |
구분자 행은 파이프를 포함하는 단락이 아닌 테이블로 만드는 부분입니다. 두 번째 줄이어야 하며 선택적 콜론이 있는 하이픈으로 구성되어야 하며 헤더와 동일한 수의 셀을 가져야 합니다. 잘못된 항목을 가져오면 렌더러는 전체 블록을 일반 텍스트로 처리합니다. 이것이 바로 "my table renders as plain text"가 거의 항상 구분자 행 문제입니다.
테이블은 원래 CommonMark 사양의 일부가 아닙니다. 그들은 GitHub Flavored Markdown 확장으로 도착했으며 이후 거의 모든 곳에서 채택되었습니다: GitHub,GitLab, Bitbucket,Obsidian, Notion,Docusaurus, MkDocs,VitePress, Hugo,Jekyll, Discord,그리고 대부분의 정적 사이트 생성기 "Almost"는 작동 단어입니다. 확장이없는 최소한의 CommonMark 렌더러는 테이블을 리터럴 파이프로 표시하고 수정 사항은 대신 HTML 을 방출하는 것입니다 - 생성기는 출력 탭을 한 번 클릭으로 수행 할 수 있습니다.
구문을 보기보다 유지하기 어려운 이유
마크다운 테이블을 읽는 것은 쉽습니다. 하나를 유지하는 것은 비용이 숨는 곳이며,네 곳에서 나옵니다.
구조는 구두점에 산다. 정규식,셸 명령,TypeScript 유니온 유형에도 나타나는 문자 외에는 셀 경계가 없습니다. 셀 내부의 모든 항목은 이스케이프되거나 행이 자동으로 열을 얻습니다.
정렬은 콜론 배치로 인코딩됩니다. 왼쪽의 콜론은 왼쪽 정렬,양쪽의 콜론은 가운데,오른쪽의 콜론은 오른쪽 정렬,기억할 키워드가 없고,의 차이 ---: 그리고 :--- 아무도 자세히 읽지 않는 연속된 한 캐릭터입니다.
편집은 여러 줄로 이루어집니다. 열을 추가한다는 것은 모든 행과 구분자를 터치한다는 의미입니다. 행을 재정렬한다는 것은 시각적 피드백 없이 잘라내어 붙여넣는 것을 의미합니다. 열을 삭제한다는 것은 모든 행에서 n 번째 파이프를 검색하는 것입니다.
소스의 정렬은 수동입니다. 패딩된 열은 필요하지 않습니다 - 렌더러는 여분의 공백을 무시합니다 - 그러나 패딩되지 않은 테이블은 diff에서 읽기가 비참하기 때문에 사람들은 손으로 패딩한 다음 cell's 콘텐츠가 커질 때마다 다시 패딩합니다.
그리드 편집기는 네 가지를 모두 제거합니다. 셀을 편집합니다; 구문이 생성됩니다. 이것이 도구의 전체 전제입니다.
Markdown 테이블 생성기를 사용하는 방법
1 단계: 데이터를 그리드에 가져옵니다
데이터가 이미 존재하는 위치에 따라 세 가지 경로가 있습니다.
입력하세요. 그리드는 채워진 샘플로 열립니다. 셀을 덮어쓰거나,빈 3x3 에 대해 Clear 를 누르고 새로 시작합니다.
스프레드시트에서 붙여넣기. 가져오기 패널을 열고 Excel,Google Sheets,Numbers 또는 LibreOffice 에서 복사한 범위를 붙여넣습니다. 스프레드시트는 탭으로 구분된 텍스트를 클립보드에 넣으면 가져오기가 자동으로 이를 감지합니다. 어떤 구분 기호를 사용하고 있는지 알 필요가 없습니다.
CSV 또는 기존 테이블을 붙여넣습니다. 동일한 패널에서 CSV,세미콜론으로 구분된 내보내기 (많은 유럽 로케일의 기본값), 파이프 구분 텍스트 및 Markdown 테이블을 허용합니다. 텍스트가 Markdown 테이블처럼 보이는 경우 - 헤더 줄 뒤에 구분자 행이 오는 - 열 정렬을 포함하여 하나로 구문 분석되므로 README 에서 테이블을 로드하고 재구성하여 다시 붙여넣을 수 있습니다.
CSV 가져오기는 순진하게 쉼표로 나누는 것이 아니라 RFC 4180 규칙을 따릅니다. 인용된 필드에는 문자 그대로의 인용 문자를 나타내는 쉼표,줄 바꿈 및 이중 따옴표가 포함될 수 있습니다. 이는 소리보다 더 중요합니다: 쉼표를 사용하는 로케일의 주소,설명 또는 가격이 포함된 내보내기는 순진한 나누기를 깨뜨리고 열이 한 셀이 짧을 때까지 눈치채지 못할 것입니다. CSV 가 가져오기 전에 검사할 만큼 큰 경우,the CSV 뷰어 먼저 정렬 가능한 그리드로 엽니다.
2 단계: 테이블 모양 만들기
그리드 주변의 컨트롤은 원시 Markdown에서 고통스러운 작업을 다룹니다:
- 행 그리고 칼럼 그리드 끝에 추가.
- 각 행 옆에 있는 화살표는 위나 아래로 이동합니다. 가장 중요하다고 결정한 항목별로 비교 테이블을 정렬하는 데 유용합니다.
- 행이나 열 헤더의 마이너스 버튼은 모든 행에서 한 번에 삭제합니다.
- 조옮김하다 행과 열을 교환합니다. 보고서에서 붙여넣은 데이터는 문서의 방향을 잘못 잡는 경우가 많으며,전치하는 것은 전체 재유형 대신 한 번의 클릭입니다.
3 단계: 열당 정렬 설정
각 열 헤더는 세 개의 정렬 버튼을 가지고 있습니다: 왼쪽,중앙, 오른쪽. 하나를 클릭하여 적용하고 다시 클릭하여 renderer's 기본값으로 돌아갑니다. 생성기는 해당 콜론을 구분자 행에 씁니다.
정렬은 의도적으로 사용할 가치가 있습니다. 숫자 열 - 가격,개수, 백분율,기간 - 숫자가 자리 값으로 정렬되기 때문에 훨씬 더 잘 오른쪽 정렬로 읽습니다. 짧은 상태 값은 중앙에 깔끔하게 보입니다. 텍스트는 왼쪽에 속합니다. 이것은 장식이 아닙니다; 오른쪽 정렬 된 숫자 열은 가장 큰 값을 스캔하는 것이 진정으로 빠릅니다.
4 단계: 출력 형식을 선택하고 복사합니다
세 개의 출력 탭:
마크다운 GFM을 생산합니다. 그만큼 패딩된 열 토글은 셀이 공백으로 패딩되어 있는지 여부를 제어하므로 원시 소스가 고정 공간 편집기에 정렬됩니다. 패딩은 테이블 렌더링 방법에 대해 아무것도 변경하지 않습니다. 이는 순전히 diff에서 파일을 읽는 사람을 위한 것입니다. 외부 파이프 각 행의 앞 파이프와 뒷 파이프를 제어합니다; 두 스타일 모두 유효하며 앞 파이프 스타일이 훨씬 더 일반적인 규칙입니다.
HTML a를 생산합니다 <table> 와 함께 <thead> 그리고 <tbody> 그리고 인라인 text-align 열 정렬과 일치하는 스타일 테이블 지원이 부족한 렌더러,이메일 템플릿 또는 필요할 때 사용하십시오 colspan 그리고 마크다운이 표현할 수 없는 다중선 셀들. 다른 방향으로 가서 웹페이지에서 테이블을 들어 올리고 싶다면 HTML에서 마크다운으로 처리합니다.
CSV 스프레드시트에 붙여넣거나 스크립트에 입력하기 위해 그리드를 적절하게 인용된 데이터로 다시 제공합니다.
클립보드에 복사하거나 다운로드하세요 .md, .html, 또는 .csv 파일.
실제로 테이블을 깨는 탈출 규칙
두 문자는 거의 모든 고장난 마크다운 테이블을 발생시키며, 둘 다 생성기에 의해 자동으로 처리됩니다. 하지만 손으로 편집하는 테이블의 규칙을 알아야 합니다.
파이프. 셀 내부의 문자 그대로 파이프는 다음과 같이 작성해야 합니다 \|. 백슬래시가 없으면 렌더러는 열 구분 기호를 보고 행은 셀을 얻어 그 이후의 모든 열을 버립니다. 이는 셀에 합법적으로 다음과 같은 내용이 포함된 기술 문서에서 가장 세게 나타납니다 string | null, grep foo | wc -l또는 정규식 교대. 이스케이프는 백틱 코드 범위 내부에서도 작동합니다. Markdown's usual "code spans are literal" 규칙이 적용되지 않습니다.
개행. GFM 테이블은 엄격하게 한 줄에 한 행이므로 셀에 실제 줄 바꿈을 포함할 수 없습니다. 범용 해결 방법은 HTML 입니다 <br> 태그. 멀티 라인 콘텐츠를 그리드에 붙여 넣으면 생성기가 태그를 삽입합니다; 포함된 테이블을 가져올 때 <br>를 사용하면 편집기에서 실제 줄 바꿈으로 다시 변환되므로 셀이 편집하기에 편안합니다.
두 개의 규칙이 더 있으면 "my table does not render" 테이블 자체와 관련이 없는 리포트를 유발하기 때문에 메모리에 커밋할 가치가 있습니다. 첫째,테이블은 단락을 따를 때 그 앞에 빈 줄이 필요합니다. 둘째,목록 항목 안에서는 전체 테이블이 목록 item's content 열에 들여쓰기되어야 합니다. - 그렇지 않으면 목록이 첫 번째 줄을 삼키고 구분자 행이 잘못된 위치에 떨어집니다.
테이블이 어디서 나오는지, 각 사례가 어떻게 흐르는지
보내주신 스프레드시트
범위를 복사하고 가져오기 패널에 붙여넣고 그리드에 로드하고 아무도 필요하지 않은 열을 삭제하고 숫자 하나를 오른쪽 정렬하고 Markdown을 복사합니다. 10이 직접 포맷되는 테이블의 경우 1분 미만입니다.
쿼리 결과 또는 API 응답
JSON 으로 시작하는 데이터는 보통 한 홉이 필요합니다. 로 변환합니다 JSON에서 CSV로그리고 CSV 를 임포터에 붙여 넣습니다. 반대로 - 데이터로 필요한 Markdown 테이블 - 출력 탭에서 CSV 를 내보내고 실행합니다 CSV에서 JSON.
README 에 이미 존재하는 테이블
가져오기 패널에 붙여넣습니다. 정렬이 그대로 유지된 채 그리드로 다시 들어오기 때문에 열을 추가하거나 행을 재정렬하는 것은 다시 작성하기보다는 일반적인 편집입니다. 이것이 제가 가장 많이 사용하는 워크플로입니다: 문서 테이블은 몇 달 동안 한 번에 한 행씩 성장한 다음 한 번에 구조 조정이 필요합니다.
처음부터 작성하는 비교표
그리드부터 시작해서 생각대로 입력하고 패딩이 스스로 정렬되도록 하세요. 파이프 구문 대신 그리드에 비교를 작성하면 열이 정렬되는지 여부보다는 비교가 공정한지 여부에 주의를 기울이게 됩니다.
여러 렌더러에서 작동해야 하는 문서입니다
GFM 테이블을 지원하는 플랫폼에 대한 마크다운을 생성한 다음 출력 탭을 그렇지 않은 플랫폼에 대한 HTML 로 전환합니다. 동일한 그리드,두 개의 내보내기,다시 입력하지 않음. 파이프라인이 어쨌든 마크다운을 HTML 로 변환하는 경우 마크다운에서 HTML로 변환이 생성하는 것을 정확하게 보여줍니다.
마크다운 테이블과 HTML 테이블
| 고려사항 | 마크다운 테이블 | HTML 테이블 |
|---|---|---|
| 소스의 가독성 | 높음 - 일반 텍스트로 스캔 가능 | 낮음 - 태그가 콘텐츠를 지배합니다 |
| 다선 셀 | 경유만 <br> |
네이티브, 모든 블록 콘텐츠 |
| 병합된 셀 | 지원되지 않음 | colspan 그리고 rowspan |
| 열별 정렬 | 예, 구분자 콜론을 통해 가능합니다 | 예, CSS 또는 속성을 통해 가능합니다 |
| 스타일링 컨트롤 | 없음 | 전체 CSS |
| 렌더러 지원 | GFM 확장은 널리 퍼져 있지만 보편적이지는 않습니다 | HTML이 허용되는 모든 곳에서 보편적입니다 |
| Diff 친근감 | 좋아요, 행당 한 줄씩요 | 불쌍하고, 행당 많은 라인 |
실용적인 규칙: 병합된 셀,셀 내부의 블록 요소 또는 특정 스타일링이 필요할 때까지 Markdown 을 사용하십시오. 그런 다음 해당 테이블 하나를 HTML 로 전환하고 문서의 나머지 부분은 그대로 둡니다. 대부분의 Markdown 렌더러는 원시 HTML 을 통과하므로 두 가지를 하나의 파일에 혼합하는 것이 정상입니다.
개인 정보 보호에 대한 참고 사항
사람들이 구축하는 테이블은 종종 그들이 오히려 업로드하지 않을 것입니다: 가격은 아직 발표되지 않은, 인원수, 내부 벤치 마크, a client's 스프레드 시트에서 붙여 넣은 데이터.
생성기는 클라이언트 측 JavaScript 입니다. 그리드,import 파서 및 모든 내보내기가 페이지에서 실행되고 붙여 넣는 모든 것이 머신을 떠나지 않습니다. 한 번로드하면 오프라인으로 계속 작동합니다. 그것은 Toolz.dev 의 모든 것 뒤에있는 동일한 원리이며 추론은 가이드에서 전체 내용을 읽을 가치가 있습니다 온라인 도구의 데이터 개인 정보 보호. 일상 업무를 위해 더 광범위한 브라우저 기반 유틸리티 세트를 구성하는 경우 코딩 도구 가이드 그리고 the 웹 개발자 툴킷 책갈피를 얻는 다른 것을 덮으십시오.
실용적인 팁
헤더를 짧게 유지하십시오. 패딩을 켜면 열에서 가장 넓은 셀이 소스의 모든 행의 너비를 설정합니다. 장황한 헤더는 렌더링 이점이 없도록 원시 파일을 시끄럽게 만듭니다.
생성된 파일에 대해 패딩되지 않은 출력을 두려워하지 마십시오. 테이블이 스크립트로 작성되었지만 소스로 읽히지 않은 경우 패딩을 끄고 바이트를 저장합니다.
붙여넣기 전에 정렬하세요. 한 번에 화살표 클릭 한 번으로 행 순서를 다시 지정하는 것은 다섯 행에서는 괜찮고 50 행에서는 지루합니다. 스프레드시트에서 먼저 정렬한 다음 가져옵니다.
빈 헤더 행을 조심하세요. With "첫번째 행은 header" 꺼져,GFM 은 헤더 없는 테이블을 표현할 방법이 없기 때문에 생성기는 데이터 위에 빈 헤더를 내보냅니다. 일부 렌더러는 이를 얇은 빈 행으로 보여줍니다. 귀찮다면 헤더가 전혀 필요 없는 HTML 을 대신 내보냅니다.
소스가 아닌 렌더링된 결과를 확인합니다. 완벽해 보이는 패딩 소스는 구분자 행에 셀 수가 잘못되어 있어도 여전히 잘못 렌더링할 수 있습니다. publishing on 하는 플랫폼이 무엇이든 간에 preview 에 붙여넣기 한 후 done 이라고 부릅니다.
자주 묻는 질문
Markdown에서 테이블을 생성하려면 어떻게 해야 합니까?
마크다운 테이블에는 헤더 행,하이픈의 구분자 행,레코드당 하나의 행이 필요하며,셀은 파이프 문자로 구분됩니다. 생성기의 그리드를 채우면 도구는 구분자 행과 모든 정렬 콜론을 포함하여 해당 구문을 작성합니다.
마크다운 테이블에서 열을 정렬하려면 어떻게 해야 합니까?
정렬은 구분자 행의 콜론으로 설정됩니다: 왼쪽의 콜론은 왼쪽 정렬,양쪽 중앙의 콜론,오른쪽의 콜론은 오른쪽 정렬 편집기의 열 헤더에서 정렬을 선택하면 올바른 콜론 배치가 자동으로 생성됩니다.
Excel 또는 Google 스프레드시트 범위를 마크다운 테이블로 변환할 수 있습니까?
네. 스프레드시트의 셀을 복사하여 가져오기 패널에 붙여넣습니다. 스프레드시트는 가져오기 사용자가 자동으로 감지하고 그리드에 로드하는 클립보드에 탭으로 구분된 텍스트를 배치합니다.
테이블 셀 안에 파이프 문자를 어떻게 넣나요?
리터럴 파이프는 백슬래시와 함께 이스케이프되어야 하며 그렇지 않으면 렌더러가 열 구분자로 읽습니다. 에디터에서 파이프를 정상적으로 입력하면 생성기가 출력에서 이스케이프됩니다.
마크다운 테이블 셀에 여러 줄이 포함될 수 있습니까?
GFM 테이블은 엄격하게 한 줄에 한 행이기 때문에 실제 개행이 아닙니다. 일반적인 해결 방법은 셀 내부에 HTML 줄 바꿈 태그가 있으며,붙여 넣은 셀에 줄 바꿈이 포함되어 있으면이 도구가 자동으로 삽입합니다.
내 테이블이 GitHub에서 일반 텍스트로 렌더링되는 이유는 무엇입니까?
구분자 행은 거의 항상 원인입니다: 두 번째 줄이어야하며 헤더와 동일한 수의 셀을 가져야합니다. 테이블 앞에 누락 된 빈 줄은 테이블이 단락을 따르거나 목록 안에있을 때 렌더링을 중지 할 수도 있습니다.
소스가 정렬되도록 열을 채우어야 합니까?
아니요. 렌더러는 여분의 공백을 무시하므로 추가되지 않은 테이블은 동일하게 표시됩니다. 패딩은 편집기 또는 diff 에서 원시 파일을 읽는 인간을 위해 존재합니다. 컴팩트 소스를 선호하는 경우 패딩된 출력 토글로 꺼두십시오.
마크다운 테이블은 모든 곳에서 지원됩니까?
테이블은 원래 CommonMark 사양의 일부가 아닌 GitHub Flavored Markdown 확장입니다. GitHub,GitLab, Obsidian,Notion, Docusaurus 및 대부분의 정적 사이트 생성기는 이를 지원하지만 일부 최소 렌더러는 지원하지 않습니다. 출력이 HTML 중 하나라면 HTML 로 전환하십시오.
