드조위키

드조위키:표

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

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

1 기본 명령어

명령어 의미하는 태그 설명
기본 명령어입니다. 각 줄의 첫머리에서만 사용해야 합니다.
{| <table> 표 시작하기.
|} </table> 표 끝내기.
|+ <caption></caption> 표 제목 넣기. {| 다음 줄에 사용해야 합니다.
|- <tr></tr> 새 줄 만들기.
| <td></td> 새 칸 만들기.
|| <td></td> 여러 개의 새 칸을 한 줄에 붙여서 쓰기.
! <th></th> 머리말 칸 만들기.

또, HTML 문법을 사용해서 class, id, style 등의 옵션을 넣을 수 있습니다. 다만 class 등은 관리자가 css를 편집해 속성을 지정해야 하므로, 사용자는 평소에 style이나 colspan, rowspan 등을 주로 사용하게 됩니다. 본 위키에서는 지정된 설정 이외의 글자색이나 글자크기, 효과 등을 사용하는 것을 권장하지 않으므로, 다음에는 사용자가 자유롭게 설정할 수 있는 부분에 대해서만 설명하겠습니다.

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

2 예제

2.1 기본 표 디자인

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

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

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

class="sortable"는 표의 항목을 가나다순, 012순 등으로 정렬할 수 있게 해 줍니다. 단, colspan이나 rowspan처럼 칸을 합치는 명령어가 도중에 끼어 있으면 작동하지 않습니다.

{| class="wikitable sortable" style="width:100%"
|+ 시청률
|-
! class="unsortable" style="width:40%"| 날짜
! style="width:30%"| 전국
! style="width:30%"| 수도권
|-
! 2013년 2월 4일
| 12.1%
| 14.1%
|-
! 2013년 2월 5일
| 14.0%
| 15.5%
|-
! 2013년 2월 11일
| 16.0%
| 17.7%
|-
! 2013년 2월 12일
| 16.8%
| 14.3%
|}
시청률
날짜 전국 수도권
2013년 2월 4일 12.1% 14.1%
2013년 2월 5일 14.0% 15.5%
2013년 2월 11일 16.0% 17.7%
2013년 2월 12일 16.8% 14.3%

2.3 접기 가능한 표

class="collapsible collapsed"는 스크롤이 너무 긴 표를 접고 펼 수 있게 해 줍니다. 접기를 위해 맨 위에는 colspan을 사용해 1칸짜리 줄을 생성해야 합니다.

  • collapsible : 접고 펴기가 가능한 표로 만드는 코드.
  • collapsed : 처음부터 접혀진 상태로 보이게 하는 코드.
{| class="wikitable collapsible collapsed" style="width:100%;"
! colspan="2"| 표 제목
|-
! style="width:40%"| A
! style="width:60%"| B
|-
| A1
| B1
|-
| colspan="2"| ''C''
|}