위키백과:고급 테이블 형식 지정

Wikipedia

위키백과에서 위키 테이블의 표시 또는 편집을 개선하기 위한 몇 가지 고급 테이블 형식 지정 기술이 있습니다.대부분의 팁은 표준 텍스트 편집기 사용과 관련이 있습니다.일부 특수 소프트웨어 패키지가 존재하지만 사용자 정의 편집을 위해 다른 컴퓨터로 이동할 때는 일반적으로 사용할 수 없습니다.

일부 기술은 위키백과 도움말 페이지 "도움말:표"는 표 형식 지정의 거의 모든 기본 옵션을 설명하고 각 옵션의 예를 보여줍니다.

간격이 있는 빠른 다중 열 표

텍스트 열을 여러 개 만드는 가장 빠른 방법은 다음과 같습니다.

AA BB CC
DD EE FF
셀패딩=5 AA BB CC - DDEFF }

그러나 독자들은 종종 각 열 아래에 있는 수직적인 데이터 목록을 선호합니다.
style="border:1"solid #BBB"로 테두리를 추가할 수 있습니다.

AA CC EE
BB DD FF
cellpadding=5 style=" 테두리:1인치 솔리드 #BBB" AA CCE - BB DDFF }

기본 배경색은 더 밝으므로 16진수 색상 코드 "#ffeff"(또는 "#FAFEFF")를 사용하여 각 행에 연청녹색 음영을 지정할 수 있습니다.

AA CC EE
BB DD FF
cellpadding=5 style=" 테두리:1인치 솔리드 #BBB" - bgcolor="#ffffff" AA CCEE - bgcolor="#ffffe" BB DDFF }

한 줄 행 형식으로 압축

하나의 행에 대한 위키 텍스트는 열 사이에 이중 막대 " "가 있는 열을 결합하고 각 행을 "로 끝냄으로써 단일 행으로 압축할 수 있습니다.<tr>".

:: 1: '''fmtspec''' AA '''fmtspec''' CC '''fmtspec''' EE<tr> ::예 2: '''fmtspec''' BB '''fmtspec''' DD
(fmtspec은 bgcolor=flash 또는 style="flash-size:91%" 등이 될 수 있습니다.)

이 작업은 별도의 텍스트 줄로 코딩된 행을 다시 정렬하거나 미리 보는 것이 더 쉬울 수 있기 때문에 때때로 수행됩니다.여러 열은 이중 막대 ""로 연결되는 반면, 선을 따라 있는 각 단일 막대 ""는 이중 막대로 끝나는 각 데이터 항목 앞에 형식 지정자를 허용합니다.그러나 새 행에 대한 위키 가능한 코드인 bar-dash(" -")는 "를 추가하여 생략해야 합니다.<tr>그 위의 앞줄 에.마지막 행에는 끝이 필요하지 않습니다.<tr>".

중앙에 영상 부동

테이블을 사용하여 테이블이 페이지 중앙을 향해 이동할 수 있도록 이미지를 감쌀 수 있습니다(예: style="filename:right;" 사용).그러나 테이블 여백, 테두리 및 글꼴 크기는 일반적인 이미지 디스플레이와 일치하도록 정확하게 설정해야 합니다.Image-spec 매개변수 "thumb"(사용자 기본 설정 너비에 자동 축소)는 가까운 텍스트를 압축하는 넓은 왼쪽 여백을 강제로 적용하므로 "center" 매개변수를 추가하여 왼쪽 여백 채우기를 억제할 수 있습니다.그러나 "가운데"는 때때로 캡션을 두 번째 줄(가운데 상자 "[]" 아래)로 밀어넣어 "엄지"를 생략하고 이미지 크기를 하드 코딩하여 회색(#BBB) 테두리를 추가합니다.정확한 파라미터를 사용하여 다른 영상과 일치시키는 부동 영상 테이블을 다음과 같이 코딩할 수 있습니다.

style="filename:right; border:1filename solid #BBB; 마진:46em 0.2em" - style="flash-size:86%" style="flash-align:top" [파일:Dura Europos-TempleOfBel.jpg 180px]<! --><br />벨(신화)의 사원](부동). }

부동 테이블 내부의 텍스트 크기는 style="float-size:86%"(일반 이미지 캡션과 비슷한 크기)로 지정됩니다.이 부동 이미지 테이블은 일반적인 이미지 상자를 부동시키지만 이미지의 왼쪽 여백을 조정할 수도 있습니다(아래 절 예제 부동하기 참조).

정보 상자 A이 샘플 정보 상자는 부동 이미지 상자가 중앙을 향해 정렬되는 방식을 보여줍니다.

신전(떠다니는).
이 상자에는 [파일:...]의 암시적 여백이 표시됩니다.오른쪽]
이 상자에는 [파일:...]의 암시적 여백이 표시됩니다.왼쪽]

캡션 텍스트를 생략하거나 매개 변수 "엄지"를 제거하면 "마우스 오버 디스플레이"로 표시될 때까지 캡션이 숨겨집니다.안타깝게도 매개 변수 "thumb"(캡션 표시에 사용됨)도 사용자 기본 설정 크기에 따라 이미지 크기를 조정하지 못하는 자동 축소판 그림을 제어합니다(기본 축소판 그림 크기는 180px, 2009년 이후에는 220px).2010년 3월에는 캡션을 숨기는 동시에 자동 축소판 크기 조정을 수행할 수 없었습니다. 대신 매개 변수 "엄지"가 두 가지 작업을 모두 트리거하고 이미지 아래에 캡션을 표시합니다.

"left" 매개 변수가 있는 이미지 세트는 오른쪽 측면 여백이 넓기 때문에(파라미터 "right"의 여백이 큼) 왼쪽으로 이동하려면 style="message:left, 여백:0.46em 0.2em"인 테이블 내에서 "center"로 이미지 세트가 필요합니다.

이미지 테이블 외부에서 매개 변수 "오른쪽"으로 인해 이미지가 정보 상자 위 또는 아래에 정렬되지만 정보 상자 옆에는 표시되지 않습니다.이러한 이유로, 정보 상자 옆의 많은 이미지는 일반적으로 페이지 중앙으로 이동하는 대신 왼쪽 여백을 따라 정렬되도록 "왼쪽"으로 설정됩니다.

오른쪽 여백에서 우선 순위를 기록합니다. 먼저 "오른쪽"을 사용하여 정보 상자 또는 이미지를 입력한 다음 부동 테이블을 입력하고 마지막으로 적합한 텍스트를 입력합니다.첫 번째 텍스트 단어가 너무 길면 왼쪽 측면을 완성하기에 적합한 텍스트가 없으므로, 부동 테이블 옆에 텍스트를 넣을 공간이 충분하지 않을 때 "왼쪽 여백 러그"를 만드는 것에 주의하십시오.

여러 개의 단일 이미지 테이블이 쌓이면 페이지 너비에 따라 페이지 전체에 걸쳐 정렬되도록 이동합니다.텍스트는 자동 정렬된 부동 테이블이 최대한 많이 들어갈 수 있도록 압축된 다음 왼쪽에 있는 모든 텍스트를 감쌀 수 있습니다.


...부유: 맞아요.

...라벨 랩...

이 모든 것들...

이 자동 정렬 기능을 사용하여 이미지의 "플로팅 갤러리"를 만들 수 있습니다. 20개의 부동 테이블 세트는 각 테이블이 페이지를 가로질러 아래로 감기 위한 텍스트 단어인 것처럼 (뒤로, 오른쪽에서 왼쪽으로) 래핑됩니다.일반적인 방향(왼쪽에서 오른쪽으로 접기)으로 감싸려면 대신 상단 매개변수 스타일="float:left; margin:0.46em 0.2em"을 사용하여 모든 부동 소수점을 왼쪽 테이블로 정의합니다.여러 개의 부동 이미지를 사용하여 텍스트 주변의 이미지를 보다 유연하게 조판할 수 있습니다.

텍스트 언텐딩/브래킷화

실제 조판 소프트웨어는 30년 넘게 일반적으로 왼쪽, 오른쪽, 가운데 또는 움푹 들어간(왼쪽 여백 선 너머) 정렬을 트리거하는 간단한 지시를 가지고 있었습니다.그러나 수십 년 동안 HTML은 쉬운 정렬을 위한 제한된 옵션만 가지고 있었습니다.<center>현재는 더 이상 사용되지 않습니다.문단의 첫 번째 단어의 접힘을 해제하는 방법은 첫 번째 단어(또는 음절)가 열 1에 (혼자) 있고 다른 텍스트가 열 2에 있는 텍스트 테이블에 문단을 배치하는 것입니다.

위키코드
<table cellspacing=0 cellpadding=0><tr><trvalign=top> 청력을 잃고 있는 동안에도 <달빛 소나타>작곡했습니다.</table>
결과.
Thoven이 달빛 소나타를 작곡했습니다.
그가 청력을 잃고 있을 때.

두 가지 모두 사용합니다.cellspacing=0 cellpadding=0첫 음절 "비"와 "토븐" 사이의 간격을 분리하지 않도록 합니다.

세 번째 열을 사용하여 텍스트를 외부 대괄호로 묶은 다음 3열에 닫는 대괄호 "]"를 다음과 같이 넣을 수 있습니다.

위키코드
<table><tr><valign=top>[<table>이것은 1호선입니다.<br />2호선입니다.<td></table>
결과.
[여기는 1호선입니다.
2호선.
]

텍스트 줄 내의 작은 표

HTML에서 수년 동안 테이블은 항상 암묵적인 줄 바꿈(또는 줄 바꿈)을 강제로 수행했습니다.따라서 한 줄 안에 테이블을 유지하려면 전체 라인을 테이블에 넣은 다음 외부 테이블을 사용하여 테이블에 테이블을 삽입하여 전체 라인을 함께 유지해야 합니다.다음 예를 생각해 보십시오.

Wikicode(테이블의 줄 바꿈을 표시함)
여기 테스트 테이블입니다. <table style="border:1"solid black"><tr><tr>HELLO WORLD </table> 뒤에 이 텍스트가 나옵니다.
결과
  • 이것은 여기 테스트 테이블입니다.
    안녕 세계
    다음에 이 텍스트가 나옵니다.
Wikicode(테이블 내 테이블)
<table style="background-color:#ffeff"><tr><tr>이 표는 여기테스트 표입니다. <tr><table height=11px><tr><tr><font style="border:1px 솔리드 블랙; 글꼴 크기:60%">HELLO WORLD</table><td><td>이후에 이 텍스트가 이어집니다.</table> 바깥쪽 표 뒤에 더 많은 텍스트가 있는 줄입니다.
결과
  • 이것은 여기 테스트 테이블입니다.
    안녕 세계
    다음에 이 텍스트가 나옵니다.
    이 줄은 외부 테이블 뒤에 있는 더 많은 텍스트입니다.

style="filen-size:60%"를 사용하여 상자 안의 텍스트를 축소합니다.그러나 작은 텍스트는 작은 이미지(내부 테이블 내부에 정렬됨)로 대체될 수 있습니다.외부 테이블은 한 줄에만 사용되므로 두 번째 줄이 고르게 나타나려면 다른 줄의 길이와 일치하도록 1줄의 정확한 길이를 미리 결정해야 합니다.

열 이동 또는 교환

데이터 열을 두 번째 열에 서로 다른 내용과 같이 다른 순서로 나열해야 하는 경우가 있습니다.그러나 Wikitable은 마크업 언어로 코딩되므로 열 지향 편집기처럼 단순히 화면을 가로질러 열을 끌 수 없습니다.대신, 각 셀의 지루한 수작업 편집이 장기적으로 가장 빠른 해결책으로 종종 요구된다는 것이 가혹한 현실입니다.

그러나 일부 텍스트 편집기에서는 반복 루프를 정의하여 큰 테이블의 열을 다시 정렬할 수 있는 반복 패턴과 같이 매 7행 또는 유사한 행을 찾고 이동할 수 있습니다.때때로 사용되는 다른 방법에서는 모든 데이터 항목에 알파벳 코드가 먼저 접두사로 추가되고 최종 시퀀스에 대해 수동으로 코드화된 다음 해당 줄이 정렬된 다음 모든 선행 텍스트 접두사가 제거됩니다.정렬은 DOS 프롬프트 명령을 사용하는 것과 같이 별도의 파일로 수행할 수 있습니다.SORT myfile.DAT > myfile2.DAT또는 modify-line-sort 옵션이 있는 NoteTab과 같은 텍스트 편집기를 사용합니다.편집 트릭은 여러 테이블을 변경해야 할 때 가장 유용하며, 복잡한 편집 패턴을 개발하는 데 필요한 시간을 각 테이블에 적용할 수 있습니다.각 테이블에 대해 각 열에 알파벳 접두사를 삽입한 다음(각 행 토큰을 "-"로 만들어 접두사 "124col00"처럼 열 0으로 정렬) 새 파일로 정렬한 다음 열 항목의 접두사를 해제합니다.

다시 한 번 말씀드리지만, 각 행의 항목을 손으로 편집하는 작업이 자동화된 편집 작업의 지연 시간보다 더 빠른 경우가 많습니다.한 테이블 내에서 두 개의 열만 스왑되는 경우 일반적으로 열 접두사 지정, 정렬 및 접두사 해제보다 잘라내기/붙여넣기 편집이 빠릅니다.

또 다른 방법은 표시된 페이지에서 전체 표를 복사하고, 텍스트를 스프레드시트에 붙여넣고, 열을 원하는 대로 이동하는 것입니다.그런 다음 공식을 사용하여 표 선을 재구성합니다.이 공식은 세 개의 열 표를 처리하여 단일 선을 재구성합니다.편집자는 표의 각 줄에 대한 줄을 복사한 다음 수식 행을 편집 페이지로 다시 복사할 수 있습니다.

=A1&" "&A2&" "&A3&" <tr>

HTML의 버그가 아닌 것

2차원 그래픽에 테이블을 사용하는 경우 HTML에서 흰머리를 촉진하는 "기능"을 발견할 수 있습니다.rowspan 또는 colspan의 사용에 따라 행과 열 모두에 영향을 미칠 수 있습니다.

이 7행 표에서 셀 3개의 높이는 3행이지만 총 길이는 6행입니다.4열은 어디에 있습니까?5-4열이 있습니다!

언급
첫 번째 줄
2열
3열
4열
5열
6열
7열
첫 번째 줄 첫 번째 줄 첫 번째 줄
2열
3열
2열 2열
3열
3열
3열
4열
3열
5열
6열 6열
7열 7열 7열

정답은 테이블에 rowspan=1 셀이 포함되지 않은 행이 있을 경우 이 행은 "압축"되어 위쪽으로 사라집니다.

해결책: 큰 셀 중 하나를 분할하여 행이 하나의 rowspan=1 셀을 얻도록 합니다(그리고 궁극적으로 텍스트 표시가 손실되는 것에 대해서는 신경 쓰지 마십시오).그리고 그들 사이의 국경을 죽이세요.아무것도 없이 셀을 채우는 것을 잊지 마세요.{{zwsp}}이 솔루션은 셀 높이를 정확하게 보존하는 유일한 솔루션으로, 참조 7행 테이블의 높이와 일치합니다.

언급
첫 번째 줄
2열
3열
4열
5열
6열
7열
첫 번째 줄 첫 번째 줄 첫 번째 줄
2열
3열
2열 2열
3열
3열
3열
4열
3열
5열
6열 6열
7열 7열 7열

또는 이 경우 세 번째 줄의 텍스트(사용 가능한 공간의 세 번째 행 채우기)를 "2/3 행" 셀에 추가하여 텍스트 중심 사용 가능성을 유지할 수 있습니다.

언급
첫 번째 줄
2열
3열
4열
5열
6열
7열
첫 번째 줄 첫 번째 줄 첫 번째 줄
2열
3열
2열 2열
3열
3열
3열
4열
3열
5열
6열 6열
7열 7열 7열

클래스의 버그 wikitable

예를 들어 직사각형이 아닌 슈퍼 셀을 원할 때 테이블에서 인접 셀 사이의 경계를 제거할 수 있습니다.

이 표에서 노란색 셀은 정확히 이를 위해 설정되어 있습니다.그런데 왜 국경이 있는 거지?

bbbb 여기까지
cccccc 연결된
이 감방 Ddddd.
이이 fffffffff


bbbb 여기까지
cccccc 연결된
이 감방 Ddddd.
이이 fffffffff



class=providable을 제거하면 테이블이 올바르게 설정되어 있는지 확인할 수 있습니다.

bbbb 여기까지
cccccc 연결된
이 감방 Ddddd.
이이 fffffffff

클래스 위키피디아는 셀이 동일한 행(또는 수직 효과를 위한 열)에서 시작될 때만 두 셀 사이의 경계가 사라지도록 요구합니다.

해결책: 그것들을 조각조각 자릅니다!그리고 텍스트의 중심을 잊어버립니다.새 셀을 아무것도 없는 상태로 채우는 것을 잊지 마십시오(nbsp).여기 더 진한 노란색이 있습니다.

bbbb 여기까지
cccccc 연결된
이 감방 Ddddd.
이이 fffffffff

다중 열 테이블의 목록

긴 데이터 목록의 경우 그룹 간에 세로 막대 ""를 사용하여 별도의 줄에 별표 기호 "*"를 사용한 다음 너비="30"과 같이 스페이서 기호로 데이터 기호를 구분합니다.
  • 땅돼지
  • 오소리
  • 코요테
  • 딩고
  • 에뮤
  • 가자미
style="border:1"solid #BBB"를 사용하여 모든 테이블에 테두리를 둘 수 있습니다.#BBB 색상은 이미지 상자와 일치하지만 "파란색" 또는 #AA6633(갈색)과 같은 다른 색상을 사용할 수 있습니다.
이것은 노트 상자입니다.
테두리 색을 표시합니다.
cellpadding=5 style="border:1pads 솔리드 #AA6633" - bgcolor="#ffffff" 테두리 색상을 보여주는 메모함입니다. }

코딩이 약간 어색해 보일 수 있지만 간격 및 정렬을 위해 결과를 쉽게 제어할 수 있습니다.기본적으로 표 너비는 표 외부의 왼쪽 텍스트(또는 섹션 제목)와의 정렬을 유지하면서 더 넓거나 좁힌 창에 대해서도 동일하게 유지됩니다.

참고 항목

외부 링크