주 메뉴 열기

미디어위키HTML이나 XHTML의 table을 쓸 수도 있지만 보다 편하게 표를 만들 수 있는 방법을 제공합니다.

본 내용이 어려우신 분이나 급하신 분께서는 간단한 표 생성기를 이용해 주세요.

만드는 법편집

기본적인 코드는 다음과 같습니다.

  • 전체 표는 "{| 표 옵션 "으로 시작해서 "|}"로 끝납니다.
  • "{|" 다음에 "|+ 제목 "으로 시작하는 줄을 넣어 표 제목을 달 수도 있습니다.
  • 표의 은 "|- 표 옵션 "으로 시작합니다.
  • 표의 은 "| " 또는 "| 칸 옵션 | " 식으로 넣습니다. 여러 칸을 연속해서 쓰려면 칸과 칸 사이에 ||를 쓰면 됩니다.
  • 표의 머리글 칸은 "|" 대신 "!"을 사용하여 구분합니다.

표의 속성과 각 칸의 속성은 HTML 문법과 동일합니다. class, id, style 등의 속성을 줄 수 있습니다. 속성을 넣지 않으면 테두리가 투명으로 나타납니다.

  • 표의 시작 부분에서 클래스(class)로 위키테이블(wikitable) 을 지정하면(→ {| class="wikitable"), 가장 기본적인 스타일의 표를 만들 수 있습니다.

편집

코드 실제
{| cellpadding="0" cellspacing="0" border="1" width="100%"

|-
| 1, 1
| 2, 1
|-
| 1, 2
| 2, 2
|}
1, 1 2, 1
1, 2 2, 2
{| cellpadding="20" cellspacing="0" border="1" width="100%"
|-
| 1, 1 || 2, 1
|-
| 1, 2 || 2, 2
|}
1, 1 2, 1
1, 2 2, 2
{| cellpadding="10" cellspacing="0" border="1" width="100%"
|+곱셈 표
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
곱셈 표
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

colspan, rowspan 속성을 사용하면 복잡한 모양의 표를 만들 수 있습니다.

{| cellpadding="10" cellspacing="0" border="1" width="100%"
|-
! Column 1 || Column 2 || Column 3
|-
| rowspan="2" | A
| colspan="2" | B
|-
| C
| D
|-
| E
| colspan="2" | F
|- 
| rowspan="3" | G
| H
| I
|- 
| J
| K
|-
| colspan="2" | L
|}
Column 1 Column 2 Column 3
A B
C D
E F
G H I
J K
L

위키 표(table) 마크업 개요편집

{| 시작
|+ 제목, 선택가능; 표 시작과 첫 번째 줄 사이에서 한 개의 표당 한 개
|- 표 줄, 첫 번째 줄에서 선택가능 -- 위키 엔진은 첫 번째 줄이 있다고 가정합니다.
! 표 머릿말 셀, 선택가능. 연속적인 표 머릿말은 이중 기호(!!)로 구분되어 같은 줄에 추가되거나 각각 고유한 단일 기호(!)로 새로운 줄에서 시작합니다.
| 표 정보 셀, 필수적! 연속적인 표 정보 셀들은 이중 기호(||)로 구분되어 같은 줄에 추가되거나 각각 고유한 단일 기호(|)로 새로운 줄에서 시작합니다.
|}
  • 위의 기호들은 같은 줄에서 연속적인 셀들을 선택적으로 추가하기 위한 이중 ||!!를 제외하고는 반드시 새로운 줄에서 시작하여야 합니다.
  • XHTML 속성. 표 끝을 제외하고 각각의 기호는 선택적으로 한 개 이상의 XHTML 속성을 수용합니다. 속성은 반드시 기호와 마찬가지로 같은 줄에 있어야 합니다. 각각의 속성은 한 번의 스페이스로 구분됩니다.
    • 셀과 제목 (| 또는 ||, ! 또는 !!, 그리고 |+)은 내용을 포함합니다. 단일 막대기호(|)로 내용에서 속성들을 구분합니다. 셀의 내용은 같은 줄에서나 다음 줄에서 이어질 것입니다.
    • 표와 줄 기호들 ({||-)은 직접적으로 내용을 포함하지 않습니다. 임의의 속성 뒤에 막대기호(|)를 추가하지 않습니다. 만약 표 기호나 줄 기호를 위한 속성 뒤에 막대기호를 잘못 추가한다면 파서는 잘못된 막대기호를 삭제할 것입니다. 그리고 만약 마지막 속성이 잘못된 막대기호를 사용한다면 삭제될 것입니다.
  • 내용은 (a) 몇 개의 선택가능한 XHTML 속성들 후에 같은 줄의 셀 기호 뒤에나 (b) 셀 기호 아랫쪽 줄에서 이어질 것입니다. 위키 마크업을 사용하여 목록, 제목, 표 채우기 등과 같이 새로운 줄에서 시작이 필요한 내용은 당연히 자신의 새로운 줄에서 해야만 합니다

간단한 표편집

평범편집

다음 표는 테두리와 행간이 없지만 가장 간단한 위키 마크업 표의 구조를 보여줍니다.

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 
|}