도움말:표

간단한 표는 위키 작성, 당신도 할 수 있다! 문서에도 나와 있듯이, 표 생성기에서 만들어 가져올 수 있습니다. 그러나 틀을 직접 제작하거나, 추후에 설명할 파서 함수(조건문) 등을 활용하기 위해서는 직접 표를 작성하는 방법을 익혀야 합니다. 때문에 이제 표 생성기를 이용한 방법이 아닌, 직접 위키 문법으로 표를 만드는 방법에 대해 소개하겠습니다. 노가다의 시작

일단 들어가기 전에 결론부터 먼저 꺼내면 다음과 같습니다.

{|	표의 시작
|+	표의 제목.
!	머리말 칸.
|	일반 칸.
|-	행 구분선.
|}	표의 끝 .

각각이 뭘 의미하는지는 차차 알아가 보도록 하겠습니다.

기본적인 형태

표 작성의 가장 기본적인 형태는 다음과 같습니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 1 | 2 | 3 |- | ㄱ | ㄴ | ㄷ |- | A | B | C |- |}	1 2 3 ㄱ ㄴ ㄷ A B C

이를 다음과 같이 정리할 수 있습니다.

• |-로 행을 구분하고
• 그 사이에 |를 적음으로써 칸을 나타냅니다.
• | 옆에는 그 칸에 들어갈 내용을 쓰시면 됩니다.
• 표의 시작과 끝은 {|와 |}로 나타냅니다.
• class="wikitable"은 조금 뒤에 설명합니다. 일단 넘어가주세요.

---

5×4 사이즈의 표를 만들고 싶으면 다음과 같이 작성하면 됩니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 1 | 2 | 3 | 4 | 5 |- | ㄱ | ㄴ | ㄷ | ㄹ | ㅁ |- | A | B | C | D | E |- | ㅏ | ㅑ | ㅓ | ㅕ | ㅗ |- |}	1 2 3 4 5 ㄱ ㄴ ㄷ ㄹ ㅁ A B C D E ㅏ ㅑ ㅓ ㅕ ㅗ

---

필요하다면 첫 줄과 마지막 줄의 |-를 생략해도 상관 없습니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" | 1 | 2 | 3 |- | ㄱ | ㄴ | ㄷ |- | A | B | C |}	1 2 3 ㄱ ㄴ ㄷ A B C

앞으로의 설명에서, 특별한 경우가 아니면 첫 줄의 |-는 표기, 마지막 줄의 |-는 생략하겠습니다.

---

||를 사용해서 한 행 안에 있는 칸을 모두 한 꺼번에 한 줄에 쓸 수도 있습니다. 모두 한 줄에 쓰되, 내용과 내용 사이를 ||로 구분 시켜주면 됩니다. 간단한 표의 경우, 이렇게 표시하는 것이 더 직관적입니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 1 || 2 || 3 |- | ㄱ || ㄴ || ㄷ |- | A || B || C |}	1 2 3 ㄱ ㄴ ㄷ A B C

여기서 눈 여겨볼 점이 있는데, 위의 예시에 나온 것처럼 줄 마지막에 ||를 붙이는 것은 모니위키에서는 행이 끝남을 의미했지만, 미디어위키에서는 그저 새 칸을 만드는 것입니다. 행을 끝내고 새 행으로 넘기려면 다음 줄에 |-를 입력해야 합니다. 모니위키에서 넘어오신 분들은 이 점을 주의해주시면 되겠습니다.

---

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

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 1 | 2 | 3 |- | ㄱ | ㄴ | ㄷ |- | A | B | C |}	1 2 3 ㄱ ㄴ ㄷ A B C

---

만약 내용을 입력하지 않는다면, 빈 칸으로 남게 됩니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 1 | | 3 |- | ㄱ | ㄴ | |- | | B | C |}	1 3 ㄱ ㄴ B C

---

|+를 사용하면 표의 제목('캡션'이라고도 합니다)을 표 위에 추가할 수 있습니다. 아래 예시처럼 행이 본격적으로 시작하기 전(={|와 첫 |- 사이)에 |+를 쓰고 원하는 내용을 작성하면 됩니다. 꼭 쓰지는 않아도 됩니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |+ 숫자와 한글 |- | 1 | 2 | 3 | 4 | 5 |- | ㄱ | ㄴ | ㄷ | ㄹ | ㅁ |}	숫자와 한글 1 2 3 4 5 ㄱ ㄴ ㄷ ㄹ ㅁ

---

칸 맨 앞에 있는 | 대신 !를 사용하면 그 행을 표의 머리말 칸으로 나타낼 수 있습니다. 쉽게 말해, 표의 메인 칸이 됩니다. 아래 예시처럼 작성하면 맨 앞이 |대신 !로 작성된 첫 번째 행이 강조되어 나타납니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- ! 숫자 ! 한글 ! 영어 |- | 1 | ㄱ | A |- | 2 | ㄴ | B |- | 3 | ㄷ | C |}	숫자 한글 영어 1 ㄱ A 2 ㄴ B 3 ㄷ C

꼭 첫 번째 행만 강조할 수 있는 것은 아닙니다. 아래 예시처럼 작성하면 세 번째 행이 강조되어 나타납니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 숫자 | 한글 | 영어 |- | 1 | ㄱ | A |- ! 2 ! ㄴ ! B |- | 3 | ㄷ | C |}	숫자 한글 영어 1 ㄱ A 2 ㄴ B 3 ㄷ C

자주 있는 상황은 아니지만, 행 전체가 아닌 특정 칸만 강조할 수도 있습니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- ! 숫자 | 한글 ! 영어 |- | 1 ! ㄱ | A |- | 2 | ㄴ | B |- | 3 | ㄷ ! C |}	숫자 한글 영어 1 ㄱ A 2 ㄴ B 3 ㄷ C

---

※속성이 무엇인가에 대해서는 앞으로 설명할 것이므로 아래 말이 무슨 말인지 모르겠다면 일단 넘어가셔도 좋습니다.

머리말 칸(!를 사용한 칸)이 어떤 방법으로 강조되는 지는 그 표가 어떤 속성을 가지고 있느냐에 따라 달라집니다. 예를 들면, class 속성의 속성 값을 wikitable로 준 표에서는 머리말 행이 회색 배경+볼드체+가운데 정렬 되어 나타나고, 속성 값을 sortable로 준 표에서는 머리말 행에 오름차순/내림차순 정렬 스위치가 생성됩니다.

예시에서는 class 속성 값을 wikitable과 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

표에 디자인 넣기 (속성 적용하기)

위키 문법을 사용해서 표를 직접 작성하면 얻을 수 있는 장점이 바로 표를 기능적으로 만들 수 있다는 것입니다. 쉽게 말해 워드프로세서에서 표 만들때 칸에 색깔 넣고 가운데 정렬하고 병합하고 테두리 꾸미는 뭐 그런 것들을 할 수 있다는 거죠.

이러한 디자인들의 요소를 속성이라고 부르며 여러 가지가 존재합니다. 당장에 위에서 말했던 색깔, 텍스트 정렬부터 시작해서 병합, 테두리 꾸미기 외에도 너비/높이 지정, 오름/내림차순정렬, 합 구하기/평균 내기 등등... 그 종류가 정말 많습니다. 이제부터 속성의 종류와 적용하는 방법을 차차 알아가보도록 하겠습니다.

우선 속성을 적용하는 방법부터 설명하고, 속성의 종류는 예시를 통해 조금씩 보여드리겠습니다. 물론 뒤에서 제대로 속성 종류 정리도 따로 합니다.

속성 적용 방법

표에 속성을 적용할 때 칸 하나에만, 또는 한 행에, 또는 표 전체에 속성을 적용할 수 있습니다. 일단 칸 하나에 적용하는 방법부터 알아보도록 하겠습니다.

칸 하나에 속성을 적용할 때는 |를 이용합니다. 내용 왼쪽에 |를 추가하고 그 왼쪽에 속성을 입력합니다. 즉, | 속성 | 내용이 되도록 입력합니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 강아지 | align="center" | 고양이 | align="right" | 토끼 |- | align="left" | 햄스터 | 앵무새 | align="center" | 거북이 |- | 기니피그 | 고슴도치 | 타마고치 |}	강아지 고양이 토끼 햄스터 앵무새 거북이 기니피그 고슴도치 타마고치

align속성은 표준에서 사라져서 브라우저마다 동작이 다를 수 있습니다. align 속성은 추후 설명할 style속성의 text-align과 같은 역할을 하므로, 그 쪽을 이용하시면 됩니다. 다만 여기서는 속성 적용법에 대한 이해를 돕기 위해 임시적으로 사용하겠습니다.

이번 예시에서 이용한 속성은 align속성입니다. 이 속성을 이용하면 표 내부의 텍스트나 그림 등의 미디어를 왼쪽, 가운데, 오른쪽 정렬 할 수 있습니다. 예시에서는 고양이와 거북이에 가운데 정렬, 토끼에 오른쪽 정렬, 별 차이는 없지만 햄스터에 왼쪽 정렬이 된 모습입니다.

---

행에 속성을 적용할 때에는 |- 오른쪽에 속성을 입력하면 됩니다. 아래 예시처럼 입력하면 두 번째 줄에 속성이 적용됩니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 강아지 | 고양이 | 토끼 |- style="background: blue; color: white;" | 햄스터 | 앵무새 | 거북이 |- | 기니피그 | 고슴도치 | 타마고치 |}	강아지 고양이 토끼 햄스터 앵무새 거북이 기니피그 고슴도치 타마고치

이번 예시에서 이용한 속성은 style속성입니다. 이 속성을 이용하면 표의 외관 또는 내부 텍스트의 모습 등 말 그대로 표의 스타일을 정할 수 있습니다. 예시에서는 background와 color를 각각 blue, white로 지정해주었기 때문에 표의 배경색이 파랑색으로, 글씨 색깔이 흰색으로 나타납니다.

만약, 첫째 행에 속성을 적용하고 싶다면 첫 줄의 |-에 속성을 입력하면 됩니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- align="right" style="color: green;" | 강아지 | 고양이 | 토끼 |- | 햄스터 | 앵무새 | 거북이 |- | 기니피그 | 고슴도치 | 타마고치 |}	강아지 고양이 토끼 햄스터 앵무새 거북이 기니피그 고슴도치 타마고치

이번에는 align속성과 style속성을 함께 사용했습니다. align속성을 right로 지정하고, style속성에서 color의 값을 green으로 지정해 주었습니다. 때문에 첫 번째 행의 글씨가 오른쪽으로 정렬되고 색깔이 초록색으로 나타납니다. 이와 같이 여러개의 속성을 함께 적용할 때는 그냥 한 번 띄우고 적어주면 됩니다.

---

표에 속성을 적용할 때에는 표의 시작부분인 {| 오른쪽에 속성을 입력합니다. 아래 예시처럼 입력하면 전체 행에 속성이 적용됩니다.

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 강아지 | 고양이 | 토끼 |- | 햄스터 | 앵무새 | 거북이 |- | 기니피그 | 고슴도치 | 타마고치 |}	강아지 고양이 토끼 햄스터 앵무새 거북이 기니피그 고슴도치 타마고치

'...??? 뭐지? 아무 것도 없는데?' 하고 생각이 드실 지도 모르겠습니다. 다시 한 번 더 작성 내용을 읽어 주세요. 눈치가 빠른 분이라면 알아채셨을지도 모르겠지만, 이번 예시에서 이용한 속성은 class속성입니다. 이 속성은 속성 값에 해당하는 코드를 불러와 적용하는 속성입니다. 이 경우에는 wikitable에 해당하는 코드(=경계를 회색선으로 나타내고 머리말 행에 회색배경+볼드체+가운데 정렬 속성을 적용)를 불려와서 표에 적용된 것입니다.

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

이렇게 입력하면	이렇게 나옵니다
{| |- | 강아지 || 고양이 || 토끼 |- | 햄스터 || 앵무새 || 거북이 |- | 기니피그 || 고슴도치 || 타마고치 |}	강아지 고양이 토끼 햄스터 앵무새 거북이 기니피그 고슴도치 타마고치

속성의 종류

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

속성	설명	속성 값 (" "에 들어갈 값)
colspan=" "	표를 가로방향으로 병합합니다.	숫자
rowspan=" "	표를 세로방향으로 병합합니다.	숫자
style=" "	표의 외관 또는 내부 텍스트의 모습 등 말 그대로 스타일을 나타냅니다.	color, background, text-align, vertical-align 등
class=" "	속성 값에 해당하는 코드를 불러와 적용하는 속성입니다.	wikitable, sortable 등

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

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

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

컴알못이라 속성/속성 값 이렇게 설명하는게 맞는지 모르겠네요. 지나가는 컴덕 분들께서 수정해주시길

colspan, rowspan (셀 병합)

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

• 모니위키에서 <-숫자>로 쓰던 가로줄 병합 기능이 colspan=" "로 대응됩니다.
• 모니위키에서 <|숫자>로 쓰던 세로줄 병합 기능이 rowspan=" "로 대응됩니다.

• colspan 사용시

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | 1 | 2 | colspan="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

style

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

• color: (색상코드); - 표의 텍스트 색깔을 (색상코드)의 색으로 만듦.
• background: (색상코드); - 표의 배경색을 (색상코드)의 색으로 만듦.
• text-align: (방향); - 표의 글자를 (방향)으로 정렬. 아래의 값들 중 원하는 값을 넣어주시면 됩니다.
  • left - 왼쪽 정렬
  • center - 가운데 정렬
  • right - 오른쪽 정렬
  • justify - 양쪽 정렬
• vertical-align: (방향); - 표의 글자를 (방향)으로 정렬. 아래의 값들 중 원하는 값을 넣어주시면 됩니다.
  • top - 위쪽 정렬
  • middle - 가운데 정렬
  • bottom - 아래쪽 정렬

이렇게 입력하면	이렇게 나옵니다
{| class="wikitable" |- | style="color: yellow; background: black;" | 강아지 | 고양이 | 토끼 |- style="text-align: right;" | 햄스터 | 앵무새 | 거북이 |- style="background: #FFDE80; color: #F39E00;" | 기니피그 | 고슴도치 | 타마고치 |}	강아지 고양이 토끼 햄스터 앵무새 거북이 기니피그 고슴도치 타마고치

class

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

• wikitable : 표에 구분선 생성 및 머리말 행을 회색 배경, 볼드체, 가운데 정렬 시킴.
• sortable : 머리말 행에 오름차순/내림차순 정렬 스위치를 생성. ※!를 사용한 행이 있어야 적용됩니다.
• mw-collapsible : 열려 있는 여닫이 표.
• mw-collapsible mw-collapsed : 닫혀 있는 여닫이 표.

• 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