From DawoumWiki, the free Mathematics self-learning
테이블은 위키 페이지에서 생성될 수 있습니다.
일반적인 규칙으로써, 필요한 경우가 아니면 가능한 테이블 사용을 피하는 것이 가장 좋습니다. 테이블 마크업은 종종 페이지 편집을 복잡하게 만듭니다.[1]
Wiki table markup summary
{|
테이블 시작, 요구됨
|+
테이블 캡션, 선택적; 오직 테이블 시작하기 및 테이블 행 사이
|-
테이블 행, 첫 번째 행에서 선택적—위키 엔진은 첫 번째 행을 가정합니다
!
테이블 헤드 셀, 선택적. 연속 테이블 헤드 셀은 이중 표식 (!!)으로 구분된 같은 행에 추가되거나 각각 고유한 단일 표식 (!)을 갖는 새 행에서 시작할 수 있습니다.
|
테이블 데이터 셀, 선택적. 연속 테이블 데이터 셀은 이중 표식 (||)으로 구분된 같은 행에 추가되거나 각각 고유한 단일 표식 (|)을 갖는 새 행에서 시작할 수 있습니다.
|}
테이블 끝, 요구됨
위의 표식은 줄에 연속적인 셀을 선택적으로 더하기 위해 이중 || 및 !!를 제외하고 반드시 새 줄에서 시작해야 합니다. 어쨌던, 줄의 시작 부분에 있는 공백은 무시됩니다.
HTML 속성. 테이블 끝을 제외한 각 표식은 선택적으로 하나 이상의 HTML 속성을 수용합니다. 속성은 반드시 표식과 같은 줄에 있어야 합니다. 단일 공백으로 속성을 서로 분리하십시오.
셀과 캡션 (| 또는 ||, ! 또는 !!, 및 |+)은 컨텐츠를 보유합니다. 따라서 하나의 파이프 (|)로 컨텐츠의 모든 속성을 분리하십시오. 셀 컨텐츠는 같은 줄 또는 다음 줄에 올 수 있습니다.
테이블과 행 표식 ({| 및 |-)는 컨텐츠를 직접 보유하지 않습니다. 선택적 속성 뒤에 파이프 (|)를 추가하지 마십시오. 만약 테이블 표식 또는 행 표식에 대해 속성 뒤에 파이프를 잘못 추가하면 구문 분석기는 파이프를 삭제할 것이고 구문 분석기가 잘못된 파이프를 만나면 최종 속성을 삭제할 것입니다!
컨텐츠는 (a) 임의의 선택적 HTML 속성 다음에 동일한 행의 셀 표시를 따라 나오거나 (b) 셀 표식 아래의 줄에 나옵니다. 목록, 테이블 제목, 또는 중첩된 테이블과 같이 새 행에서 시작해야 하는 위키 마크업을 사용하는 컨텐츠는 자체로 새 줄에 있어야 합니다.
컨텐츠로 파이프 문자. 파이프 (|) 문자를 테이블에 삽입하기 위해, <nowiki>|</nowiki> 이스케이프 마크업을 사용하십시오.
Basics
다음 테이블은 테두리와 좋은 간격이 부족하지만 가장 간단한 위키 마크업 테이블 구조를 보여줍니다.
아래의 위키 마크업에서 처럼, 위키 마크업에서 셀 내의 여분의 공백은 실제 테이블 렌더링에 영향을 미치지 않습니다.
입력하십시오
결과입니다
{|
| Orange || Apple || more
|-
| Bread || Pie || more
|-
| Butter || Ice cream || and more
|}
Orange
Apple
more
Bread
Pie
more
Butter
Ice cream
and more
역시 테이블 셀 내부에 긴 텍스트 또는 더 복잡한 위키 구문을 가질 수 있습니다:
입력하십시오
결과입니다
{|
|Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet.
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet.
Lorem ipsum dolor sit amet
consetetur sadipscing elitr
sed diam nonumy eirmod tempor invidunt
Table headers
테이블 헤더는 "|" (파이프 기호) 대신에 "!" (느낌표 표식)을 사용함으로써 생성될 수 있습니다.
헤더는 보통 기본값으로 굵게 표시되고 가운데에 표시됩니다.
{|class=wikitable
| style="padding: 10px" | Example of style="padding:10px"
|-
| style="padding: 50px" | Example of style="padding:50px"<br/><br/>Specify the padding on '''EACH CELL'''
|-
| style="padding:100px" | Example of style="padding:100px"
|}
Example of style="padding:10px"
Example of style="padding:50px"
Specify the padding on EACH CELL
Example of style="padding:100px"
Column width
열 폭은 다음처럼 더해질 수 있습니다.
입력하십시오:
{| class="wikitable" style="width: 85%;"
| colspan="2" | This column width is 85% of the screen width
|-
| style="width: 30%"| '''This column is 30% counted from 85% of the screen width'''
| style="width: 70%"| '''This column is 70% counted from 85% of the screen width'''
|}
결과입니다:
This column width is 85% of the screen width
This column is 30% counted from 85% of the screen width
This column is 70% counted from 85% of the screen width
Accessibility of table header cells
테이블 헤더 셀은 적용할 테이블 데이터 셀 (같은 행의 오른쪽에 있는 것들 또는 같은 열의 그 아래에 있는 것들)을 명시적으로 지정하지 않습니다.
테이블이 시각적 2D 환경에서 렌더링될 때, 이것은 보통 추론하기 쉽습니다.
어쨌던, 테이블이 비-시각적 미디어에서 렌더링될 때, 브라우저에게 테이블 헤드 셀이 테이블 헤더 셀에 대한 scope="row" 또는 scope="col"을 사용하여 임의의 선택된 셀 (일부 접근성 도우미에서 컨텐츠를 반복하기 위해)의 설명에 적용되는 것을 결정하기 위해 도울 수 있습니다.
단순 테이블을 갖는 대부분의 경우에서, 첫 번째 행의 모든 헤더 셀에 scope="col"을 사용하고, 다음 행의 첫 번째 셀에 scope="row"를 사용할 것입니다:
테이블 정렬은 CSS를 사용함으로써 성취됩니다.
테이블 정렬은 여백으로 제어됩니다.
한쪽 변에 고정된 여백은, 만약 반대쪽 변에서 여백이 auto로 정의되면, 테이블을 해당 변에 정렬되도록 만들 것입니다.
테이블 중앙에 정렬하기 위해, 두 여백을 모두 auto로 설정해야 합니다.
{| class="wikitable" style="margin: auto;"
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream
|}
Orange
Apple
Bread
Pie
Butter
Ice cream
Table floating around text
만약 테이블을 페이지의 오른쪽 또는 왼쪽 변에 정렬하면, 테이블 뒤에 오는 텍스트는 테이블의 끝에서 시작하여, 테이블 주위에 빈 공간을 남깁니다.
텍스트를 정렬하는 대신 테이블을 텍스트 주위에 떠있도록 만듦으로써 테이블을 감싸도록 텍스트를 만들 수 있습니다.
이것은 테이블이 오른쪽 변 또는 왼쪽 변에 떠있는 위치를 지정할 수있는 float CSS 속성을 사용하여 성취될 수 있습니다.
float를 사용할 때, 여백은 테이블 정렬을 제어하지 않고 테이블과 둘러싸는 텍스트 사이의 여백을 지정하기 위해 사용될 수 있습니다.
입력하십시오
결과입니다
{| class="wikitable" style="float:right; margin-left: 10px;"
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream
|}
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.
Orange
Apple
Bread
Pie
Butter
Ice cream
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.
Cell contents alignment
셀 컨텐츠의 정렬은 2 다른 CSS 속성: text-align과 vertical-align으로 제어될 수 있습니다.
text-align은 테이블, 행 또는 개별적인 셀에서 지정될 수 있지만
vertical-align는 오직 개별적인 행 또는 셀에서 지정될 수 있습니다.
입력하십시오
결과입니다
{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}
A
B
C
D
E
F
G
H
I
Caveats
Negative numbers
만약 음의 기호를 갖는 음수 (또는 음수로 평가되는 매개변수)를 갖는 새로운 줄에서 셀을 시작하면, 문자 |-는 테이블 셀이 아니라 테이블 행의 위키 마크업으로 분석되기 때문에, 테이블이 망가질 수 있습니다.
이것을 방지하기 위해, 값(| -6) 앞에 공백을 삽입하거나 인-라인 셀 마크업 (|| -6)을 사용하십시오.
CSS vs Attributes
경계선 속성이 아닌 CSS를 통해 지정된 테이블 테두리는 텍스트 브라우저의 작은 일부에서 잘못 렌더링됩니다.
Common attributes for columns, column groups and row groups
테이블에 대해 미디어위키 구문은 현재 열 (HTML 요소 <col />를 가짐), 열 그룹 (HTML 요소 <colgroup></colgroup>), 및 행 그룹 (HTML 요소 <thead></thead>, <tbody></tbody> 및 <tfoot></tfoot>)의 공통 속성을 지정하는 지원을 제공하지 않습니다.
그들 표준 HTML 요소는 심지어 HTML 또는 XHTML 구문에서도 수용되지 않습니다.
테이블의 모든 행과 셀 (헤드 또는 데이터)은 임의의 속성 또는 스타일없이 단일 암시적 행 그룹 (HTML 요소 <tbody></tbody>) 내에서 렌더링됩니다.
Phab: T108245를 참조하십시오: "시각 편집기에서 기본 테이블 편집을 완벽하게 지원".
작업 목록을 참조하십시오. 완료된 작업이 struck입니다. 정확하게 무엇이 개선되었는지, 어떤 기능이 추가되었는지 기술 언어로 파악하기 어려울 수 있습니다. 아래에 설명 정보를 추가하십시오.
Can now move or delete columns and rows
열 또는 행 헤더를 클릭하십시오.
그런-다음 화살표를 클릭하십시오.
팝업 메뉴에서 "Move" 또는 "Delete"를 클릭하십시오.
Insert blank row or column
같은 팝업 메뉴에서 "Insert"을 클릭합니다.
Copy table from web page to Visual Editor
웹 페이지에서 테이블을 시각 편집기 (VE)로 직접 복사하여 붙여넣을 수 있습니다.
안정하게 그렇게 하기 위해, 샌드박스를 사용하고 위키텍스트 소스 모드에서 적절한 코딩과 시각 편집기와 미리보기 모드에서 적절한 표시를 하는지 테이블을 확인하십시오.
^
Tables can be created using either HTML table elements directly, or using wikicode formatting to define the table.
HTML table elements and their use are well described on various web pages and will not be discussed here.
The benefit of wikicode is that the table is constructed of character symbols which tend to make it easier to perceive the table structure in the article editing view compared to HTML table elements.
