도움말:표

개요

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

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

“

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

“

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

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

간단한 표부터 만들어 보자!

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

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

{|, |}, |, |-와 익숙해지기

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

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

이렇게만 설명하면 잘 와닿지 않으니, 바로 만들어 살펴보겠습니다.

이렇게 입력하면..	이렇게 나옵니다!
{| class="wikitable" | ㄱ | ㄴ | ㄷ |- | A | B | C |- | 1 | 2 | 3 |- | 사과 | 오렌지 | 포도 |}	ㄱ ㄴ ㄷ A B C 1 2 3 사과 오렌지 포도

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

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

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

이렇게 입력하면..	이렇게 나옵니다!
{| class="wikitable" | ㄱ | ㄴ | ㄷ | ㄹ | ㅁ |- | ㅏ | ㅑ | ㅓ | ㅕ | ㅗ |- | A | B | C | D | E |- | 1 | 2 | 3 | 4 | 5 |}	ㄱ ㄴ ㄷ ㄹ ㅁ ㅏ ㅑ ㅓ ㅕ ㅗ A B C D E 1 2 3 4 5
{| class="wikitable" | 강아지 | 고양이 |- | 토끼 | 햄스터 |}	강아지 고양이 토끼 햄스터

알면 좋은 참고 사항들

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

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

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

---

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

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

---

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

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

---

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

이렇게 입력하면..	이렇게 나옵니다!
{| class="wikitable" |- | [[파일:Libre_Wiki-Logo.png|150px]] |- | {{youtube|1a0WDHZuw4w|300px|200px}} |}

---

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

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

표에 제목 넣기 : |+

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

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

머리말 칸 넣기 : !

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

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

꼭 첫 번째 행에 있는 칸만 강조할 수 있는 것은 아닙니다. 열을 머리말 칸으로 나타낼 수도 있습니다.

이렇게 입력하면..	이렇게 나옵니다!
{| class="wikitable" |- ! ! ㅏ ! ㅑ ! ㅓ |- ! ㄱ | 가 | 갸 | 거 |- ! ㄴ | 나 | 냐 | 너 |- ! ㄷ | 다 | 댜 | 더 |}	ㅏ ㅑ ㅓ ㄱ 가 갸 거 ㄴ 나 냐 너 ㄷ 다 댜 더

---

아래 예시처럼 작성하면 세 번째 행의 1번째, 2번째, 3번째 칸이 강조되어 나타납니다.

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

---

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

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

알아도 되고 몰라도 되는 참고 사항

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

머리말 칸이 어떤 방법으로 강조 되는 지는 그 표가 어떤 속성을 가지고 있느냐에 따라 달라집니다. 예를 들어, 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" |- ! 한글 || 영어 || 숫자 |- | ㄱ || A || 1 |- | ㄴ || B || 2 |- | ㄷ || C || 3 |}	한글 영어 숫자 ㄱ A 1 ㄴ B 2 ㄷ C 3

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

다만 모니위키의 문법과는 다소 차이가 있어 주의해야할 부분이 있습니다.

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

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

정리

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

기본 기호	{|	표의 시작
	|}	표의 마침
	|	칸
	|-	행 구분선
선택적으로 사용가능	|+	표의 제목
	!	머리말 칸
모니위키스럽게 작성할 때	||	칸
	!!	머리말 칸

표를 예쁘게 꾸며보자!

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

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

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

속성 적용 방법

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

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

이렇게 입력하면	이렇게 나옵니다
{| 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 등
scope=" "	소프트웨어가 머리말을 인식할 수 있도록 합니다.	row, col, rowgroup, colgroup

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

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

class

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

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

• 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

scope

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

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

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

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

표 안의 값을 정렬하자!

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="(값)"의 형식으로 입력합니다.

그래도 안 되겠으면 ...

• 시각적으로 직접 편집할 수 있습니다. → 바로가기
• 엑셀 표를 미디어위키 표로 변경할 수 있습니다. → 바로가기
• 현재 틀 안에 표를 넣을 수 없기 때문에 인용문 안에 넣을 수 없습니다. 숨기기의 경우 {{숨김 시작}}과 {{숨김 끝}} 사이에 삽입해주세요.