2023년 3월 27일 (월) 17:06 판
웹에서 표를 만들 때는 주로 HTML 태그 <table>이 사용됩니다. 하지만 제이위키에서는 <table>뿐 아니라 간략한 방법으로 보다 편리하게 표를 만들 수 있습니다. 여기서는 <table> 태그에 대해서는 생략하고, 간단한 문법을 통해 표를 만드는 방법에 대해 안내하겠습니다.
HTML 숙련자들은 <table>을 사용해도 되지만, 가급적이면 태그에 익숙하지 않은 다른 편집자들을 위해 간략화된 문법을 사용해 봅시다.
인터페이스
다음은 기본적인 명령어입니다. 각 줄의 첫머리에서만 사용해야 합니다.
명령어
|
의미하는 태그
|
설명
|
{|
|
<table>
|
표 시작하기.
|
|}
|
</table>
|
표 끝내기.
|
|+
|
<caption></caption>
|
표 제목 넣기. {| 다음 줄에 사용해야 합니다.
|
|-
|
<tr></tr>
|
새 줄 만들기.
|
|
|
<td></td>
|
새 칸 만들기.
|
||
|
<td></td>
|
여러 개의 새 칸을 한 줄에 붙여서 쓰기.
|
!
|
<th></th>
|
머리말 칸 만들기.
|
또, HTML 문법을 사용해서 colspan, rowspan, style 등의 옵션을 넣을 수 있습니다. 본 위키에서는 지정된 설정 이외의 글자색이나 글자크기, 효과 등을 사용하는 것을 권장하지 않으므로, 다음에는 사용자가 자유롭게 설정할 수 있는 부분에 대해서만 설명하겠습니다.
다음은 옵션을 넣는 방법입니다. 위의 기본 명령어 바로 다음에 입력합니다.
명령어
|
설명
|
style="width:100px;"
|
줄, 칸 혹은 표 전체의 가로 너비를 지정합니다. px 대신 50%처럼 비율을 넣을 수도 있습니다.
|
style="text-align:left;"
|
글자 왼쪽 정렬. left 대신 center(가운데), right(오른쪽) 정렬을 쓸 수 있습니다.
|
colspan="2"
|
가로 2칸을 합칩니다. 입력하는 숫자에 따라 칸의 갯수도 변합니다.
|
rowspan="2"
|
세로 2줄을 합칩니다. 입력하는 숫자에 따라 칸의 갯수도 변합니다.
|
기본 표 디자인
wikitable은 표를 통일성 있게 관리하기 위해 미리 디자인된 서식입니다. 문서에 표를 삽입해야 할 때는 표 첫째 줄에 class="wikitable"
을 사용해 보세요.
문법 |
결과
|
{|class="wikitable"
|+표 제목
|-
!style="width:40%"|A
!style="width:60%"|B
|-
|A1
|B1
|-
|colspan="2"|''C''
|}
|
|
칸 내에서의 개행은 한 줄 개행일 경우 일반적인 개행법과 똑같이 <br>을 사용하면 되지만, 두 줄 개행은 ↵ Enter 두 번으로 작동하지 않습니다. 이때 <br>을 두 번 사용하는 것보다 {{brbr}}을 사용할 것을 권장합니다. 개행을 할 곳에 해당 틀을 입력하면 됩니다. <br>을 두 번 사용하면 일반적인 ↵ Enter 두 번 개행보다 행간이 더 넓어지기 때문입니다.
문법 |
결과
|
{|class="wikitable"
|-
|한 줄을<br>개행하려면<br>br로
|-
|두 줄은{{brbr}}틀로
|}
|
|
표 안에서 목록이나 가로줄 등 한 줄의 첫 머리에 작성해야만 하는 문법을 쓸 때는 단순히 엔터를 눌러 새 줄을 만들어 주면 됩니다.
문법 |
결과
|
{|class="wikitable"
|-
|
* 목록은
* 이렇게
|-
|
----
가로줄은 이렇게
|}
|
|
정석적인 문법에서는 보이는 각 칸마다 편집창에서는 한 줄을 차지하게 됩니다. 그러나 파이프 문자를 한 줄에 두 번씩 사용하여 가로로 여러 개가 있는 칸들 한 줄을 편집창에서도 한 줄로 보이게 할 수 있습니다.
정석 문법
|
여러 칸이 |
한 줄에 |
작성될 수 |
있습니다
|
칸의 성격은 |
첫 머리에 |
느낌표나 |
파이프 문자가
|
오느냐에 따라 |
전부 |
정해집니다 |
|
하지만 |
병합을 하려면
|
따로 써야 하죠
|
|
{|class="wikitable" style="text-align: center;"
|-
|여러 칸이
|한 줄에
|작성될 수
|있습니다
|-
!칸의 성격은
!첫 머리에
!느낌표나
!파이프 문자가
|-
|오느냐에 따라
|전부
|정해집니다
|
|-
|하지만
|병합을 하려면
|colspan="2"|따로 써야 하죠
|}
|
가능한 문법
|
{|class="wikitable" style="text-align: center;"
|-
|여러 칸이||한 줄에||작성될 수||있습니다
|-
!칸의 성격은||첫 머리에||느낌표나||파이프 문자가
|-
|오느냐에 따라||전부||정해집니다||
|-
|하지만||병합을 하려면
|colspan="2"|따로 써야 하죠
|}
|
칸 합치기
표의 칸이 여러 개일 때, 가로나 세로로 원하는 개수만큼 합칠 수 있습니다. 이를 "병합한다"고 합니다.
가로로 병합할 때는 colspan 태그를, 세로로 병합할 때는 rowspan 태그를 사용합니다.
문법 |
결과
|
{|class="wikitable"
|-
|여긴
|세 칸
|이지만
|-
|colspan="2"|합쳤으니
|두 칸입니다
|}
|
|
병합 태그를 사용한 곳부터 오른쪽 혹은 아래쪽으로 입력한 숫자만큼 합쳐지는 것입니다. 칸이 합쳐지면 그만큼 칸의 총 개수가 줄어들기 때문에, 합친 칸의 수만큼 적절히 칸을 분배하는 것이 중요합니다.
예시로 바로 위의 예제를 보면, 윗줄은 3칸이지만 아랫줄은 2칸을 하나로 합쳤기 때문에 2칸짜리+1칸을 합쳐 총 2개만이 작성되었습니다.
칸의 개수가 서로 다를 때 너비가 같도록 하기
위에서부터 아래로 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] 테이블의 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"|四
|}
|
|
혹은 표 안에 새로운 표를 여백 없이 들어차게 하는 {{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%;"|四
|}
|
|
class를 이용한 특수한 표
오름차순, 내림차순 정렬이 가능한 표
class="sortable" 는 표의 항목을 가나다순, 012순 등으로 정렬할 수 있게 해 줍니다. 단, colspan이나 rowspan처럼 칸을 합치는 명령어가 도중에 끼어 있으면 작동하지 않습니다.
|
{| 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일
|
|
접고 펼 수 있는 표
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일
|
|
각주
- ↑ max-width나 min-width 등의 가변 너비도 안 됩니다. 반드시 width로 정확하게 해야 합니다.