FANDOM


다음은 표에 관한 위키 문법 예제입니다.

위키 문법 예제편집

기본적인 표 코드편집

설명 입력
표 시작
(<table> 코드와 동일)
{|
세로줄 시작
(<tr> 코드와 동일)
|-
표 헤더 (<th> 코드와 동일) ! 혹은 !!
표 셀/칸 (<td> 코드와 동일) | 혹은 ||
표 종료
(</table> 코드와 동일)
|}
세로줄 (</tr>), 헤더 (</th>), 셀/칸 (</td>) 등의 닫기용 HTML 코드는 자동으로 생성됩니다.

기본적인 표편집

설명 입력 결과
테두리가 있는 셀 1칸짜리 표 {| border="1"

|-
| 세로줄 1, <br/>셀/가로줄 1
|}

세로줄 1,
셀/가로줄 1
왼쪽이 헤더인 셀 2칸짜리 표 {| border="1"

|-
! 세로줄 1, <br/>헤더 1/가로줄 1
| 세로줄 1, <br/>셀 1/가로줄 2
|}

세로줄 1,
헤더 1/가로줄 1
세로줄 1,
셀 1/가로줄 2
3 x 3 표 {| border="1"

|-
| 세로줄 1, <br/>셀/가로줄 1
| 세로줄 1, <br/>셀/가로줄 2
| 세로줄 1, <br/>셀/가로줄 3
|-
| 세로줄 2, <br/>셀/가로줄 1
| 세로줄 2, <br/>셀/가로줄 2
| 세로줄 2, <br/>셀/가로줄 3
|-
| 세로줄 3, <br/>셀/가로줄 1
| 세로줄 3, <br/>셀/가로줄 2
| 세로줄 3, <br/>셀/가로줄 3
|}

세로줄 1,
셀/가로줄 1
세로줄 1,
셀/가로줄 2
세로줄 1,
셀/가로줄 3
세로줄 2,
셀/가로줄 1
세로줄 2,
셀/가로줄 2
세로줄 2,
셀/가로줄 3
세로줄 3,
셀/가로줄 1
세로줄 3,
셀/가로줄 2
세로줄 3,
셀/가로줄 3
가로 길이가 90%인 2 x 2 표 {| width="90%"

|-
| 세로줄 1, <br/>셀/가로줄 1
| 세로줄 1, <br/>셀/가로줄 2
|-
| 세로줄 2, <br/>셀/가로줄 1
| 세로줄 2, <br/>셀/가로줄 2
|}

예제를 위해 임시적으로 테두리를 추가했습니다.
세로줄 1,
셀/가로줄 1
세로줄 1,
셀/가로줄 2
세로줄 2,
셀/가로줄 1
세로줄 2,
셀/가로줄 2
내용과 표 사이의 공간(Cell padding)이 8px인 표 {| cellpadding="8px"

|-
| 세로줄 1, <br/>셀/가로줄 1
| 세로줄 1, <br/>셀/가로줄 2
|-
| 세로줄 2, <br/>셀/가로줄 1
| 세로줄 2, <br/>셀/가로줄 2
|}

예제를 위해 임시적으로 테두리를 추가했습니다.
세로줄 1,
셀/가로줄 1
세로줄 1,
셀/가로줄 2
세로줄 2,
셀/가로줄 1
세로줄 2,
셀/가로줄 2
각 셀 사이의 공간(Cell spacing)이 8px인 표 {| cellspacing="8px"

|-
| 세로줄 1, <br/>셀/가로줄 1
| 세로줄 1, <br/>셀/가로줄 2
|-
| 세로줄 2, <br/>셀/가로줄 1
| 세로줄 2, <br/>셀/가로줄 2
|}

예제를 위해 임시적으로 테두리를 추가했습니다.
세로줄 1,
셀/가로줄 1
세로줄 1,
셀/가로줄 2
세로줄 2,
셀/가로줄 1
세로줄 2,
셀/가로줄 2

셀/칸 합치기편집

설명 입력 결과
가로로 셀 2개를 합친 헤더 하나 {|

|-
! colspan="2" | 셀 2개 크기의 헤더
|-
| 세로줄 1, <br/>셀/가로줄 1
| 세로줄 1, <br/>셀/가로줄 2
|-
| 세로줄 2, <br/>셀/가로줄 1
| 세로줄 2, <br/>셀/가로줄 2
|}

예제를 위해 임시적으로 색깔을 추가했습니다.
셀 2개 크기의 헤더
세로줄 1,
셀/가로줄 1
세로줄 1,
셀/가로줄 2
세로줄 2,
셀/가로줄 1
세로줄 2,
셀/가로줄 2
가로로 셀 2개를 합친 셀 하나 {|

|-
| 세로줄 1, <br/>셀/가로줄 1
| 세로줄 1, <br/>셀/가로줄 2
|-
| colspan="2" | 세로줄 2, <br/>셀/가로줄 1 & 2
|}

예제를 위해 임시적으로 색깔을 추가했습니다.
세로줄 1,
셀/가로줄 1
세로줄 1,
셀/가로줄 2
세로줄 2,
셀/가로줄 1 & 2
세로로 셀 2개를 합친 셀 하나 {|

|-
| 세로줄 1, <br/>셀 1/가로줄 1
| rowspan="2" | 세로줄 1 & 2, <br/>셀 2
|-
| 세로줄 2, <br/>셀 3/가로줄 1
|}

예제를 위해 임시적으로 색깔을 추가했습니다.
세로줄 1,
셀 1/가로줄 1
세로줄 1 & 2,
셀 2
세로줄 2,
셀 3/가로줄 1

정렬편집

설명 입력 결과
다양한 정렬 특성을 가진 2 x 2 표 {| width="100%"

|- valign="top"
! align="right" | 세로줄 1, <br/>헤더 1, <br/>가로줄 1
| align="center" | 세로줄 1, <br/>셀 1/가로줄 2
|- valign="bottom"
! 세로줄 2, <br/>헤더 2, <br/>가로줄 1
| 세로줄 2, <br/>셀 2/가로줄 2
|}

예제를 위해 임시적으로 색깔을 추가했습니다.
세로줄 1,
헤더 1,
가로줄 1
세로줄 1,
셀 1/가로줄 2
세로줄 2,
헤더 2,
가로줄 1
세로줄 2,
셀 2/가로줄 2

표 이름편집

설명 입력 결과
설명이 붙은 2 x 2 표 {| width="100%"

|-
|+ Caption
! 세로줄 1, <br/>헤더 1, <br/>가로줄 1
| 세로줄 1, <br/>셀 1/<br/>가로줄 2
|-
! 세로줄 2, <br/>헤더 2, <br/>가로줄 1
| 세로줄 2, <br/>셀 2/<br/>가로줄 2
|}

Caption
세로줄 1,
헤더 1,
가로줄 1
세로줄 1,
셀 1/
가로줄 2
세로줄 2,
헤더 2,
가로줄 1
세로줄 2,
셀 2/
가로줄 2

주요 CSS 스타일편집

설명 입력 결과
위키아 스타일이 적용된 2 x 2 표 {| class="article-table"

|-
! 세로줄 1, <br/>헤더 1/가로줄 1
! 세로줄 1, <br/>헤더 2/가로줄 2
|-
| 세로줄 2, <br/>셀/가로줄 1
| 세로줄 2, <br/>셀/가로줄 2
|}

세로줄 1,
헤더 1/가로줄 1
세로줄 1,
헤더 2/가로줄 2
세로줄 2,
셀/가로줄 1
세로줄 2,
셀/가로줄 2
CSS 코드 "background-color"를 이용한 표 {| style="background-color:yellow;"

|-
| 세로줄 1, <br/>셀/가로줄 1
| 세로줄 1, <br/>셀/가로줄 2
|-
| 세로줄 2, <br/>셀/가로줄 1
| 세로줄 2, <br/>셀/가로줄 2
|}

세로줄 1,
셀/가로줄 1
세로줄 1,
셀/가로줄 2
세로줄 2,
셀/가로줄 1
세로줄 2,
셀/가로줄 2
다양한 CSS 스타일이 적용된 2 x 2 표 {| style="border:3px inset gray; font-size:80%; width:90%;"

|-
! style="background-color:blue; color:pink; padding-left:1em; width:60%;" | 세로줄 1, <br/>헤더 1/가로줄 1
| style="text-decoration:line-through;" | 세로줄 1, <br/>셀/가로줄 2
|-
! style="text-align:right;" | 세로줄 2, <br/>헤더 2/가로줄 1
| style="border:1px dotted red;" | 세로줄 2, <br/>셀/가로줄 2
|}

세로줄 1,
헤더 1/가로줄 1
세로줄 1,
셀/가로줄 2
세로줄 2,
헤더 2/가로줄 1
세로줄 2,
셀/가로줄 2

함께 보기편집

도움 및 문의편집