도움말:위키 문법/표

이 문서는 제이위키의 도움말입니다.

이 문서는 제이위키 초보자를 위한 문서로, 훌륭한 기여자 분들의 기여를 언제나 기다립니다.

웹에서 표를 만들 때는 주로 HTML 태그 <table>이 사용됩니다. 하지만 제이위키에서는 <table>뿐 아니라 간략한 방법으로 보다 편리하게 표를 만들 수 있습니다. 여기서는 <table> 태그에 대해서는 생략하고, 간단한 문법을 통해 표를 만드는 방법에 대해 안내하겠습니다.

HTML 숙련자들은 <table>을 사용해도 되지만, 가급적이면 태그에 익숙하지 않은 다른 편집자들을 위해 간략화된 문법을 사용해 봅시다.

테이블 문법에서는 파이프 문자(|)가 자주 사용됩니다. 이 문자는 키보드 상에서 ↵ Enter 위, ] 오른쪽의 역슬래시를 ⇧ Shift를 함께 눌러 입력합니다.

1 인터페이스

다음은 기본적인 명령어입니다. 각 줄의 첫머리에서만 사용해야 합니다.

명령어	의미하는 태그	설명
{|	<table>	표 시작하기.
|}	</table>	표 끝내기.
|+	<caption></caption>	표 제목 넣기. {| 다음 줄에 사용해야 합니다. 생략할 수 있습니다.
|-	<tr></tr>	새 줄 만들기.
|	<td></td>	새 칸 만들기.
||	<td></td>	여러 개의 새 칸을 한 줄에 붙여서 쓰기.
!	<th></th>	머리말 칸 만들기. 일반 칸과 달리 배경 색이 #f5f8fa가 되며, 텍스트가 가운데로 정렬되고, 볼드체가 쳐집니다.

흔하진 않지만 틀 내에서 표를 만들어야 할 땐 파이프 문자가 포함된 위 문법을 그대로 사용하면 안 됩니다. 마찬가지로 파이프 문자를 사용하는 틀의 매개변수 문법과 겹치기 때문입니다. 대신 아래 대체된 틀을 사용합니다.

[ 펼치기 · 접기 ] 기존 문법 대체된 틀 {| {{(!}} |} {{!)}} |- {{!-}} | {{!}} || {{!!}}

또, HTML 문법을 사용해서 colspan, rowspan, style 등의 옵션을 넣을 수 있습니다. 본 위키에서는 지정된 설정 이외의 글자색이나 글자크기, 효과 등을 사용하는 것을 권장하지 않으므로, 다음에는 사용자가 자유롭게 설정할 수 있는 부분에 대해서만 설명하겠습니다.

다음은 옵션을 넣는 방법입니다. 위의 기본 명령어 바로 다음에 입력합니다.

명령어	설명
style="width:100px;"	줄, 칸 혹은 표 전체의 가로 너비를 지정합니다. px 대신 50%처럼 비율을 넣을 수도 있습니다.
style="text-align:left;"	글자 왼쪽 정렬. left 대신 center(가운데), right(오른쪽) 정렬을 쓸 수 있습니다.
colspan="n"	가로 n칸을 합칩니다. 입력하는 숫자에 따라 칸의 갯수도 변합니다.
rowspan="n"	세로 n칸을 합칩니다. 입력하는 숫자에 따라 칸의 갯수도 변합니다.

2 기본 표 디자인

wikitable은 표를 통일성 있게 관리하기 위해 미리 디자인된 서식입니다. 문서에 표를 삽입해야 할 때는 표 첫째 줄에 class="wikitable"을 사용해 보세요.

문법	결과
{|class="wikitable" |+표 제목 |- !style="width:40%"|A !style="width:60%"|B |- |A1 |B1 |- |colspan="2"|''C'' |}	표 제목 A B A1 B1 C

칸 내에서의 개행은 한 줄 개행일 경우 일반적인 개행법과 똑같이 <br>을 사용하면 되지만, 두 줄 개행은 ↵ Enter 두 번으로 작동하지 않습니다. 이때 <br>을 두 번 사용하는 것보다 {{brbr}}을 사용할 것을 권장합니다. 개행을 할 곳에 해당 틀을 입력하면 됩니다. <br>을 두 번 사용하면 일반적인 ↵ Enter 두 번 개행보다 행간이 더 넓어지기 때문입니다.

문법	결과
{|class="wikitable" |- |한 줄을<br>개행하려면<br>br로 |- |두 줄은{{brbr}}틀로 |}	한 줄을 개행하려면 br로 두 줄은 틀로
{|class="wikitable" |- |엔터키로는 불완전하므로 권장하지 않습니다 |}	엔터키로는 불완전하므로 권장하지 않습니다

표 안에서 목록이나 가로줄 등 한 줄의 첫 머리에 작성해야만 하는 문법을 쓸 때는 단순히 엔터를 눌러 새 줄을 만들어 주면 됩니다.

문법	결과
{|class="wikitable" |- | * 목록은 * 이렇게 |- | ---- 가로줄은 이렇게 |}	목록은 이렇게 가로줄은 이렇게

정석적인 문법에서는 보이는 각 칸마다 편집창에서는 한 줄을 차지하게 됩니다. 그러나 파이프 문자를 한 줄에 두 번씩 사용하여 가로로 여러 개가 있는 칸들 한 줄을 편집창에서도 한 줄로 보이게 할 수 있습니다.

정석 문법	여러 칸이 한 줄에 작성될 수 있습니다 칸의 성격은 첫 머리에 느낌표나 파이프 문자가 오느냐에 따라 전부 정해집니다 하지만 병합을 하려면 따로 써야 하죠
{|class="wikitable" style="text-align: center;" |- |여러 칸이 |한 줄에 |작성될 수 |있습니다 |- !칸의 성격은 !첫 머리에 !느낌표나 !파이프 문자가 |- |오느냐에 따라 |전부 |정해집니다 | |- |하지만 |병합을 하려면 |colspan="2"|따로 써야 하죠 |}
가능한 문법
{|class="wikitable" style="text-align: center;" |- |여러 칸이||한 줄에||작성될 수||있습니다 |- !칸의 성격은||첫 머리에||느낌표나||파이프 문자가 |- |오느냐에 따라||전부||정해집니다|| |- |하지만||병합을 하려면 |colspan="2"|따로 써야 하죠 |}

2.1 칸 합치기

표의 칸이 여러 개일 때, 가로나 세로로 원하는 개수만큼 합칠 수 있습니다. 이를 "병합한다"고 합니다.

가로로 병합할 때는 colspan 태그를, 세로로 병합할 때는 rowspan 태그를 사용합니다.

문법	결과
{|class="wikitable" |- |여긴 |세 칸 |이지만 |- |colspan="2"|합쳤으니 |두 칸입니다 |}	여긴 세 칸 이지만 합쳤으니 두 칸입니다

병합 태그를 사용한 곳부터 오른쪽 혹은 아래쪽으로 입력한 숫자만큼 합쳐지는 것입니다. 칸이 합쳐지면 그만큼 칸의 총 개수가 줄어들기 때문에, 합친 칸의 수만큼 적절히 칸을 분배하는 것이 중요합니다.

예시로 바로 위의 예제를 보면, 윗줄은 3칸이지만 아랫줄은 2칸을 하나로 합쳤기 때문에 2칸짜리+1칸을 합쳐 총 2개만이 작성되었습니다.

rowspan을 통해 세로로 병합할 수도 있습니다.

문법	결과
{|class="wikitable" |- |rowspan="2"|세로로 두 칸 |각각 따로 |- |두 칸 |}	세로로 두 칸 각각 따로 두 칸

2.1.1 칸의 개수가 서로 다를 때 너비가 같도록 하기

위에서부터 아래로 1칸부터 4칸까지 칸의 개수가 서서히 늘어나는 4줄짜리 표를 만들 때, 각 줄의 칸 너비를 적절히 조절할 수 있습니다.

일반적인 방법으로 표를 만들려 시도하면 다음과 같이 될 것입니다.

문법	결과
{|class="wikitable" |- |style="width: 100%;"|1 |- |style="width: 50%;"|2 |style="width: 50%;"|둘 |- |style="width: 33%;"|3 |style="width: 33%;"|셋 |style="width: 33%;"|삼 |- |style="width: 25%;"|4 |style="width: 25%;"|넷 |style="width: 25%;"|사 |style="width: 25%;"|四 |}	1 2 둘 3 셋 삼 4 넷 사 四

이렇듯 각 칸의 너비를 열심히 조정해도 제대로 이루어지지 않습니다.

이때는 테이블 전체의 너비를 반드시 지정하고, 테이블의 style에 table-layout: fixed;를 넣어 줍니다. 그리고 개수가 다른 칸들의 최소공배수를 구한 뒤 최소공배수에서 칸 개수를 나눈 값만큼을 가로 병합해 주면 끝납니다. 이 부분은 아래 예제를 보며 이해하는 게 빠를 것입니다. 그리고 각 칸의 너비를 지정하지 않기만 하면 됩니다.

문법	결과
{|class="wikitable" style="text-align: center; width: 200px; table-layout: fixed;" |- |colspan="12"|1 |- |colspan="6"|2 |colspan="6"|둘 |- |colspan="4"|3 |colspan="4"|셋 |colspan="4"|삼 |- |colspan="3"|4 |colspan="3"|넷 |colspan="3"|사 |colspan="3"|四 |}	1 2 둘 3 셋 삼 4 넷 사 四

혹은 표 안에 새로운 표를 여백 없이 들어차게 하는 {{TIT}}를 이용할 수도 있습니다.

문법	결과
{|class="wikitable" style="text-align: center;" |- |colspan="4"|1 |- |colspan="2"|2 |colspan="2"|둘 |- |colspan="4"|{{TIT}} |- |style="width: 33%;"|3 |style="width: 33%;"|셋 |style="width: 33%;"|삼 {{TIT끝}} |- |style="width: 25%;"|4 |style="width: 25%;"|넷 |style="width: 25%;"|사 |style="width: 25%;"|四 |}	1 2 둘 3 셋 삼 4 넷 사 四

2.2 표의 style

CSS 상의 style을 표에 직접 적용해 줄 수 있습니다. style에 사용되는 속성은 무수히 많지만, 여기서는 위키 편집에 유용하게 혹은 자주 쓰일 수 있는 속성들에 대해 안내합니다.

후술할 모든 속성은 style="" 안에 작성합니다.

• style 우선 적용 순위
  • 각 셀 지정(|style="" 또는 !style="")
    > 각 열 지정(|-style="")
    > 테이블 전체 지정({|style="")

2.2.1 테이블과 텍스트 정렬

• 테이블 정렬하기
  ※ 이 속성은 반드시 표 전체 style에 입력해야 합니다.
  • margin-left: 0; margin-right: auto;: 테이블 왼쪽 정렬 (기본값)
  • float: left;: 테이블 왼쪽 정렬, 오른쪽의 여백으로 내용이 올라옴
  • margin-left: auto; margin-right: auto; 또는 margin: 12px auto;: 테이블 가운데 정렬
  • float: right;: 테이블 오른쪽 정렬, 왼쪽의 여백으로 내용이 올라옴
  • margin-left: auto; margin-right: 0;: 테이블 오른쪽 정렬
• 텍스트 가로 정렬
  ※ 각 칸의 style에 입력하면 해당 칸에만, 표 전체 style에 입력하면 표 전체에 적용됩니다.
  • text-align: left;: 텍스트 왼쪽 정렬 (기본값)
  • text-align: center;: 텍스트 가운데 정렬
  • text-align: right;: 텍스트 오른쪽 정렬
• 텍스트 세로 정렬
  ※ 각 칸의 style에 입력하면 해당 칸에만, 표 전체 style에 입력하면 표 전체에 적용됩니다.
  • vertical-align: top;: 텍스트 수직 위 정렬
  • vertical-align: middle;: 텍스트 수직 가운데 정렬 (기본값)
  • vertical-align: bottom;: 텍스트 수직 아래 정렬

2.2.2 테이블과 셀의 크기 및 색상

• 너비
  ※ 각 칸의 style에 입력하면 해당 칸에만, 표 전체 style에 입력하면 표 전체에 적용됩니다.
  • width: (수치);
    • 퍼센트(%)와 픽셀(px) 단위로 입력할 수 있습니다. 너무 넓은 너비를 가지고 있을 경우 표가 화면을 넘어가 가로로 스크롤 해야 하는 불편함이 있습니다.
    • 400px 이상인 표를 만들 땐 너비를 max-width로 바꾸고 {{너비맞춤}}을 이용하는 방법이 있습니다.
• 셀 높이
  ※ 테이블 전체가 아닌 셀에만 적용됩니다.
  • height: (수치);
• 배경색
  • background: (색상);
    • (색상)에는 다양한 표기가 사용될 수 있습니다.
      • 헥스코드 여섯 자리: #RRGGBB 또는 #RGB
        가장 기본적인 표현법입니다. 일부 헥스코드는 여섯 자리에서 세 자리로 축약하여 표기할 수 있습니다.
      • HTML 색 이름
        특정 색상은 해당하는 이름만 입력하면 그 색상이 적용됩니다.
      • rgba(0~255, 0~255, 0~255)
        각 RGB에 0부터 255까지 직접 값을 넣어 색상을 적용할 수도 있습니다. 보통 괄호 안에 RGB 세 값을 입력하지만, 여기에 추가로 하나의 값을 더 입력하면 투명도 값을 의미합니다.
• 글자색
  • color: (색상);
    • (색상)은 위 배경색과 같습니다.
    • 굳이 표의 style에 적용하지 않고 텍스트에 따로 {{color}} 등을 사용해도 좋습니다.
• 테두리색
  • border: (두께) (모양) (색상);
    • (두께)의 경우 2px 미만의 두께는 제대로 보이지 않을 수 있습니다.
    • (모양)에 대해서는 도움말:위키 문법/HTML의 테두리 문단을 참고하십시오.
    • (색상)은 위 배경색과 같습니다.
    • 나무위키의 테두리 적용과 같게 하려면 border: 2px solid (색상);으로 입력하면 됩니다.

2.3 셀 내부 여백 제거

wikitable 표에는 각 셀마다 기본적인 내부 여백(상하 0.3rem, 좌우 0.6rem)이 있습니다. 이 여백을 지워 줌으로써 이미지를 셀에 꽉 차도록 넣을 수 있습니다.

문법	결과
↓ 문법을 적용하지 않은 이미지 ↓
{|class="wikitable" style="width: 150px; border: 2px solid red; margin: 12px auto; background: yellow;" |- |[[파일:대한민국 국기.svg|1000px|link=]] |}
셀 내부 여백 탓에 이미지와 빨간 테두리 사이에 노란 배경색이 보임.
↓ 문법을 적용한 이미지 ↓
틀 미사용 {|class="wikitable" style="width: 150px; border: 2px solid red; margin: 12px auto; background: yellow;" |- |<div style="margin: -0.3rem -0.6rem;">[[파일:대한민국 국기.svg|1000px|link=]]</div> |}
틀 사용 {|class="wikitable" style="width: 150px; border: 2px solid red; margin: 12px auto; background: yellow;" |- |{{nmi|대한민국 국기.svg}} |}
셀 내부 여백을 제거함으로써 이미지와 빨간 테두리 사이의 노란 배경색이 보이지 않고 이미지가 표에 꽉 차는 것처럼 보이게 됨.

사실 {{이미지 여백 제거}}를 쓰는 게 더 편합니다(...).

3 class를 이용한 특수한 표

3.1 오름차순, 내림차순 정렬이 가능한 표

class="sortable"은 표의 항목을 가나다순, 012순 등으로 정렬할 수 있게 해 줍니다. 표의 가장 윗줄 칸들에 차순을 바꾸어 볼 수 있는 버튼이 생겨나며, 이 칸에 따로 class="unsortable"을 입력해 주면 그 칸에는 버튼이 사라집니다.
{| class="wikitable sortable" |- |+ 싱글 |- ! class="unsortable" style="width:20%"| 번호 ! style="width:40%"| 제목 ! style="width:40%"| 발매일 |- ! 1st 싱글 | Happy Valentine | 2000년 2월 14일 |- ! 2nd 싱글 | Blue Sky | 2001년 7월 7일 |- ! 3rd 싱글 | Someday | 2002년 3월 31일 |- ! 4th 싱글 | Memories. | 2004년 1월 2일 |}	싱글 번호 제목 발매일 1st 싱글 Happy Valentine 2000년 2월 14일 2nd 싱글 Blue Sky 2001년 7월 7일 3rd 싱글 Someday 2002년 3월 31일 4th 싱글 Memories. 2004년 1월 2일

3.2 접고 펼 수 있는 표

 커스텀 접기를 이용한 나무위키 둘러보기 틀 형식의 표에 대한 내용은 다음 문서를 참고하십시오.

• 도움말:위키 문법 문서의 표에서 응용하기 문단
• 틀:펼치기 접기 문서 (권장)

class="mw-collapsible mw-collapsed"는 스크롤이 너무 긴 표를 접고 펼 수 있게 해 줍니다. 접기를 위해 맨 위에는 colspan을 사용해 1칸짜리 줄을 생성해야 합니다. mw-collapsible : 접고 펴기가 가능한 표로 만드는 코드. mw-collapsed : 처음부터 접혀진 상태로 보이게 하는 코드.
{| class="wikitable mw-collapsible mw-collapsed" |- ! colspan="4"| 메이저 활동 이후 발매된 싱글 목록 |- ! style="width:20%"| 번호 ! style="width:40%"| 제목 ! style="width:40%"| 발매일 |- ! 1st 싱글 | Happy Valentine | 2000년 2월 14일 |- ! 2nd 싱글 | Blue Sky | 2001년 7월 7일 |- ! 3rd 싱글 | Someday | 2002년 3월 31일 |- ! 4th 싱글 | Memories. | 2004년 1월 2일 |}	메이저 활동 이후 발매된 싱글 목록 번호 제목 발매일 1st 싱글 Happy Valentine 2000년 2월 14일 2nd 싱글 Blue Sky 2001년 7월 7일 3rd 싱글 Someday 2002년 3월 31일 4th 싱글 Memories. 2004년 1월 2일