도움말:위키 문법/표: 두 판 사이의 차이

2025년 10월 4일 (토) 12:07 판

도움말

[ 펼치기 · 접기 ]

위키 문법
1장 「기초」	2장 「표」	3장 「HTML」
4장 「스타일링」	5장 「응용」
개별 기능
보일 제목	틀 제작	파일 삽입

개념

CSS 기초 2

여기서는 1장 서두의 HTML 태그와 CSS 기초 부분을 정독하고 오셨다고 가정하고 설명합니다.

이전에 CSS 3개를 알려 드렸는데, 표에서 사용할 수 있는 2개의 태그를 더 소개하고자 합니다.

속성	설명	예시	출력^[1]
`text-align`	좌우 정렬	`text-align: right;`	예시
`border`	테두리	`border: 2px blue solid;`	예시

삽입

표 만들기

편집기 상단에 표 버튼을 통해 표를 만들 수도 있지만, 여기서는 수동으로 만드는 방법을 소개하고자 합니다. 먼저 표는 {|로 열고 |}로 닫습니다. 열고 닫기만 하면 당연하게도 아무 내용도 표시되지 않습니다.

입력

출력

{|
|}

행·칸 만들기

위키 문법에서 표는 행 아래에 칸이 있는 위계가 성립합니다. 그래서 행별로 편집하기는 보다 편리하고 열별로 편집하기는 보다 어렵다는 부분이 있습니다. 행을 바꿀 때는 |-를 입력합니다. |-가 행을 구분짓는 구분선인 셈입니다. 아직 행 안에 칸을 만들지 않아 내용이 표시되지는 않습니다.

입력

출력

{|
|-
|}

여기서부터 줄바꿈이 중요해집니다. 권장되는 문법으로는 만드는 각 칸마다 줄바꿈을 해야 합니다. 이때 각 칸마다 앞에 |를 입력하고 뒤에 내용을 입력합니다. 머리말 칸을 만들 때는 !를 대신 입력하면 됩니다.

입력

출력

{|
! A
|-
| B
|}

A
B

{|
! A
! B
|-
| C
| D
|}

A	B
C	D

서식

표에는 표 전체, 행별, 칸별 서식을 각각 지정할 수 있습니다. 단, 행별 서식은 자주 사용하진 않습니다. 모두 1장에서 앞서 설명한 HTML 태그 안에 들어가는 속성의 형태로 서식을 추가합니다.

표 서식

표 전체에 서식을 부여할 때는 {| 뒤에 서식을 쓰면 되는데 이때 class="wikitable"이라는 서식은 거의 항상 붙습니다. 기본적으로 제공되는 테이블 스타일링을 추가해주기 때문입니다.

그 뒤에 style을 이용해 여러 서식을 붙일 수 있는데, border를 사용해보겠습니다. border는 보통 2px solid 색상를 사용하는데, solid는 일반적인 직선 테두리이기 때문이고, 2px은 나무위키에서 기본적으로 표에 2px 테두리를 적용하기 때문입니다.

외에도 text-align을 통해 표의 특성에 따라 좌우 정렬을 적용하기도 합니다.

입력

출력

{| class="wikitable" style="border: 2px solid red;"
! A
! B
|-
| C
| D
|}

A	B
C	D

칸 서식

행 서식은 잘 사용되지 않으니 여기서는 넘어갑니다. 칸별 서식을 넣는 방법 또한 간단합니다. | 서식 | 내용처럼 파이프(|)를 하나 더 넣고 그 사이에 서식을 넣습니다. 머리말 칸도 ! 서식 | 내용처럼 쓰면 됩니다.

이번에는 먼저번의 표에 background와 color를 적용해보겠습니다.

입력

출력

{| class="wikitable" style="border: 2px solid red;"
! style="background: red; color: white;" | A
! style="background: red; color: white;" | B
|-
| style="color: red;" | C
| D
|}

A	B
C	D

↑ 셀에 적용했을 때

[1] 셀에 적용했을 때

[1]

@@ 8번째 줄: / 8번째 줄: @@
 여기서는 [[도움말:위키 문법|1장]] 서두의 HTML 태그와 CSS 기초 부분을 정독하고 오셨다고 가정하고 설명합니다.
-이전에 CSS 3개를 알려 드렸는데, 표에서 사용할 수 있는 3개의 태그를 더 소개하고자 합니다.
+이전에 CSS 3개를 알려 드렸는데, 표에서 사용할 수 있는 2개의 태그를 더 소개하고자 합니다.
 {| class="wikitable"
@@ 16번째 줄: / 16번째 줄: @@
 | <code>text-align</code> || 좌우 정렬 || <code>text-align: right;</code>
 | style="text-align: right;" | 예시
-|-
-| <code>padding</code> || 안쪽 여백 || <code>padding: 0px;</code>
-| style="padding: 0px;" | 예시
 |-
 | <code>border</code> || 테두리 || <code>border: 2px blue solid;</code>
@@ 104번째 줄: / 101번째 줄: @@
 표 전체에 서식을 부여할 때는 <code><nowiki>{|</nowiki></code> 뒤에 서식을 쓰면 되는데 이때 <code><nowiki>class="wikitable"</nowiki></code>이라는 서식은 거의 항상 붙습니다. 기본적으로 제공되는 테이블 스타일링을 추가해주기 때문입니다.
-그 뒤에 <code><nowiki>style</nowiki></code>을 이용해 여러 서식을 붙일 수 있는데, <code><nowiki>border</nowiki></code>을 사용해보겠습니다.
+그 뒤에 <code><nowiki>style</nowiki></code>을 이용해 여러 서식을 붙일 수 있는데, <code><nowiki>border</nowiki></code>를 사용해보겠습니다. <code><nowiki>border</nowiki></code>는 보통 <code>2px solid 색상</code>를 사용하는데, <code><nowiki>solid</nowiki></code>는 일반적인 직선 테두리이기 때문이고, <code><nowiki>2px</nowiki></code>은 나무위키에서 기본적으로 표에 2px 테두리를 적용하기 때문입니다.
+외에도 <code><nowiki>text-align</nowiki></code>을 통해 표의 특성에 따라 좌우 정렬을 적용하기도 합니다.
 {| class="wikitable"
 |-
@@ 125번째 줄: / 125번째 줄: @@
 |-
 | C
+| D
+|}
+|}
+=== 칸 서식 ===
+행 서식은 잘 사용되지 않으니 여기서는 넘어갑니다. 칸별 서식을 넣는 방법 또한 간단합니다. <code><nowiki>| 서식 | 내용</nowiki></code>처럼 파이프(|)를 하나 더 넣고 그 사이에 서식을 넣습니다. 머리말 칸도 <code><nowiki>! 서식 | 내용</nowiki></code>처럼 쓰면 됩니다.
+이번에는 먼저번의 표에 <code><nowiki>background</nowiki></code>와 <code><nowiki>color</nowiki></code>를 적용해보겠습니다.
+{| class="wikitable"
+|-
+! style="max-width: 100px;" | 입력
+! 출력
+|-
+| style="padding-bottom: 0; padding-top: 15px;" | <pre>
+{| class="wikitable" style="border: 2px solid red;"
+! style="background: red; color: white;" | A
+! style="background: red; color: white;" | B
+|-
+| style="color: red;" | C
+| D
+|}
+</pre>
+|
+{| class="wikitable" style="border: 2px solid red;"
+! style="background: red; color: white;" | A
+! style="background: red; color: white;" | B
+|-
+| style="color: red;" | C
 | D
 |}
 |}