미디어위키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 
|}

같이 보기

편집
  NODES