편집 요약 없음 |
편집 요약 없음 |
||
5번째 줄: | 5번째 줄: | ||
HTML 숙련자들은 <table>을 사용해도 되지만, 가급적이면 태그에 익숙하지 않은 다른 편집자들을 위해 간략화된 문법을 사용해 봅시다. | HTML 숙련자들은 <table>을 사용해도 되지만, 가급적이면 태그에 익숙하지 않은 다른 편집자들을 위해 간략화된 문법을 사용해 봅시다. | ||
==인터페이스== | == 인터페이스 == | ||
다음은 기본적인 명령어입니다. '''각 줄의 첫머리에서만 사용'''해야 합니다. | 다음은 기본적인 명령어입니다. '''각 줄의 첫머리에서만 사용'''해야 합니다. | ||
{| class="wikitable" style="width:100%" | {| class="wikitable" style="width:100%" | ||
63번째 줄: | 63번째 줄: | ||
|} | |} | ||
== 기본 표 디자인 == | |||
wikitable은 표를 통일성 있게 관리하기 위해 미리 디자인된 서식입니다. 문서에 표를 삽입해야 할 때는 표 첫째 줄에 <code>class="wikitable"</code>을 사용해 보세요. | |||
{|class="wikitable | |||
{|class="wikitable" | |||
|- | |- | ||
| | !문법||결과 | ||
|- | |- | ||
|style=" | |style="vertical-align: top;"|<pre> | ||
{| class="wikitable | {|class="wikitable" | ||
|+ 표 제목 | |+표 제목 | ||
|- | |- | ||
! style="width:40%"| A | !style="width:40%"|A | ||
! style="width:60%"| B | !style="width:60%"|B | ||
|- | |- | ||
| A1 | |A1 | ||
| B1 | |B1 | ||
|- | |- | ||
| colspan="2"| ''C'' | |colspan="2"|''C'' | ||
|} | |} | ||
</pre> | </pre> | ||
|style=" | |style="vertical-align: top;"| | ||
{| class="wikitable" style="width: | {|class="wikitable" | ||
| | |+표 제목 | ||
|- | |||
!style="width:40%"|A | |||
!style="width:60%"|B | |||
|- | |||
|A1 | |||
|B1 | |||
|- | |||
|colspan="2"|''C'' | |||
|} | |||
|} | |||
칸 내에서의 개행은 한 줄 개행일 경우 일반적인 개행법과 똑같이 <tt><nowiki><br></nowiki></tt>을 사용하면 되지만, 두 줄 개행은 {{키눌림|Enter}} 두 번으로 작동하지 않습니다. 이때 <tt><nowiki><br></nowiki></tt>을 두 번 사용하는 것보다 {{틀|brbr}}을 사용할 것을 권장합니다. 개행을 할 곳에 해당 틀을 입력하면 됩니다. <tt><nowiki><br></nowiki></tt>을 두 번 사용하면 일반적인 {{키눌림|Enter}} 두 번 개행보다 행간이 더 넓어지기 때문입니다. | |||
{|class="wikitable" | |||
|- | |||
!문법||결과 | |||
|- | |||
|<pre>{|class="wikitable" | |||
|- | |||
|한 줄을<br>개행하려면<br>br로 | |||
|- | |||
|두 줄은{{brbr}}틀로 | |||
|}</pre> | |||
| | |||
{|class="wikitable" | |||
|- | |||
|한 줄을<br>개행하려면<br>br로 | |||
|- | |||
|두 줄은{{brbr}}틀로 | |||
|} | |||
|} | |||
표 안에서 목록이나 가로줄 등 한 줄의 첫 머리에 작성해야만 하는 문법을 쓸 때는 단순히 엔터를 눌러 새 줄을 만들어 주면 됩니다. | |||
{|class="wikitable" | |||
|- | |||
!문법||결과 | |||
|- | |||
|<pre>{|class="wikitable" | |||
|- | |||
| | |||
* 목록은 | |||
* 이렇게 | |||
|- | |||
| | |||
---- | |||
가로줄은 이렇게 | |||
|}</pre> | |||
| | |||
{|class="wikitable" | |||
|- | |||
| | |||
* 목록은 | |||
* 이렇게 | |||
|- | |||
| | |||
---- | |||
가로줄은 이렇게 | |||
|} | |||
|} | |||
정석적인 문법에서는 보이는 각 칸마다 편집창에서는 한 줄을 차지하게 됩니다. 그러나 파이프 문자를 한 줄에 두 번씩 사용하여 가로로 여러 개가 있는 칸들 한 줄을 편집창에서도 한 줄로 보이게 할 수 있습니다. | |||
{|class="wikitable" | |||
|- | |||
!정석 문법 | |||
|rowspan="4"| | |||
{|class="wikitable" style="text-align: center;" | |||
|- | |||
|여러 칸이||한 줄에||작성될 수||있습니다 | |||
|- | |- | ||
! | !칸의 성격은||첫 머리에||느낌표나||파이프 문자가 | ||
|- | |- | ||
| | |오느냐에 따라||전부||정해집니다|| | ||
| | |||
|- | |- | ||
| colspan="2"| | |하지만||병합을 하려면 | ||
|colspan="2"|따로 써야 하죠 | |||
|} | |} | ||
|- | |||
|<pre>{|class="wikitable" style="text-align: center;" | |||
|- | |||
|여러 칸이 | |||
|한 줄에 | |||
|작성될 수 | |||
|있습니다 | |||
|- | |||
!칸의 성격은 | |||
!첫 머리에 | |||
!느낌표나 | |||
!파이프 문자가 | |||
|- | |||
|오느냐에 따라 | |||
|전부 | |||
|정해집니다 | |||
| | |||
|- | |||
|하지만 | |||
|병합을 하려면 | |||
|colspan="2"|따로 써야 하죠 | |||
|}</pre> | |||
|- | |||
!가능한 문법 | |||
|- | |||
|<pre>{|class="wikitable" style="text-align: center;" | |||
|- | |||
|여러 칸이||한 줄에||작성될 수||있습니다 | |||
|- | |||
!칸의 성격은||첫 머리에||느낌표나||파이프 문자가 | |||
|- | |||
|오느냐에 따라||전부||정해집니다|| | |||
|- | |||
|하지만||병합을 하려면 | |||
|colspan="2"|따로 써야 하죠 | |||
|}</pre> | |||
|} | |} | ||
===오름차순, 내림차순 정렬이 가능한 표=== | == class를 이용한 특수한 표 == | ||
=== 오름차순, 내림차순 정렬이 가능한 표 === | |||
{|class="wikitable" style="width: 100%; border: none; table-layout: fixed;" | {|class="wikitable" style="width: 100%; border: none; table-layout: fixed;" | ||
|- | |- | ||
154번째 줄: | 261번째 줄: | ||
|} | |} | ||
===접고 펼 수 있는 표=== | === 접고 펼 수 있는 표 === | ||
{|class="wikitable" style="width: 100%; border: none; table-layout: fixed;" | {|class="wikitable" style="width: 100%; border: none; table-layout: fixed;" | ||
|- | |- |
2023년 3월 23일 (목) 20:03 판
이 문서는 제이위키 초보자를 위한 문서로, 훌륭한 기여자 분들의 기여를 언제나 기다립니다.
웹에서 표를 만들 때는 주로 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"|따로 써야 하죠 |} |
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일 |} |
|
접고 펼 수 있는 표
class="mw-collapsible mw-collapsed" 는 스크롤이 너무 긴 표를 접고 펼 수 있게 해 줍니다. 접기를 위해 맨 위에는 colspan을 사용해 1칸짜리 줄을 생성해야 합니다.
| ||||||||||||||||||||
{| 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일 |} |
|