기본적인 코드는 다음과 같습니다.
- 전체 표는 "
{|
표 옵션 "으로 시작해서 "|}
"로 끝납니다.
- "
{|
" 다음에 "|+
제목 "으로 시작하는 줄을 넣어 표 제목을 달 수도 있습니다.
- 표의 행은 "
|-
표 옵션 "으로 시작합니다.
- 표의 칸 은 "
|
값 " 또는 "|
칸 옵션 |
값 " 식으로 넣습니다. 여러 칸을 연속해서 쓰려면 칸과 칸 사이에 ||
를 쓰면 됩니다.
- 표의 머리글 칸은 "
|
" 대신 "!
"을 사용하여 구분합니다.
표의 속성과 각 칸의 속성은 HTML 문법과 동일합니다. class, id, style 등의 속성을 줄 수 있습니다. 속성을 넣지 않으면 테두리가 투명으로 나타납니다.
- 표의 시작 부분에서 클래스(class)로 위키테이블(wikitable) 을 지정하면(→
{| class="wikitable"
), 가장 기본적인 스타일의 표를 만들 수 있습니다.
다음 표는 테두리와 행간이 없지만 가장 간단한 위키 마크업 표의 구조를 보여줍니다.
Orange
|
Apple
|
Bread
|
Pie
|
Butter
|
Ice cream
|
|
{|
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
더 많은 표의 모양을 위해 위키 마크업 셀은 ||
에 의해 구분된 하나의 줄 위에 열거될 수 있습니다.이 방법은 패러그래프처럼 내용이 긴 셀에서는 크기가 충분하지 않습니다. 그러나 지금 예시용 표와 같이 내용이 짧은 글에서는 유용합니다.
위키 마크업을 더욱 보기 좋게 만들기 위해서 위키 마크업 아랫쪽에 했었던 것처럼 위키 마크업에서는 셀 안에 임시의 공간을 추가할 수 있습니다. 하지만 실제 표의 표현에는 영향을 주지 않습니다.
지금 페이지의 다른 표의 예에 따르면 HTML 속성을 이 표에 추가할 수 있습니다. 하지만 간단함의 예를 따르는 것은 무시되었습니다.
Orange |
Apple |
more
|
Bread |
Pie |
more
|
Butter |
Ice cream |
and more
|
|
{|
| Orange || Apple || more
|-
| Bread || Pie || more
|-
| Butter || Ice cream || and more
|}
|
HTML 속성들과 함께 사용편집
표를 더 좋게 보이게 만들기 위해서 HTML 속성들을 추가할 수 있습니다
border="1"편집
Orange
|
Apple
|
Bread
|
Pie
|
Butter
|
Ice cream
|
|
{| border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
align="center" border="1"편집
Orange
|
Apple
|
Bread
|
Pie
|
Butter
|
Ice cream
|
|
{| align="center" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
align="right" border="1"편집
각각의 셀마다 속성을 줄 수 있습니다. 예를들면 숫자는 오른쪽 정렬이 보기에 좋습니다.
Orange
|
Apple
|
12,333.00
|
Bread
|
Pie
|
500.00
|
Butter
|
Ice cream
|
1.00
|
|
{| border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Pie
|align="right"|500.00
|-
|Butter
|Ice cream
|align="right"|1.00
|}
|
또한, 각각의 줄마다 속성을 줄 수 있습니다.
Orange
|
Apple
|
12,333.00
|
Bread
|
Pie
|
500.00
|
Butter
|
Ice cream
|
1.00
|
|
{| border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Pie
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Ice cream
|align="right"|1.00
|}
|
cellspacing="0" border="1"편집
Orange
|
Apple
|
Bread
|
Pie
|
Butter
|
Ice cream
|
|
{| cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
cellpadding="20" cellspacing="0" border="1"편집
Orange
|
Apple
|
Bread
|
Pie
|
Butter
|
Ice cream
|
|
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
HTML 속성들과 함께 사용하기와 CSS 스타일편집
CSS 스타일 속성들은 다른 HTML 속성들과 함께 또는 HTML 속성들 없이 추가될 수 있습니다
style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"편집
Orange
|
Apple
|
Bread
|
Pie
|
Butter
|
Ice cream
|
|
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
표 캡션은 아래와 같이 어떤 표의 최상단에 추가될 수 있습니다
Food complements
Orange
|
Apple
|
Bread
|
Pie
|
Butter
|
Ice cream
|
|
{| border="1" cellpadding="20" cellspacing="0"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
align 같은 속성들도 아래와 같이 캡션에 적용될 수 있습니다
Food complements
Orange
|
Apple
|
Bread
|
Pie
|
Butter
|
Ice cream
|
|
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Food complements''
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|