도움말:표

해당 문서는 리브레 위키를 참고하여 작성되었습니다. 고급 문법의 경우 리브레 위키의 도움말:표을 참고하여 적용하시면 됩니다.

1 개요

표는 정보를 직관적으로 표현하기 위해 자주 이용되는 양식 중 하나입니다.

이 문서에서는 표를 만드는 방법과, 표를 보기 좋게 꾸미는 방법에 대해 알려드립니다.

2 표의 생성

표를 생성하는 가장 기초적인 문법은 다음과 같이 세 가지로 나눌 수 있습니다.

• 표의 기본적인 구조 : {|, |}, |, |-의 네 가지 필수 기호
• 표의 제목·머리말 칸 : |+, !의 두 가지 옵션 기호
• 모니위키 방식 : ||, !!를 사용하는 모니위키스러운 작성 방법

2.1 표의 기본적인 구조 : {|, |}, |, |-

표는 기본적으로 {|, |}, |, |-의 네 가지 기호로 만들 수 있습니다.

• {| : 표의 시작을 나타냅니다.
• |} : 표의 마침을 나타냅니다. 즉, {|와 |} 사이가 표의 내용이 됩니다.
• | : 한 칸을 나타냅니다. 그 칸에 들어갈 내용은 | 오른쪽에 적습니다.
• |- : 행과 행 사이를 구분하는 구분선 기호입니다.

다음은 예시입니다.

입력 방법	결과
{| class="wikitable" | 생리학 | 병리학 | 생화학 |- | 生理學 | 病理學 | 生化學 |- | physiology | pathology | biochemistry |}	생리학 병리학 생화학 生理學 病理學 生化學 physiology pathology biochemistry

2.1.1 알면 좋은 참고 사항

필요하다면 {| 바로 다음 줄과 |} 바로 전 줄에 |-를 추가로 넣어도 상관 없습니다.

입력 방법	결과
{| class="wikitable" |- | 생리학 | 병리학 | 생화학 |- | 生理學 | 病理學 | 生化學 |- | physiology | pathology | biochemistry |- |}	생리학 병리학 생화학 生理學 病理學 生化學 physiology pathology biochemistry

앞으로의 설명에서, 특별한 경우가 아니면 {| 바로 다음 줄의 |-는 표기하고, |} 바로 전 줄의 |-는 표기하지 않겠습니다.

---

표 내용을 기입할 때, 띄어쓰기를 아무리 많이해도 실제 표의 표현에는 영향을 주지 않습니다.

입력 방법	결과
{| class="wikitable" |- | 생리학 | 병리학 | 생화학 |- | 生理學 | 病理學 | 生化學 |- | physiology | pathology | biochemistry |}	생리학 병리학 생화학 生理學 病理學 生化學 physiology pathology biochemistry

---

만약 칸에 들어갈 내용을 입력하지 않는다면, 그 칸은 빈 칸으로 남게 됩니다.

입력 방법	결과
{| class="wikitable" |- | 생리학 | | 생화학 |- | 生理學 | 病理學 | |- | | pathology | biochemistry |}	생리학 생화학 生理學 pathology biochemistry

---

표 문법에서는 엔터 입력, 즉 줄바꿈까지 문법의 일부로 인식하기 때문에 표 안에서 줄 바꿈을 하고 싶을 때는
태그를 이용해야 합니다. 엔터 입력 만으로는 표 안에서의 줄바꿈이 제대로 되지 않습니다.

입력 방법	결과
{| class="wikitable" |- | 엔터로 줄바꿈을 하면 공간이 남아요. |- | 桔梗味苦療咽腫 載藥上升開胸壅 |}	엔터로 줄바꿈을 하면 공간이 남아요. 桔梗味苦療咽腫 載藥上升開胸壅
{| class="wikitable" |- | 태그로<br>줄바꿈을 하면<br>깔끔합니다. |- | 桔梗味苦療咽腫<br>載藥上升開胸壅 |}	줄 바꿈을 태그로 하면 이렇게 됩니다. 桔梗味苦療咽腫 載藥上升開胸壅

2.2 표의 제목 : |+

행이 본격적으로 시작하기 전(={|와 첫 |-사이)에
|+를 입력하면 표의 제목('캡션'이라고도 합니다)을 표기할 수 있습니다.

입력 방법	결과
{| class="wikitable" |+수태음폐경 |- | LU1 | LU2 | LU3 | LU4 | LU5 |- | 중부(中府) | 운문(雲門) | 천부(天府) | 협백(俠白) | 척택(尺澤) |}	수태음폐경 LU1 LU2 LU3 LU4 LU5 중부(中府) 운문(雲門) 천부(天府) 협백(俠白) 척택(尺澤)

2.3 머리말 칸 : !

!를 입력하면 그 행을 표의 머리말 칸으로 나타낼 수 있습니다.

입력 방법	결과
{| class="wikitable" |- ! 수태음폐경 ! 수양명대장경 ! 족양명위경 |- | 중부(中府) | 상양(商陽) | 승읍(承泣) |- | 운문(雲門) | 이간(二間) | 사백(四白) |- | 천부(天府) | 삼간(三間) | 거료(巨髎) |}	수태음폐경 수양명대장경 족양명위경 중부(中府) 상양(商陽) 승읍(承泣) 운문(雲門) 이간(二間) 사백(四白) 천부(天府) 삼간(三間) 거료(巨髎)

---

첫 번째 행뿐만 아니라, 첫 번째 열도 머리말 칸으로 나타낼 수 있습니다.

입력 방법	결과
{| class="wikitable" |- ! ! 수태음폐경 ! 수양명대장경 ! 족양명위경 |- ! 원혈(原穴) | 태연(太淵) | 합곡(合谷) | 충양(衝陽) |- ! 락혈(絡穴) | 열결(列缺) | 편력(偏歷) | 풍륭(豊隆) |- ! 극혈(郄穴) | 공최(孔最) | 온류(溫溜) | 충양(衝陽) |}	수태음폐경 수양명대장경 족양명위경 원혈(原穴) 태연(太淵) 합곡(合谷) 충양(衝陽) 락혈(絡穴) 열결(列缺) 편력(偏歷) 풍륭(豊隆) 극혈(郄穴) 공최(孔最) 온류(溫溜) 충양(衝陽)

---

첫 번째, 두 번째, 세 번째 행을 강조하여 나타낼 수 있습니다.

입력 방법	결과
{| class="wikitable" |- | 수태음폐경 | 수양명대장경 | 족양명위경 |- | 중부(中府) | 상양(商陽) | 승읍(承泣) |- ! 운문(雲門) ! 이간(二間) ! 사백(四白) |- | 천부(天府) | 삼간(三間) | 거료(巨髎) |}	수태음폐경 수양명대장경 족양명위경 중부(中府) 상양(商陽) 승읍(承泣) 운문(雲門) 이간(二間) 사백(四白) 천부(天府) 삼간(三間) 거료(巨髎)

---

이처럼 행·열과 상관없이 특정한 칸을 강조할 수도 있습니다.

이렇게 입력하면..	이렇게 나옵니다!
{| class="wikitable" |- ! 수태음폐경 | 수양명대장경 ! 족양명위경 |- ! 중부(中府) | 상양(商陽) | 승읍(承泣) |- | 운문(雲門) ! 이간(二間) | 사백(四白) |- | 천부(天府) | 삼간(三間) ! 거료(巨髎) |}	수태음폐경 수양명대장경 족양명위경 중부(中府) 상양(商陽) 승읍(承泣) 운문(雲門) 이간(二間) 사백(四白) 천부(天府) 삼간(三間) 거료(巨髎)

2.3.1 알면 좋은 참고 사항

표의 속성에 따라 머리말 칸이 다르게 강조됩니다. 속성에 대해서는 앞으로 설명됩니다.

• class 속성의 속성 값을 'wikitable'로 설정한 표에서는 머리말 행이 '회색 배경＋볼드체＋가운데 정렬' 되어 나타납니다.
• class 속성의 속성 값을 'wikitable'과 'sortable'로 설정한 표에서는 머리말 행이 '회색 배경＋볼드체＋가운데 정렬'에 추가로 '스위치'가 나타납니다.

입력 방법	결과
{| class="wikitable sortable" |- ! 항목 ! 데이터 ! 현황 |- | A | 100 | 완료 |- | B | 120 | 진행중 |- | C | 250 | 완료 |}	항목 데이터 현황 A 300 완료 B 2500 진행중 C 120 완료

2.4 모니위키 방식 : ||, !!

모니위키 방식을 이용하여 '줄바꿈＋|'를 ||로, '줄바꿈＋!'를 !!로 나타낼 수 있습니다.
이러한 방식을 사용하면 한 행에 있는 내용들을 텍스트에서도 한 줄에 한꺼번에 쓸 수 있습니다. 따라서 간단한 표의 경우 더 직관적으로 표현할 수 있게 됩니다.

입력 방법	결과
{| class="wikitable" |- ! 수태음폐경 || 수양명대장경 || 족양명위경 |- | 중부(中府) || 상양(商陽) || 승읍(承泣) |- | 운문(雲門) || 이간(二間) || 사백(四白) |- | 천부(天府) || 삼간(三間) || 거료(巨髎) |}	수태음폐경 수양명대장경 족양명위경 중부(中府) 상양(商陽) 승읍(承泣) 운문(雲門) 이간(二間) 사백(四白) 천부(天府) 삼간(三間) 거료(巨髎)

2.5 정리

위의 내용을 정리하면 다음과 같습니다.

표의 기본적인 구조	{|	표의 시작
	|}	표의 마침
	|	칸
	|-	행 구분선
표의 제목과 머리말 칸	|+	표의 제목
	!	머리말 칸
모니위키 방식	||	칸
	!!	머리말 칸

3 표를 예쁘게 꾸며보자!

위키 문법을 이용해 표를 기능적으로 만들 수 있습니다. 즉 한글 오피스나 워드프로세서처럼 칸에 색을 넣거나, 표를 정렬하고 병합하는 등의 작업이 가능합니다.
이러한 디자인 요소를 '속성'이라고 부르는데, 이러한 '속성'은 여러 가지 기능을 가지고 있습니다. 이제부터 속성의 종류와 적용하는 방법에 대해 알아보도록 하겠습니다.

3.1 속성 적용 방법

표에 속성을 적용할 때 칸 하나에만, 또는 한 행에, 또는 표 전체에 속성을 적용할 수 있습니다.

칸 하나

칸 하나에 속성을 적용할 때는 |를 이용합니다. | 속성 | 내용이 되도록 입력하면 됩니다.

아래 예시에서 이용한 속성은 style속성입니다. 이 속성을 이용하면 표의 외관 또는 내부 텍스트의 모습 등 말 그대로 표의 스타일을 정할 수 있습니다.

입력 방법	결과
{| class="wikitable" |- | 돈까스 | style="text-align: center;" | 떡볶이 | style="text-align: right;" | 마카롱 |- | style="text-align: left;" | 삼겹살 | 탕수육 | style="text-align: center;" | 짜장면 |- | 양념치킨 | 민트초코 | 닭볶음탕 |}	돈까스 떡볶이 마카롱 삼겹살 탕수육 짜장면 양념치킨돈까스 민트초코 닭볶음탕

---

한 행

행에 속성을 적용할 때에는 |- 오른쪽에 속성을 입력하면 됩니다

아래 예시를 보면 속성을 입력한 줄에 색상이 적용되었습니다.

입력 방법	결과
{| class="wikitable" |- | 돈까스 | 떡볶이 | 마카롱 |-style="background: blue; color: white;" | 삼겹살 | 탕수육 | 짜장면 |- | 양념치킨 | 민트초코 | 닭볶음탕 |}	돈까스 떡볶이 마카롱 삼겹살 탕수육 짜장면 양념치킨 민트초코 닭볶음탕

---

표 전체

표에 속성을 적용할 때에는 표의 시작부분인 {| 오른쪽에 속성을 입력합니다.

아래 예시에서 이용한 속성은 class속성입니다. 이 속성은 속성 값에 해당하는 코드를 불러와 적용하는 속성입니다. 이 경우에는 wikitable에 해당하는 코드(=경계를 회색선으로 나타내고 머리말 행에 회색배경+볼드체+가운데 정렬 속성을 적용)를 불려와서 표에 적용된 것입니다.

입력 방법	결과
{| class="wikitable" |- | 돈까스 | 떡볶이 | 마카롱 |- | 삼겹살 | 탕수육 | 짜장면 |- | 양념치킨 | 민트초코 | 닭볶음탕 |}	돈까스 떡볶이 마카롱 삼겹살 탕수육 짜장면 양념치킨 민트초코 닭볶음탕

실제로는 다음 모습이 표의 기본적인 형태라고 할 수 있으나, 이렇게 적으면 외관적으로 상당히 볼품 없어지므로, 대부분의 경우 일단 class="wikitable"를 기본으로 적용하고 들어가게 되는 것입니다.

입력 방법	결과
{| |- | 돈까스 | 떡볶이 | 마카롱 |- | 삼겹살 | 탕수육 | 짜장면 |- | 양념치킨 | 민트초코 | 닭볶음탕 |}	돈까스 떡볶이 마카롱 삼겹살 탕수육 짜장면 양념치킨 민트초코 닭볶음탕

3.2 속성의 종류

여기까지 보시면서 감이 오셨겠지만, 속성은 다음과 같이 (속성이름)=" " 로 표현됩니다. " " 안에는 속성 값들이 들어갑니다.

속성	설명	속성 값 (" "에 들어갈 값)
colspan=" "	표를 가로방향으로 병합합니다.	숫자
rowspan=" "	표를 세로방향으로 병합합니다.	숫자
style=" "	표의 외관 또는 내부 텍스트의 모습 등의 스타일을 나타냅니다.	color, background, text-align, vertical-align 등
class=" "	속성 값에 해당하는 코드를 불러와 적용하는 속성입니다.	wikitable, sortable 등
scope=" "	소프트웨어가 머리말을 인식할 수 있도록 합니다.	row, col, rowgroup, colgroup

특히, style 속성에서는 속성 값들을 표현할 때는 ;로 구분하고 ;로 구체적인 값을 나타냅니다.

• 예: style="background: #FFDE80; color: #F39E00; text-align: right;"
• 속성 값은 항상 끝에 ;를 붙여줘야 합니다. 맨 마지막을 "로 끝내는 것도 잊지 마시구요!

각 속성에 대한 내용을 하나하나 살펴보도록 하겠습니다.

3.2.1 colspan, rowspan

colspan=" "또는 rowspan=" "로 표기합니다. " " 안에는 병합되는 칸 수가 들어갑니다.

colspan 사용시

입력 방법	결과
{| class="wikitable" |- | 1 | 2 | 3 | 4 |- | 5 | colspan="2" | 6, 7 | 8 |- | colspan="3" | 9, 10, 11 | 12 |- | colspan="4" | 13, 14, 15, 16 |}	1 2 3 4 5 6, 7 8 9, 10, 11 12 13, 14, 15, 16

rowspan 사용시

입력 방법	결과
{| class="wikitable" |- | 1 | 2 | rowspan="3" | 3, 7, 11 | 4 |- | 5 | 6 | 8 |- | rowspan="3" | 9, 13, 17 | 10 | 12 |- | 14 | 15 | 16 |- | 18 | 19 | 20 |}	1 2 3, 7, 11 4 5 6 8 9, 13, 17 10 12 14 15 16 18 19 20

3.2.2 style

style=" "로 입력합니다. " " 안에는 다음 속성 값들이 들어갑니다.

속성	설명	내용 (" "에 들어갈 값)
color: (색상코드);	표의 텍스트 색깔을 (색상코드)의 색으로 만듭니다.
background: (색상코드);	표의 배경색을 (색상코드)의 색으로 만듭니다.
border: (숫자)px solid (색상코드);	표의 테두리 색과 두께를 결정합니다. 셀 하나만 설정하는 것도 가능합니다.	가운데의 solid는 테두리를 한 줄로 설정한다는 의미입니다. double을 넣으면 두 줄, dotted로 설정하면 점선이 됩니다.
text-align: (방향);	표의 글자를 (방향)으로 정렬. 아래의 값들 중 원하는 값을 넣어주시면 됩니다.	left - 왼쪽 정렬 center - 가운데 정렬 right - 오른쪽 정렬 justify - 양쪽 정렬 justify - 양쪽 정렬
vertical-align: (방향);	표의 글자를 (방향)으로 정렬. 아래의 값들 중 원하는 값을 넣어주시면 됩니다.	top - 위쪽 정렬 middle - 가운데 정렬 bottom - 아래쪽 정렬
font-size: (숫자)pt;	글자의 크기를 결정합니다.
width: (너비);	폭, 칸의 너비를 정합니다. width: 100px; 또는 width: 50%;와 같이 입력합니다.	%: 비율 조정 px: 픽셀 조정. 모바일, 데스크탑 사이에 차이가 크니 대신 em을 사용하세요. em: 폰트와 연동됨(영문 1문자 = 1em, 전각문자(한글, 한자 등) 1문자 = 2em)
float: (방향);	표를 한쪽으로 정렬시킵니다.	float: right; - 표를 오른쪽으로 정렬시킵니다. float: left; - 표를 왼쪽으로 정렬시킵니다. margin: auto; - 표를 가운데로 정렬시킵니다.

입력 방법	결과
{| class="wikitable" style="float: right;" |- | style="color: yellow; background: black;" | 돈까스 | 떡볶이 | 마카롱 |-style="text-align: right;" | 삼겹살 | 탕수육 | 짜장면 |-style="background: #E8D9FF; color: #8f95fd;" | 양념치킨 | 민트초코 | 닭볶음탕 |}	돈까스 떡볶이 마카롱 삼겹살 탕수육 짜장면 양념치킨 민트초코 닭볶음탕

3.2.3 class

class=" "로 입력합니다. " " 안에는 다음 속성 값들이 들어갑니다.

속성	설명	내용 (" "에 들어갈 값)
wikitable	표에 구분선 생성 및 머리말 행을 회색 배경, 볼드체, 가운데 정렬 시킴.
sortable	머리말 행에 오름차순/내림차순 정렬 스위치를 생성. ※!를 사용한 머리말 행이 있어야 적용됩니다.
mw-collapsible	열려 있는 여닫이 표.
mw-collapsible mw-collapsed	닫혀 있는 여닫이 표.
libre-responsive-table	모바일 환경에서는 리스트 형태로 보이는 표.
infobox	정보상자 틀
navbox	둘러보기 상자 틀

• sortable 사용시

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable sortable" |- ! 항목 ! 데이터1 ! 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |}	항목 데이터1 데이터2 A 200 1278 B 150 956 C 100 1034

• mw-collapsible 사용시

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable mw-collapsible" |- | 항목 | 데이터1 | 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |}	항목 데이터1 데이터2 A 200 1278 B 150 956 C 100 1034

• mw-collapsible mw-collapsed 사용시

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable mw-collapsible mw-collapsed" |- | 항목 | 데이터1 | 데이터2 |- | A | 200 | 1278 |- | B | 150 | 956 |- | C | 100 | 1034 |}	항목 데이터1 데이터2 A 200 1278 B 150 956 C 100 1034

3.2.4 scope

scope=" "로 입력합니다. !를 통한 머리말 칸 지정으로 위키에서 자동으로 처리되어 입력하지 않아도 되지만, 머리말에 이를 사용하지 않거나 특수한 경우 직접 지정할 수 있습니다.

scope는 시각장애인이 보이스 오버와 같이 화면의 내용을 읽어주는 스크린 리더 소프트웨어로 표를 읽는 등 소프트웨어가 표의 내용을 인식할 수 있도록 합니다. " " 안에는 다음 속성 값이 들어갑니다.

• row: 행(→) 머리말
• col: 열(↓) 머리말
• rowgroup: 행(→) 머리말 묶음
• colgroup: 열(↓) 머리말 묶음

		col 열(↓) 머리말	col 열(↓) 머리말	colgroup 열(↓) 머리말 묶음
				col 열(↓) 머리말	col 열(↓) 머리말
row 행(→) 머리말
row 행(→) 머리말
rowgroup 행(→) 머리말 묶음	row 행(→) 머리말
	row 행(→) 머리말

4 표 안의 값을 정렬하자!

class="wikitable sortable"를 사용하면 대부분의 경우 오름차순/내림차순으로 정렬할 수 있습니다.

항목	가격
커피	2000
콜라	800
라면	1200

하지만 중간에 들어간 값에 숫자 외의 값이 있으면 다음과 같이 정렬에 문제가 있습니다.

항목	가격
커피	2000원
콜라	800원
라면	1200원

이런 경우 값의 형식을 지정해 해결할 수 있습니다. data-sort-type="(타입)"의 형식으로 다음과 같이 입력합니다.

{| class="wikitable sortable"
|-
! 항목
! data-sort-type="number" |가격
|-
| 커피
| 2000원
|-
| 콜라
| 800원
|-
| 라면
| 1200원
|}

항목	가격
커피	2000원
콜라	800원
라면	1200원

값의 형식은 text, number, date, time 등이 있습니다. 자세한 내용은 위키미디어 메타위키의 Help:Sorting(영어)를 참고할 수 있습니다.

표의 내용과 다른 보이지 않는 정렬 값을 입력할 수도 있습니다. data-sort-value="(값)"의 형식으로 입력합니다.

5 HTML 테이블 태그와의 비교

미디어위키 테이블 문법은 <table> 태그와 일대일로 대응합니다. 또한 미디어위키는 <table> 태그도 직접 사용할 수 있지만 위키의 표 문법을 사용하는 것이 그나마 더 효율적인 것도 알 수 있습니다.

미디어위키 문법	HTML 태그	결과물
{| class="wikitable" |- ! 항목 ! 내용 |-style="background:yellow;" | A | '''200''' |- |style="border: 3px solid;"| B | 150 |- |colspan="2"| C/100 |}	<table class="wikitable"> <tr> <th> 항목</th> <th> 내용</th> </tr> <tr style="background:yellow;"> <td> A </td> <td> <b>200</b> </td> </tr> <tr> <td style="border: 3px solid;"> B </td> <td> 150 </td> </tr> <tr> <td colspan="2"> C/100 </td> </tr> </table>	항목 내용 A 200 B 150 C/100

여기서 보통 class="wikitable"을 입력하는 이유가 드러나는데, 클래스명이 wikitable일 경우, 미디어위키의 엔진이 자동적으로 보기 좋게 디자인해준다는 것을 알 수 있습니다. 기본적으로 table 태그를 이용해서 표를 작성하면, 외곽선이고 배경색이고 아무 것도 지정되지 않은 테이블이 만들어집니다. 그래서 위키의 표에는 wikitable이라는 클래스에 표 디자인 정보를 저장한 뒤에 보기 좋게 표를 보여줄 수 있습니다.

굳이 class="wikitable"이라는 표현을 안 쓰고 표를 작성하는 경우가 있습니다. 이 경우는 눈에 직접 보이지는 않지만 table 태그를 이용해서 네모 반듯하게 글 내용을 정리하고 싶을 때 사용합니다. 지금 여러분들이 보시는 표 문법 도움말 문서에서도 표 문법 코드와 결과물을 좌/우로 배열할 때 바로 외곽선이 보이지 않는 표 문법을 사용해서 네모 반듯하게 내용을 정리한 것을 확인하실 수 있습니다.

6 그래도 안 되겠으면 ...

• 시각적으로 직접 편집할 수 있습니다. → 바로가기
• 엑셀 표를 미디어위키 표로 변경할 수 있습니다. → 바로가기