개요

표와 관련된 추가적인 기능들을 정리해 놓은 문서이다.


가장 간단한 표 만들기

편집모드에서 상단의 ▼고급 → 밭전 자(田) 실행하면 쉽게 표를 만들수 있다.
다음은 1행 2열의 표 예시이다.

입력
{| class="wikitable"
|-
! 표 제목 !! 표 제목
|-
| 예시 || 예시
|-
| 예시 || 예시
|}
보여지는 결과
표 제목 표 제목
예시 예시
예시 예시


위키 표만들기로 만들면 기본적으로 테이블선이 보이도록 class="wikitable" 내용이 들어가 있다. 이 항목은 미리 정의된 틀래스로 이것을 지우면 선이 보이지 않는 테이블로 바뀐다..


표의 구성

위키에서는 위키문법으로 표를 쉽게 만들 수 있다. HTML 문법으로도 표를 구현할 수 있다.

기능 위키문법 HTML 문법
표 시작 {| class="wikitalbe" <table class="wikitable">
캡션 (제목) |+ 표제목 <th>표제목</th>
제목 ! 제목 <th>제목</th>
한줄 추가 |-
| 내용		 <tr><td>내용</td></tr>
또한줄 추가 |-
| 내용		 <tr><td>내용</td></tr>
한셀 추가 | 내용 [1]
|| 내용 [2]		 <td>내용</td>
표 끝 |} </table>
  • 표시작과 끝부분에서는 새로운 줄에서 시작해야 한다.
  • 가로로 한칸(열)을 추가하려면 캡션부분(!) 맨 뒤에 !!를 넣은후 내용을 입력한다. 그러고 다음줄이 있으면 그줄 맨뒤에도 ||를 입력하고 내용을 추가한다.

태그에서는 </td> 다음에 <td>내용</td>를 추가하면 된다.

표의 속성

캡션

테이블에 시작부분 맨앞에 '''|+'''를 입력한후 내용을 입력하면, 제목을 넣을 수 있다. 

{| class="wikitable"
|+ 표 제목입니다.
|-
! 표 제목 !! 표 제목
|-
| 예시 || 예시
|}
보여지는 결과
표 제목입니다.
표 제목 표 제목
예시 예시


표 정렬

표 정렬과 관련된 틀은 틀:표정렬 문서를 참고하십시오.

표정렬은 기본값인 left, right와 center가 있다.

  • 기본 정렬(왼쪽)
{| class="wikitable"
|-
! 표 제목 !! 표 제목
|-
| 예시 || 예시
|-
| 예시 || 예시
|}
보여지는 결과
표 제목 표 제목
예시 예시
예시 예시
  • 가운데 정렬
{| class="wikitable" style="margin:0 auto;"
|-
! 표 제목 !! 표 제목
|-
| 예시 || 예시
|-
| 예시 || 예시
|}
보여지는 결과
표 제목 표 제목
예시 예시
예시 예시
  • 오른쪽 정렬
{| class="wikitable" align="right"
|-
! 표 제목 !! 표 제목
|-
| 예시 || 예시
|-
| 예시 || 예시
|}
보여지는 결과
표 제목 표 제목
예시 예시
예시 예시


  • 헤더부분의 align = right는 style 속성설정에서 float:right와 같은 효과가 있으니 때에 따라 편리한것을 사용한다.
  • 표(데이블)나 그림을 문서에 넣다보면 문서정렬 문제로 흐트러지는 경우가 있는데 틀 "{{-}}"를 넣으면 표 아랫줄에 문서가 나타나게 된다.
  • 특정 항목안에 표를 넣거나 * 문자로 항목을 나열할 경우 인식이 안되는 경우가 있다. 그럴경우 다음과 같이 하면 오류가 해결이 된다.
1. 입력항목의 "경력=" 옆으로 빈 태그 <nowiki></nowiki>를 넣고 다음줄 부터 입력한다.
|이름 = 홍길동
|경력 = <nowiki></nowiki>
* 경력1
* 경력2
* ...
  • 항목에 따라서 테이블이 인식이 안되는 경우가 있다. 그럴 때 {| 대신 table 태그를 이용하면 오류가 해결되는 경우도 있다.


속성값 지정 위치

표속성 위치.png

표 속성은 그림과 같이 3가지 수준에서 지정할 수 있다.

  1. 표 전체에 지정할 수 있다. style=" ... " 형식으로 class 뒤로 넣는다.
  2. 한줄에 지정할 수 있다. |- 뒤에 style= "..." 형식으로 지정한다.
  3. 한칸에 지정할 수 있다. || 다음에 style="..." 형식으로 지정하며 기호 |를 넣어서 내용과 구분을 짓는다.

그러나 여러가지 코드 속성과 다른 틀과 함께 사용하다 보면 원하는 값이 나오지 않는 경우가 발생한다. 이렇때는 (3)번의 셀에 직접 적용하면 효과를 확인할 수 있다.

그 원인은 오타가 원인이거나, 문법이 틀린 경우이다. 그러므로 수정시에는 수시로 미리보기버튼으로 확인하며 작업하는 것을 추천한다.


참고로 태그를 사용할 경우에는 <table style="">, <th style="">, <tr style="">, <td style="">와 같이 스타일 속성을 지정할 수 있다.


자주 사용하는 속성

표를 사용하거나 문서를 검색하다 보면 자주 사용하는 표의 속성값들이 보인다. 

colspan = "2"
rowspan = "2"
width = "100%" (혹은 style 내에서 width:100%;)
style = "text-align: right; background: blue; font-size: 9pt; "
  • style = 지정시 한쌍의 겹따옴표 " "사이에 지정해야 하며, 속성과 속성지정사이에 ; (세미콜론)이 반드시 들어간다.
  • 참고로 스타일 관련된 지정을 도와주는 틀은 {{st}}, {{스타일}}이 있다.
  • 참고: 위키문법/태그 목록


표정렬 기능 넣기

  • 표에 정렬기능을 넣으려면 class="sortable" 와 같이 class에 넣으면 된다.
입력한 내용
{| class="wikitable sortable" 
|-
! 번호 !! 나라명 !! 면적 순위 !! 국방력
|-  
| 1 || 한국 || 3위 || 3위
|- 
| 2 || 러시아 || 1위 || 2위
|-
| 3 || 싱가포르 || 4위 || 4위
|-
| 4 || 미국 || 2위 || 1위
|}
보여지는 결과
1 나라명 면적 순위
2 미국 2위
3 러시아 1위
4 싱가포르 4위
5 한국 3위

태이블을 정확히 반으로 나누기

태이블을 정확히 반으로 나누기를 하려면 colspan의 값에 최소공배수인 12를 입력하여 나타낼 수 있는데 아래와 같이 나타난다. 스타일로 넓이 설정을 해도 마찬가지다.

입력한 내용
코드 
{|class="wikitable" style="text-align: center; width: 100%; "
|-
|colspan="12"|1
|-
|colspan="6"| 1
|colspan="6"| 2
|-
|colspan="4"| 1
|colspan="4"| 2
|colspan="4"| 3
|-
|colspan="3"| 1
|colspan="3"| 2
|colspan="3"| 3
|colspan="3"| 4
|}
나타나는 결과
1
1 2
1 2 3
1 2 3 4

다음과 같이 스타일에  table-layout: fixed; 를 넣으면 정확히 반으로 나뉘는 것을 확인할 수 있다.

입력한 내용
코드 
{|class="wikitable" style="text-align: center; width: 100%; table-layout: fixed; "
|-
|colspan="12"|1
|-
|colspan="6" {{st|w=50%}}| 1
|colspan="6"| 2
|-
|colspan="4" {{st|w=30%}}| 1
|colspan="4" {{st|w=30%}}| 2
|colspan="4"| 3
|-
|colspan="3"| 1
|colspan="3"| 2
|colspan="3"| 3
|colspan="3"| 4
|}
나타나는 결과
1
1 2
1 2 3
1 2 3 4

표 접기버튼

  • 펼친상태 - 캡션에 접기버튼 달기
입력 내용
{| class="mw-collapsible wikitable" style="width: 50%;"
|+ 제목줄
|-
! scope="col" | 헤더 1 내용
! scope="col" | 헤더 2 내용
|-
| 내용 1을 기술합니다.
| 내용 2을 기술합니다.
|}
보여지는 결과
제목줄
헤더 1 내용 헤더 2 내용
내용 1을 기술합니다. 내용 2을 기술합니다.


  • 접힌 상태
입력 내용
{| class="mw-collapsible wikitable" style="width: 50%;"
|+ 제목줄
|-
! scope="col" | 헤더 1 내용
! scope="col" | 헤더 2 내용
|-
| 내용 1을 기술합니다.
| 내용 2을 기술합니다.
|}
보여지는 결과
제목줄
헤더 1 내용 헤더 2 내용
내용 1을 기술합니다. 내용 2을 기술합니다.


표 안에 접기버튼 달기

  • 펼힌 상태
입력 내용
{| class="mw-collapsible  wikitable" style="width: 50%;"
! 헤더1 || 헤더2 || 헤더3
|+
|-
| 내용 || 내용 || 내용
|-
| 내용 || 내용 || 내용
|}
보여지는 결과
헤더1 헤더2 헤더3
내용 내용 내용
내용 내용 내용


  • 접힌 상태
입력 내용
{| class="mw-collapsible mw-collapsed wikitable" style="width: 50%;"
! 헤더1 || 헤더2 || 헤더3
|-
| 내용 || 내용 || 내용
|-
| 내용 || 내용 || 내용
|}
보여지는 결과
헤더1 헤더2 헤더3
내용 내용 내용
내용 내용 내용


접기버튼 사용 예

  • 다음은 접기상태의 미국 역대대통령 목록이다.
입력 내용
{| class="mw-collapsible mw-collapsed wikitable" style="width: 100%;"
|-
|colspan=5 style="color:green;background-color:#F0FFF0" align=center width=99% | 미국 역대 대통령
|-
! 역대 !! 취임연도 !! 이름 !! 영어 이름 !! 정당
|-
|| 제 4대 || 1809년 3월 4일 ~ 1817년 3월 4일 || [[제임스 매디슨]] || James Madison, Jr. || [[민주공화당]]
|-
| 제 5대 || 1817년 3월 4일 ~ 1825년 3월 4일 || [[제임스 먼로]]|| James Monroe || [[민주공화당]]
|}
보여지는 결과
미국 역대 대통령
역대 취임연도 이름 영어 이름 정당
제 4대 1809년 3월 4일 ~ 1817년 3월 4일 제임스 매디슨 James Madison, Jr. 민주공화당
제 5대 1817년 3월 4일 ~ 1825년 3월 4일 제임스 먼로 James Monroe 민주공화당

틀을 활용한 사용 예

입력 내용
{{접기}}
{| class="wikitable" {{st|w=100%}}
|-
| colspan=5 {{st |@ |c=green |b=#F0FFF0 |a=center |w=99%}} | 미국 역대 대통령
|-
! 역대 !! 취임연도 !! 이름 !! 영어 이름 !! 정당
|-
|| 제 4대 || 1809년 3월 4일 ~ 1817년 3월 4일 || [[제임스 매디슨]] || James Madison, Jr. || [[민주공화당]]
|-
| 제 5대 || 1817년 3월 4일 ~ 1825년 3월 4일 || [[제임스 먼로]]|| James Monroe || [[민주공화당]]
|}
{{접기 끝}}
보여지는 결과
접기·펼치기를 눌러 주세요.
미국 역대 대통령
역대 취임연도 이름 영어 이름 정당
제 4대 1809년 3월 4일 ~ 1817년 3월 4일 제임스 매디슨 James Madison, Jr. 민주공화당
제 5대 1817년 3월 4일 ~ 1825년 3월 4일 제임스 먼로 James Monroe 민주공화당


관련 문서


각주

  1. ↑ 새로운 줄에서는 한개
  2. ↑ 혹은 앞칸 내용 뒤에는 두개