도움말:표 편집하기

== 개요 ==
[[위키 작성, 당신도 할 수 있다!]] 문서에도 나와 있듯이 간단한 표는 [http://www.tablesgenerator.com/mediawiki_tables 표 생성기]에서 만들어 가져올 수 있습니다. 스프레드시트(표) 소프트웨어에서 만들어 변환하거나, 다른 웹 페이지의 표 혹은 [[마크다운]] 코드를 가져와 변환하는 것도 가능합니다. 사용이 어렵다면 [[시리즈:미디어위키 표 생성기 사용하기|미디어위키 표 생성기 사용하기]] 문서를 참고할 수도 있습니다. 혹은 편집창 상단의 "고급"을 누르고 제일 오른쪽에 있는 [[File:Toolbar insert table.png]] 아이콘을 클릭해서 만드는 방법도 있습니다. 

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

{{인용문|여기가 파란색으로 되어 있으면 더 보기 좋을 것 같아.<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
|}
|}


꼭 첫 번째 행에 있는 칸만 강조할 수 있는 것은 아닙니다. 열을 머리말 칸으로 나타낼 수도 있습니다. 
{| 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"
|-
! 
! ㅏ
! ㅑ
! ㅓ
|-
! ㄱ 
| 가
| 갸
| 거
|-
! ㄴ
| 나
| 냐
| 너
|-
! ㄷ
| 다
| 댜
| 더
|}
|}

----
아래 예시처럼 작성하면 세 번째 행의 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>
| 머리말 칸
|}

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

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

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

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

칸 하나에 속성을 적용할 때는 <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"
|-
| 강아지
| align="center" | 고양이
| align="right" | 토끼
|-
| align="left" | 햄스터
| 앵무새
| align="center" | 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|-
| 강아지
| align="center" | 고양이
| align="right" | 토끼
|-
| align="left" | 햄스터
| 앵무새
| align="center" | 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
|}

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

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


----
행에 속성을 적용할 때에는 <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;"
| 햄스터
| 앵무새
| 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
|}

이번 예시에서 이용한 속성은 style속성입니다. 이 속성을 이용하면 표의 외관 또는 내부 텍스트의 모습 등 말 그대로 표의 스타일을 정할 수 있습니다. 예시에서는 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"
|- align="right" style="color: green;"
| 강아지
| 고양이
| 토끼
|-
| 햄스터
| 앵무새
| 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
</pre>
| style="padding: 5px;" |
{| class="wikitable"
|- align="right" style="color: green;"
| 강아지
| 고양이
| 토끼
|-
| 햄스터
| 앵무새
| 거북이
|-
| 기니피그
| 고슴도치
| 타마고치
|}
|}

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


----
표에 속성을 적용할 때에는 표의 시작부분인 <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"를 기본으로 적용하고 들어갑니다.<ref><s>관리적인 측면에서도 모든 표에 class="wikitable"가 있는 것이 좋습니다. 표 외관을 수정하려면 wikitable 코드 하나면 건드려주면 되기 때문이죠. 속성 값에 다른 이름도 아닌 wiki가 들어가 있는 것도 그 만큼 중요하고 가장 메인이 되는 속성이기 때문입니다.</s> 독자적인 추론입니다. 만약 맞다면 이 내용을 다듬어서 올려주시고, 틀리다면 이 주석을 지우거나 정확한 정보로 수정해주시기 바랍니다.</ref>

{| 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>


*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>scope</code>는 시각장애인이 보이스 오버와 같이 화면의 내용을 읽어주는 스크린 리더 소프트웨어로 표를 읽는 등 소프트웨어가 표의 내용을 인식할 수 있도록 합니다. <code>!</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>의 형식으로 입력합니다.

== 그래도 안 되겠으면 ... ==
*시각적으로 직접 편집할 수 있습니다. → [http://www.tablesgenerator.com/mediawiki_tables 바로가기]
*엑셀 표를 미디어위키 표로 변경할 수 있습니다. → [http://tools.wmflabs.org/excel2wiki/index.php 바로가기]
*현재 틀 안에 표를 넣을 수 없기 때문에 인용문 안에 넣을 수 없습니다. 숨기기의 경우 {{틀|숨김 시작}}과 {{틀|숨김 끝}} 사이에 삽입해주세요.

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