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

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

만드는 법

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

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

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

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

코드 실제
{| 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  |} 

Tags:

표 만드는 법표 위키 (table) 마크업 개요표 간단한 표 캡션HTMLXHTML미디어위키

🔥 Trending searches on Wiki 한국어:

네이버 파파고성지루인순이썬 킴원자력 발전소이주빈이재명안정환페이커 (프로게이머)5월 7일MBTI박용택클레오파트라이스라엘범죄도시 (2017년 영화)브루나이김성민 (배우)2024년율리우스 카이사르대한민국의 행정 구역영국 공주 마거릿지구 온난화현대 유니콘스가타카나함부로 약속손지창엔비디아전두환콜로세움양자역학정슬기 (1989년)부처님 오신 날대연각호텔 화재강화도구글독도태풍창덕궁고려대학교 의대생 성추행 사건줄기세포에펠탑제곱미터유희관홍석현대한민국 제21대 국회의원 선거폰지 사기인간의 성행위산소황우여발기이정재 (1917년)안은진이재은 (아나운서)도영연우진초전도 현상대부도 토막시신 살인사건광주광역시백과사전이창섭 (가수)범죄도시3이하늬대학수학능력시험나훈아스위스흥선대원군이상 (작가)난장이가 쏘아올린 작은 공김건희사계 (비발디)고인돌레온하르트 오일러한국의 성씨아시아이상순이정후이순재김홍도🡆 More