도움말:표 편집하기

[[위키 작성, 당신도 할 수 있다!]] 문서에도 나와 있듯이 인물의 정보와 같은 양식화된 정보는 [[:분류:정보 틀]]과 같이 만들어진 [[틀]]을 사용할 수 있고, 간단한 [[표]]는 편집창 상단의 "고급"을 누르고 제일 오른쪽에 있는 [[파일:Toolbar insert table.png]] 아이콘을 클릭해서 입력할 수 있습니다. 내용이 많거나 다른 곳에서 만든 표를 가져와야 한다면 [[시리즈:미디어위키 표 생성기 사용하기]]와 같이 [http://www.tablesgenerator.com/mediawiki_tables 표 생성기]를 사용해 만드는 방법도 가능합니다. 

하지만 위키 작성을 하다 보면 당연히 표를 좀 더 예쁘게 꾸미고 싶은 욕구가 들기 마련입니다.

{{인용문|여기가 파란색으로 되어 있으면 더 보기 좋을 것 같아.<br /><br />표 너비를 고정시키고 싶은데 어떻게 방법이 없을까?<br /><br />이 항목을 따라서 오름차순으로 정렬할 수 있으면 진짜 완벽할텐데...}}

흰 바탕에 회색 테두리의 표는 더 이상 지겹습니다. 하지만 표를 꾸미는 방법을 검색해보니 이상한 말만 잔뜩 나와있습니다. 이해도 안 되고 복잡합니다. 영어 사이트는 들어가기도 전에 울렁증부터 납니다.

고민하는 여러분들을 위해 [[리브레 위키]]에 도움말이 준비되어 있습니다. 도움말을 차근차근 따라오면서 문법을 익혀봅시다. 찾는 내용이 있다면 브라우저의 '페이지에서 찾기'(Ctrl+F, command+F) 기능으로 관련된 내용을 찾을 수 있습니다. 어느새 도움말을 열어보지 않고도 척척 표를 만들어내는 달인이 되어 있을 것입니다.

== 간단한 표부터 만들어 보자! ==
이 문단에서는 표를 작성하는데 필요한 기본적인 문법을 알아봅니다. 설명할 내용을 크게 나누면 다음의 세 가지가 됩니다.

* <code>{|</code>, <code>|}</code>, <code>|</code>, <code>|-</code>의 네 가지 필수 기호
* <code>|+</code>, <code>!</code>의 두 가지 옵션 기호
* <code>||</code>, <code>!!</code>를 사용하는 [[모니위키]]스러운 작성 방법

=== <code>{|</code>, <code>|}</code>, <code>|</code>, <code>|-</code>와 익숙해지기 ===
표는 기본적으로 <code>{|</code>, <code>|}</code>, <code>|</code>, <code>|-</code>의 네 가지 기호로 만들 수 있습니다.

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


이렇게만 설명하면 잘 와닿지 않으니, 바로 만들어 살펴보겠습니다.
{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
| ㄱ
| ㄴ
| ㄷ
|-
| A
| B
| C
|-
| 1
| 2
| 3
|-
| 사과
| 오렌지
| 포도
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
| ㄱ
| ㄴ
| ㄷ
|-
| A
| B
| C
|-
| 1
| 2
| 3
|-
| 사과
| 오렌지
| 포도
|}
|}

이게 어떻게 생겨먹었는지를 파악해봅시다. 생각보다 어렵지 않아요. 위에서부터 아래로 찬찬히 따라가보면 이렇습니다.

# 우선 <code>{|</code>를 적어서 '''표가 시작'''한다는 걸 알립니다.
#* <small>class 어쩌구하는 녀석은 나중에 설명합니다. 지금은 그냥 <code>{|</code>와 같이 써야되는 구절이라 생각하고 넘어가주세요.</small>
# 다음 줄에 <code>|</code>를 적으면 '''1번째 행의 1번째 칸'''이 만들어집니다. 그 칸에 들어갈 내용은 <code>|</code>의 오른쪽에 적으면 됩니다. 예시에서는 'ㄱ'을 적었군요.
# 그 다음 줄에 <code>|</code>를 적으면 이번에는 '''1번째 행의 2번째 칸'''이 만들어집니다. (아직 다음 행으로 넘어간게 아니에요!) 이번에도 <code>|</code>의 오른쪽에 그 칸에 들어갈 내용을 적습니다. 예시에서는 'ㄴ'을 적었습니다.
# 또 그 다음 줄에 <code>|</code>를 적으면 이젠 '''1번째 행의 3번째 칸'''이 만들어집니다. 역시 이번에도 <code>|</code>의 오른쪽에 그 칸에 들어갈 내용을 적습니다. 예시에서는 'ㄷ'을 적었네요.
#* 이런 방식으로 1번째 행의 4번째 칸, 5번째 칸, ... 을 만들어나가면 됩니다. 예시에서는 3번째 칸까지 만들었습니다.
# 1번째 행에 들어갈 칸과 내용들을 모두 작성했다면, 이제 두 번째 행을 작성해봅시다. 바로 다음 줄에 <code>|-</code>를 적어 '''1번째 행과 2번째 행을 구분할 구분선'''을 만들어 줍니다.
# 이제 그 다음 줄에 <code>|</code>를 적으면 이제 비로소 '''2번째 행의 1번째 칸'''이 만들어집니다. 그 칸에 들어갈 내용은 역시 위와 같은 방법으로 <code>|</code>의 오른쪽에 적으면 됩니다. 예시에서는 'A'을 적었군요.
# 1번째 행을 만들때와 마찬가지로 그 다음 줄에 <code>|</code>를 적으면 '''2번째 행의 2번째 칸'''이 만들어집니다. 역시 같은 방법으로 <code>|</code>의 오른쪽에 그 칸에 들어갈 내용을 적으면 됩니다. 예시에서는 'B'을 적었습니다.
#* 이런 방식으로, 1번째 행을 작성할 때 처럼 2번째 행의 3번째 칸, 4번째 칸, ... 을 만들어나가면 됩니다. 예시에서는 1번째 행을 칸 3개로 만들었으므로 2번째 행도 3번째 칸까지 만들었습니다.
# 2번째 행에 들어갈 칸과 내용들을 모두 작성했다면, 이제 세 번째 행을 작성합니다. 바로 다음 줄에 <code>|-</code>를 적어 '''2번째 행과 3번째 행을 구분할 구분선'''을 만들어 줍니다.
# 그 다음 줄에 <code>|</code>를 적으면 '''3번째 행의 1번째 칸'''이 만들어집니다. 그 칸에 들어갈 내용은 역시 위와 같은 방법으로 <code>|</code>의 오른쪽에 적으면 됩니다. 예시에서는 '1'을 적었군요.
#* 역시 아까와 같은 방법으로 3번째 행에 들어갈 칸과 내용들을 작성합니다.
# 3번째 행에 들어갈 칸과 내용들을 모두 작성했다면, 바로 다음 줄에 <code>|-</code>를 적어 '''3번째 행과 4번째 행을 구분할 구분선'''을 만들어 주고 네 번째 행을 작성합니다.
#* 이런 방식으로 5번째 행, 6번째 행, ... 을 만들어 나가면 됩니다. 예시에서는 4번째 행까지 만들었습니다.
# 표에 들어갈 칸과 내용을 전부 작성했다면, <code>|}</code>를 적어서 '''표를 마칩니다'''.

다른 모습의 예시들도 살펴봅시다.

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
| ㄱ
| ㄴ
| ㄷ
| ㄹ
| ㅁ
|-
| ㅏ
| ㅑ
| ㅓ
| ㅕ
| ㅗ
|-
| A
| B
| C
| D
| E
|-
| 1
| 2
| 3
| 4
| 5
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
| ㄱ
| ㄴ
| ㄷ
| ㄹ
| ㅁ
|-
| ㅏ
| ㅑ
| ㅓ
| ㅕ
| ㅗ
|-
| A
| B
| C
| D
| E
|-
| 1
| 2
| 3
| 4
| 5
|}
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
| 강아지
| 고양이
|-
| 토끼
| 햄스터
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
| 강아지
| 고양이
|-
| 토끼
| 햄스터
|}
|}

==== 알면 좋은 참고 사항들 ====
필요하다면 <code>{|</code> 바로 다음 줄과 <code>|}</code> 바로 전 줄에 <code>|-</code>를 추가로 넣어도 상관 없습니다.

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
| ㄱ
| ㄴ
| ㄷ
|-
| A
| B
| C
|-
| 1
| 2
| 3
|-
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| ㄱ
| ㄴ
| ㄷ
|-
| A
| B
| C
|-
| 1
| 2
| 3
|-
|}
|}

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

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

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
|                           ㄱ
|              ㄴ
| ㄷ
|-
| A
|      B
|              C
|-
| 1
|                            2
|              3
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
|                           ㄱ
|              ㄴ
| ㄷ
|-
| A
|      B
|              C
|-
| 1
|                            2
|              3
|}
|}

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

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
| ㄱ
|
| ㄷ
|-
| A
| B
|
|-
|
| 2
| 3
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| ㄱ
|
| ㄷ
|-
| A
| B
|
|-
|
| 2
| 3
|}
|}

----
당연하다면 당연한 얘기지만, 표에는 텍스트 뿐만이 아니라 그림이나 수식 등 다른 미디어도 들어갈 수 있습니다.

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
| [[파일:Libre Wiki-Logo.png|150px]]
|-
| {{youtube|1a0WDHZuw4w|300px|200px}}
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| [[파일:Libre Wiki-Logo.png|150px]]
|-
| {{youtube|1a0WDHZuw4w|300px|200px}}
|}
|}

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

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
| 줄 바꿈을
쌩으로 하면
이렇게 됩니다.
|-
| 훈민정음
나·랏:말ᄊᆞ·미
中듀ᇰ國·귁·에달·아
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| 줄 바꿈을
쌩으로 하면
이렇게 됩니다.
|-
| 훈민정음
나·랏:말ᄊᆞ·미
中듀ᇰ國·귁·에달·아
|}
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
| 줄 바꿈을<br />태그로 하면<br />이렇게 됩니다.
|-
| 훈민정음<br />나·랏:말ᄊᆞ·미<br />中듀ᇰ國·귁·에달·아
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| 줄 바꿈을<br />태그로 하면<br />이렇게 됩니다.
|-
| 훈민정음<br />나·랏:말ᄊᆞ·미<br />中듀ᇰ國·귁·에달·아
|}
|}

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

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|+ 한글과 숫자
|-
| ㄱ
| ㄴ
| ㄷ
| ㄹ
| ㅁ
|-
| 1
| 2
| 3
| 4
| 5
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|+ 한글과 숫자
|-
| ㄱ
| ㄴ
| ㄷ
| ㄹ
| ㅁ
|-
| 1
| 2
| 3
| 4
| 5
|}
|}

=== 머리말 칸 넣기 : <code>!</code> ===
칸을 나타내는 기호인 <code>|</code>를 <code>!</code>로 바꾸면 그 행을 표의 머리말 칸으로 나타낼 수 있습니다. 쉽게 말해, 표의 메인 칸이 되는 거죠. 아래 예시처럼 맨 앞을 <code>|</code>대신 <code>!</code>로 작성하면 첫 번째 행의 1번째, 2번째, 3번째 칸이 머리말 칸이 되어 나타납니다. 이 기호도 필수는 아니므로 꼭 쓰지는 않아도 됩니다.

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
! 한글
! 영어
! 숫자
|-
| ㄱ
| A
| 1
|-
| ㄴ
| B
| 2
|-
| ㄷ
| C
| 3
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
! 한글
! 영어
! 숫자
|-
| ㄱ
| A
| 1
|-
| ㄴ
| B
| 2
|-
| ㄷ
| C
| 3
|}
|}

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

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
| 한글
| 영어
| 숫자
|-
| ㄱ
| A
| 1
|-
| ㄴ
| B
| 2
|-
! ㄷ
! C
! 3
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| 한글
| 영어
| 숫자
|-
| ㄱ
| A
| 1
|-
| ㄴ
| B
| 2
|-
! ㄷ
! C
! 3
|}
|}

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

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
! 한글
| 영어
! 숫자
|-
| ㄱ
! A
| 1
|-
| ㄴ
| B
| 2
|-
| ㄷ
| C
! 3
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
! 한글
| 영어
! 숫자
|-
| ㄱ
! A
| 1
|-
| ㄴ
| B
| 2
|-
| ㄷ
| C
! 3
|}
|}

==== 알아도 되고 몰라도 되는 참고 사항 ====
* '''속성'''이 뭔지에 대해서는 앞으로 설명할 것이므로 아래 말이 무슨 말인지 모르겠다면 일단 넘어가셔도 좋습니다.

머리말 칸이 어떤 방법으로 강조 되는 지는 그 표가 어떤 속성을 가지고 있느냐에 따라 달라집니다. 예를 들어, class 속성의 속성 값을 wikitable로 준 표에서는 머리말 행이 '<span style="background: #E6E6E6;">회색 배경</span>＋'''볼드체'''＋가운데 정렬' 되어 나타나고, 속성 값을 sortable로 준 표에서는 머리말 행에 오름차순/내림차순 정렬 스위치가 생성됩니다. 아래 예시에서는 class 속성 값을 wikitable과 sortable을 둘 다 주었으므로 아래처럼 '<span style="background: #E6E6E6;">회색 배경</span>＋'''볼드체'''＋가운데 정렬'에 '스위치 추가'로 나타납니다.

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable sortable"
|-
! 항목
! 데이터1
! 데이터2
|-
| A
| 200
| 1278
|-
| B
| 150
| 956
|-
| C
| 100
| 1034
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable sortable"
|-
! 항목
! 데이터1
! 데이터2
|-
| A
| 200
| 1278
|-
| B
| 150
| 956
|-
| C
| 100
| 1034
|}
|}

=== 모니위키'스럽게' 표 만들기 : <code>||</code>, <code>!!</code> ===
그 동안 칸을 구분하기 위해 사용했던 '줄바꿈＋<code>|</code>'를 <code>||</code>로, '줄바꿈＋<code>!</code>'를 <code>!!</code>로 한 번에 나타낼 수 있습니다. 이를 이용하면 아래 예시와 같이 모니위키의 테이블 문법과 꽤 유사하게 표를 작성할 수 있습니다.

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면..
! style="width: 50%; text-align: center;" | 이렇게 나옵니다!
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
! 한글 || 영어 || 숫자
|-
| ㄱ || A || 1
|-
| ㄴ || B || 2
|-
| ㄷ || C || 3
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
! 한글 || 영어 || 숫자
|-
| ㄱ || A || 1
|-
| ㄴ || B || 2
|-
| ㄷ || C || 3
|}
|}

방법은 간단합니다. 위의 예시처럼 모두 한 줄에 쓰되, 처음은 <code>|</code>로 시작하고 내용과 내용 사이를 <code>||</code>로 구분 시켜주면 됩니다. 이렇게 하면 한 행에 있는 칸을 텍스트에서도 한 줄에 한꺼번에 쓸 수 있습니다. 간단한 표의 경우, 이렇게 표시하는 것이 더 직관적입니다.


다만 모니위키의 문법과는 다소 차이가 있어 주의해야할 부분이 있습니다.
# 줄 마지막에 <code>||</code>를 붙이는 것은 모니위키에서는 행이 끝남을 의미했지만, 미디어위키에서는 <code>|-</code> 기호로 행을 구분하기 때문에 줄 마지막에 <code>||</code>를 붙이면 새 칸이 하나 더 늘어날 뿐입니다. 행을 끝내고 새 행으로 넘기려면 줄 마지막에 <code>||</code>를 붙이지 마시고 바로 다음 줄로 줄바꿈해 <code>|-</code>를 입력해야 합니다.
# 모니위키처럼 표 한 줄을 코드 한 줄로 작성하면 머리말 칸 강조 기능이 줄 전체에 적용되며, 칸 별로 적용할 수 없습니다.
# 모니위키에서는 <code>||</code>와 <code>||</code> 사이를 비워두면 가로방향으로 칸이 합쳐졌지만, 미디어 위키에서는 [[그런 거 없다|그런 거 없고]] 그냥 빈 칸으로 남게 됩니다. 칸을 합치려면 따로 표에 뭔가를 더 써줘야 하지만, 이 부분은 나중에 설명합니다.

모니위키에서 넘어오신 분들은 이 점을 주의해주시면 되겠습니다.

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

{| class="wikitable"
|-
| rowspan="4" style="text-align: center;" | 기본 기호
| <nowiki>{|</nowiki>
| 표의 시작
|-
| <nowiki>|}</nowiki>
| 표의 마침
|-
| <nowiki>|</nowiki>
| 칸
|-
| <nowiki>|-</nowiki>
| 행 구분선
|-
| rowspan="2" style="text-align: center;" | 선택적으로 사용가능
| <nowiki>|+</nowiki>
| 표의 제목
|-
| <nowiki>!</nowiki>
| 머리말 칸
|-
| rowspan="2" style="text-align: center;" | 모니위키스럽게 작성할 때
| <nowiki>||</nowiki>
| 칸
|-
| <nowiki>!!</nowiki>
| 머리말 칸
|}

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

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

우선 속성을 적용하는 방법부터 설명하고, 속성의 종류는 예시를 통해 조금씩 보여드리겠습니다. 물론 뒤에서 제대로 속성 종류 정리도 따로 합니다. 보다 자유로운 표 편집을 원한다면 다양한 [[HTML]]과 [[CSS]] 문법을 활용할 수도 있습니다. 

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

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

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
| 강아지
| style="text-align: center;" | 고양이
| style="text-align: right;" | 토끼
|-
| style="text-align: left;" | 햄스터
| 앵무새
| style="text-align: center;" | 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| 강아지
| style="text-align: center;" | 고양이
| style="text-align: right;" | 토끼
|-
| style="text-align: left;" | 햄스터
| 앵무새
| style="text-align: center;" | 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
|}

이번 예시에서 이용한 속성은 style속성입니다. 이 속성을 이용하면 표의 외관 또는 내부 텍스트의 모습 등 말 그대로 표의 스타일을 정할 수 있습니다. 예시에서는 text-align을 각각 center, right, left로 지정하여 고양이와 거북이에 가운데 정렬, 토끼에 오른쪽 정렬,햄스터에 왼쪽 정렬이 된 모습입니다.


----
행에 속성을 적용할 때에는 <code>|-</code> 오른쪽에 속성을 입력하면 됩니다. 아래 예시처럼 입력하면 두 번째 줄에 속성이 적용됩니다. 만약, 첫째 행에 속성을 적용하고 싶다면 첫 줄의 <code>|-</code>에 속성을 입력하면 됩니다.

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
| 강아지
| 고양이
| 토끼
|- style="background: blue; color: white;"
| 햄스터
| 앵무새
| 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| 강아지
| 고양이
| 토끼
|- style="background: blue; color: white;"
| 햄스터
| 앵무새
| 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
|}

background와 color를 각각 blue, white로 지정해주었기 때문에 표의 배경색이 파랑색으로, 글씨 색깔이 흰색으로 나타납니다.

----
표에 속성을 적용할 때에는 표의 시작부분인 <code>{|</code> 오른쪽에 속성을 입력합니다. 아래 예시처럼 입력하면 전체 행에 속성이 적용됩니다.
{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable"
|-
| 강아지
| 고양이
| 토끼
|-
| 햄스터
| 앵무새
| 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| 강아지
| 고양이
| 토끼
|-
| 햄스터
| 앵무새
| 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
|}

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

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

{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{|
|-
| 강아지 || 고양이 || 토끼
|-
| 햄스터 || 앵무새 || 거북이
|-
| 기니피그 || 고슴도치 || 타마고치
|}
</pre>
| style="padding: 5px;" |
{|
|-
| 강아지 || 고양이 || 토끼
|-
| 햄스터 || 앵무새 || 거북이
|-
| 기니피그 || 고슴도치 || 타마고치
|}
|}

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

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

특히, style 속성에서는 속성 값들을 표현할 때는 <code>;</code>로 구분하고 <code>;</code>로 구체적인 값을 나타냅니다.
*예: <code>style="background: #FFDE80; color: #F39E00; text-align: right;"</code>
*속성 값은 항상 끝에 <code>;</code>를 붙여줘야 합니다. 맨 마지막을 <code>"</code>로 끝내는 것도 잊지 마시구요!

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

==== colspan, rowspan ====
<code>colspan=" "</code>또는 <code>rowspan=" "</code>로 표기합니다. <code>" "</code> 안에는 병합되는 칸 수가 들어갑니다.
*모니위키에서 <-숫자>로 쓰던 가로줄 병합 기능이 colspan=" "로 대응됩니다.
*모니위키에서 <|숫자>로 쓰던 세로줄 병합 기능이 rowspan=" "로 대응됩니다. 

*colspan 사용시
{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| 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
|}
</pre>
| style="padding: 5px;" |
{| 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
|}
|}


*rowspan 사용시
{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| 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
|}
</pre>
| style="padding: 5px;" |
{| 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
|}
|}

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

{| style="width: 100%;"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable" style="float: right;"
|-
| style="color: yellow; background: black;" | 강아지
| 고양이
| 토끼
|- style="text-align: right;"
| 햄스터
| 앵무새
| 거북이
|- style="background: #FFDE80; color: #F39E00;"
| 기니피그
| 고슴도치
| 타마고치
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable" style="float: right;"
|-
| style="color: yellow; background: black;" | 강아지
| 고양이
| 토끼
|- style="text-align: right;"
| 햄스터
| 앵무새
| 거북이
|- style="background: #FFDE80; color: #F39E00;"
| 기니피그
| 고슴도치
| 타마고치
|}
|}

==== class ====
<code>class=" "</code>로 입력합니다. <code>" "</code> 안에는 다음 속성 값들이 들어갑니다.
*<code>wikitable</code>: 표에 구분선 생성 및 머리말 행을 회색 배경, 볼드체, 가운데 정렬 시킴.
*<code>sortable</code>: 머리말 행에 오름차순/내림차순 정렬 스위치를 생성. ※!를 사용한 머리말 행이 있어야 적용됩니다.
*<code>mw-collapsible</code>: 열려 있는 여닫이 표.
*<code>mw-collapsible mw-collapsed</code>: 닫혀 있는 여닫이 표.
*<code>libre-responsive-table</code>: 모바일 환경에서는 리스트 형태로 보이는 표.<ref>[[위키방:203923|위키방 - 모바일 테이블 관련 업데이트]]</ref>
*<code>infobox</code>: 정보상자 틀


*sortable 사용시
{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable sortable"
|-
! 항목
! 데이터1
! 데이터2
|-
| A
| 200
| 1278
|-
| B
| 150
| 956
|-
| C
| 100
| 1034
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable sortable"
|-
! 항목
! 데이터1
! 데이터2
|-
| A
| 200
| 1278
|-
| B
| 150
| 956
|-
| C
| 100
| 1034
|}
|}


*mw-collapsible 사용시
{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable mw-collapsible"
|-
| 항목
| 데이터1
| 데이터2
|-
| A
| 200
| 1278
|-
| B
| 150
| 956
|-
| C
| 100
| 1034
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable mw-collapsible"
|-
| 항목
| 데이터1
| 데이터2
|-
| A
| 200
| 1278
|-
| B
| 150
| 956
|-
| C
| 100
| 1034
|}
|}


*mw-collapsible mw-collapsed 사용시
{| style="width: 100%"
|-
! style="width: 50%; text-align: center;" | 이렇게 입력하면
! style="width: 50%; text-align: center;" | 이렇게 나옵니다
|-
| style="padding: 5px;" |
<pre>
{| class="wikitable mw-collapsible mw-collapsed"
|-
| 항목
| 데이터1
| 데이터2
|-
| A
| 200
| 1278
|-
| B
| 150
| 956
|-
| C
| 100
| 1034
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable mw-collapsible mw-collapsed"
|-
| 항목
| 데이터1
| 데이터2
|-
| A
| 200
| 1278
|-
| B
| 150
| 956
|-
| C
| 100
| 1034
|}
|}

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

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

*<code>row</code>: 행(→) 머리말
*<code>col</code>: 열(↓) 머리말
*<code>rowgroup</code>: 행(→) 머리말 묶음
*<code>colgroup</code>: 열(↓) 머리말 묶음

{| class="wikitable"
! 
! 
! rowspan="2" scope="col" |<code>col</code><br /> 열(↓) 머리말
! rowspan="2" scope="col" |<code>col</code><br /> 열(↓) 머리말
! colspan="2" scope="colgroup"| <code>colgroup</code><br /> 열(↓) 머리말 묶음
|-
! 
! 
! scope="col" |<code>col</code><br /> 열(↓) 머리말
! scope="col" |<code>col</code><br /> 열(↓) 머리말
|-
! colspan="2" scope="row" |<code>row</code><br /> 행(→) 머리말
| 
| 
| 
| 
|-
! colspan="2" scope="row" |<code>row</code><br /> 행(→) 머리말
| 
| 
| 
| 
|-
! rowspan="2" scope="rowgroup"| <code>rowgroup</code><br /> 행(→) 머리말 묶음
! scope="row" |<code>row</code><br /> 행(→) 머리말
| 
| 
| 
| 
|-
! scope="row" |<code>row</code><br /> 행(→) 머리말
| 
| 
| 
| 
|}

== 표 안의 값을 정렬하자! ==
<code>class="wikitable sortable"</code>를 사용하면 대부분의 경우 오름차순/내림차순으로 정렬할 수 있습니다. 
{| class="wikitable sortable"
|-
! 항목
! 가격
|-
| 커피
| 2000
|-
| 콜라
| 800
|-
| 라면
| 1200 
|}하지만 중간에 들어간 값에 숫자 외의 값이 있으면 다음과 같이 정렬에 문제가 있습니다. 
{| class="wikitable sortable"
|-
! 항목
! 가격
|-
| 커피
| 2000원
|-
| 콜라
| 800원
|-
| 라면
| 1200원
|}
이런 경우 값의 형식을 지정해 해결할 수 있습니다. <code>data-sort-type="(타입)"</code>의 형식으로 다음과 같이 입력합니다. 
<pre>
{| class="wikitable sortable"
|-
! 항목
! data-sort-type="number" |가격
|-
| 커피
| 2000원
|-
| 콜라
| 800원
|-
| 라면
| 1200원
|}
</pre>
{| class="wikitable sortable"
|-
! 항목
! data-sort-type="number" |가격
|-
| 커피
| 2000원
|-
| 콜라
| 800원
|-
| 라면
| 1200원
|}
값의 형식은 text, number, date, time 등이 있습니다. 자세한 내용은 위키미디어 메타위키의 [https://meta.wikimedia.org/wiki/Help:Sorting Help:Sorting(영어)]를 참고할 수 있습니다.

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

== HTML 테이블 태그와의 비교 ==
미디어위키 테이블 문법은 <code><nowiki><table></nowiki></code> 태그와 일대일로 대응합니다. 또한 미디어위키는 <code><nowiki><table></nowiki></code> 태그도 직접 사용할 수 있지만 위키의 표 문법을 사용하는 것이 그나마 더 효율적인 것도 알 수 있습니다.
{| style="width: 100%"
|-
! style="width: 40%; text-align: center;" | 미디어위키 문법 
! style="width: 40%; text-align: center;" | HTML 태그
! style="width: 20%; text-align: center;" | 결과물
|-
| style="padding: 3px;" |
<pre>
{| class="wikitable"
|-
! 항목
! 내용
|- style="background:yellow;"
| A
| '''200'''
|-
|style="border: 3px solid;"| B
| 150
|-
|colspan="2"| C/100
|}
</pre>
| style="padding: 3px;" |
<pre>
<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>
</pre>
| style="padding: 3px;" |
<!-- 편의상 table 태그를 쓴 결과물을 추출했습니다. -->
<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>
|}

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

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

== 그래도 안 되겠으면 ... ==
* 시각적으로 직접 편집할 수 있습니다. → [http://www.tablesgenerator.com/mediawiki_tables 바로가기] 
* 엑셀 표를 미디어위키 표로 변경할 수 있습니다. → [http://tools.wmflabs.org/excel2wiki/index.php 바로가기]
* 비록 아래 대체 문자를 활용해서 틀 안에 표를 만들 수 있지만, 편집이 어려워집니다. 숨기기의 경우 {{틀|숨김 시작}}과 {{틀|숨김 끝}} 사이에 삽입하는 것이 좋습니다.
* 틀이나 표 안에서는 파이프 문자 |를 직접 사용할 수 없습니다. 단순히 문자를 표현하고 싶으시면 <code><nowiki><nowiki></nowiki></code> 태그로 문자를 감싸면 됩니다. 또한 다음 변환 문자 공식을 이용해서 틀 안에 표를 사용할 수 있습니다. 

{|class="wikitable"
|+ style="font-size:1.3em;"|변환 문자 표현하는 방법
|-
! 표현하려는 문자 !! 입력 방법 !! !! 표현하려는 문자 !! 입력 방법
|- 
|<nowiki>|</nowiki> || <nowiki>{{!}}</nowiki> || || <nowiki>||</nowiki> || <nowiki>{{!!}}</nowiki>
|- 
|<nowiki>{|</nowiki> || <nowiki>{{{!}}</nowiki> || || <nowiki>|}</nowiki> || <nowiki>{{!}}}</nowiki>
|- 
|<nowiki>|-</nowiki> || <nowiki>{{!}}-</nowiki> || || <nowiki>|+</nowiki> || <nowiki>{{!}}+</nowiki>
|- 
| = || <nowiki>{{=}}</nowiki><br />|| ||  || 
|}

예시 : 고지 상자 안에 표 넣기
* 코드
<pre>
{{고지 상자 |제목 = 고지 상자 안에 표를 넣을 수 있습니다.
|내용 = {{{!}}class="wikitable"
! 제목 !! 내용
{{!}}-
{{!}} 테스트
{{!}} 고지 상자 안에 표 넣는 예시입니다.
{{!}}} }}
</pre>
* 결과
{{고지 상자 |제목 = 고지 상자 안에 표를 넣을 수 있습니다.
|내용 = {{{!}}class="wikitable"
! 제목 !! 내용 {{-}}
{{!}}-
{{!}} 테스트
{{!}} 고지 상자 안에 표 넣는 예시입니다. {{-}}
{{!}}} }}

{{각주}}
{{리브레 위키 도움말}}
[[분류:도움말]]