| 도움말 | ||||
|---|---|---|---|---|
[ 펼치기 · 접기 ]
|
| 위키 문법 | ||
|---|---|---|
| 1장: 기초 | 2장: 표 | 3장: 스타일링 |
| 4장: HTML | ||
| 개별 기능 | ||
| 보일 제목 | 펼치기 접기 | 스크롤 |
| 내표 | 나무마크 | 파일 삽입 |
개요
이 장은 표를 만들고 꾸미는 방법을 다룹니다. 1장 첫머리의 HTML 태그와 스타일 틀을 읽었다고 보고 설명하며, 스타일 틀의 서식 전체는 3장에 정리되어 있습니다. 표를 언제 쓰고 어떻게 설계하면 좋은지는 디자인 도움말에서 다룹니다.
편집 화면 위쪽의 표 단추로도 표를 만들 수 있지만, 이 장에서는 원문을 직접 쓰는 방법을 설명합니다. 원문의 구조를 알아 두면 단추로 만든 표를 고치거나 남의 표를 읽을 때에도 도움이 됩니다.
표의 구조
열고 닫기
표는 {|로 열고 |}로 닫습니다. 둘 다 줄의 맨 앞에 써야 하며, 열고 닫기만 하면 아무것도 표시되지 않습니다.
행과 칸
위키 문법의 표는 행 안에 칸이 들어 있는 구조입니다. 그래서 행 단위로 고치기는 쉽지만 열 단위로 고치기는 상대적으로 번거롭습니다. 행을 나눌 때에는 |-를 쓰며, 이 줄이 행과 행 사이의 경계가 됩니다.
칸은 줄을 바꿀 때마다 하나씩 만듭니다. 일반 칸은 줄의 맨 앞에 세로줄(|)을, 머리글 칸은 느낌표(!)를 쓰고 그 뒤에 내용을 적습니다. 첫 행 앞의 |-는 생략할 수 있습니다.
| 입력 | 결과 | ||||
|---|---|---|---|---|---|
{|
! A
! B
|-
| C
| D
|}
|
|
칸에 따로 서식을 주지 않는다면 한 줄에 여러 칸을 이어 쓸 수 있습니다. 이때 머리글 칸은 !!로, 일반 칸은 ||로 구분합니다. 행이 많은 표는 이렇게 쓰면 원문의 한 줄이 표의 한 행과 같아져 읽기 쉽습니다.
| 입력 | 결과 | ||||||
|---|---|---|---|---|---|---|---|
{|
! A !! B !! C
|-
| D || E || F
|}
|
|
표 제목
표를 연 바로 다음 줄에 |+를 쓰면 표 위에 제목이 붙습니다. 표 위에 문장으로 설명을 적는 대신 표 제목을 쓰면 제목과 표가 한 덩어리로 묶이고, 화면 낭독기도 이를 표의 제목으로 읽습니다.
| 입력 | 결과 | ||||
|---|---|---|---|---|---|
{| class="wikitable"
|+ 노선별 역 수
! 노선 !! 역 수
|-
| 1호선 || 24
|}
|
|
칸 안의 내용
칸 안에서도 1장의 문법을 대부분 쓸 수 있습니다. 칸 안에서 줄을 바꿀 때에는 <br>을 씁니다. 목록이나 다른 표처럼 줄의 맨 앞에서 시작해야 하는 문법을 칸 안에 넣으려면, 칸을 여는 세로줄 뒤에서 줄을 바꾼 다음 그 문법을 씁니다. 이 도움말의 입력과 결과를 나란히 보여 주는 표도 모두 이 방식으로 칸 안에 표를 넣었습니다.
| 입력 | 결과 | ||
|---|---|---|---|
{| class="wikitable"
! 노선
|-
|
* 1호선
* 2호선
|}
|
|
서식
표에는 표 전체, 행, 칸에 각각 서식을 줄 수 있습니다. 세 가지 모두 1장에서 설명한 HTML 태그의 속성과 같은 꼴로 적으며, 쩌모위키에서는 주로 틀:스타일을 씁니다. 이 장에서 쓰는 스타일 서식은 1장의 세 가지(c, bg, fs)와 아래의 네 가지입니다.
표 서식
표 전체의 서식은 {| 뒤에 적습니다. 이때 class="wikitable"을 먼저 붙이고 그 뒤에 스타일을 적습니다. wikitable은 위키가 기본으로 제공하는 표 모양으로, 칸의 테두리와 여백, 머리글의 배경, 다크 모드 대응을 한꺼번에 적용합니다.
쩌모위키의 표는 대개 bd로 바깥 테두리를 두르며, 값은 주로 2px-sld-색을 씁니다. 두께 2px의 실선(sld)이라는 뜻이며, 많은 문서가 이 모양을 써 왔으므로 따르면 다른 문서와 모양이 맞습니다. 표의 성격에 따라 ta로 표 전체의 정렬을 정하기도 합니다.
칸 서식
칸의 서식은 | 서식 | 내용처럼 세로줄을 하나 더 넣고 그 사이에 적습니다. 머리글 칸은 ! 서식 | 내용처럼 씁니다. 아래는 앞의 표에 bg와 c를 더한 예입니다.
한 줄에 여러 칸을 이어 쓰는 방식에서도 | {{스타일|c-red}} | C || D처럼 칸마다 서식을 줄 수 있습니다. 다만 서식이 많아지면 원문을 읽기 어려워지므로, 서식이 있는 칸은 한 줄에 하나씩 쓰기를 권합니다.
행 서식
행 전체의 서식은 |- 서식처럼 행을 나누는 줄 뒤에 적습니다. 그 행의 모든 칸에 같은 서식이 적용되며, 칸에 따로 준 서식이 있으면 칸의 서식이 우선합니다. 머리글 행 전체를 굵게 하거나 합계 행에만 배경을 칠할 때처럼, 한 행의 칸들에 같은 서식을 줄 때 쓰면 원문이 짧아집니다.
병합
칸을 합칠 때에도 스타일 틀을 씁니다. col은 가로로 합칠 칸의 수를, row는 세로로 합칠 칸의 수를 뜻하며, HTML의 colspan, rowspan 속성과 같습니다.
합칠 때에는 합쳐질 칸들 가운데 가장 왼쪽 위의 칸에만 서식을 주고, 나머지 칸은 아예 만들지 않습니다. 빈 칸으로 남겨 두는 방식이 아니라 칸을 만들 때 건너뛰는 방식입니다.
병합한 표에서는 모든 행의 칸 수가 같아야 합니다. 위에서 내려온 row 칸과 옆으로 넓힌 col 칸을 모두 포함해 각 행의 칸 수를 세었을 때 행마다 수가 다르면, 표의 오른쪽 끝이 들쭉날쭉해지고 일부 칸에만 테두리가 그어집니다. 테두리가 이상하게 그어졌다면 먼저 행마다 칸 수를 세어 보기를 권합니다.
표 배치
폭
표의 폭은 따로 정하지 않으면 내용에 맞춰 정해집니다. 폭을 정할 때에는 w-100%와 maxw-500px을 함께 주면, 넓은 화면에서는 500px로, 좁은 화면에서는 화면 폭에 맞춰 표시됩니다. 폭을 w-640px처럼 픽셀로만 고정하면 모바일에서 표가 화면 밖으로 넘칩니다.
열이 많아 좁은 화면에서 줄일 수 없는 표는 앞뒤를 {{스크롤}}과 {{스크롤끝}}으로 감쌉니다. 그러면 문서 전체가 아니라 표만 가로로 밀어 볼 수 있습니다. 이 도움말의 넓은 표도 이 방식을 썼습니다.
가운데 정렬
화면을 다 채우지 않는 표를 가운데에 놓으려면 표 서식에 mx-auto를 줍니다. 좌우 바깥 여백을 자동으로 나누어 표를 가운데로 옮기는 서식이며, 자세한 내용은 3장의 바깥 여백에 있습니다.
정렬 기능
class="wikitable sortable"처럼 sortable을 덧붙이면, 독자가 머리글 칸을 눌러 그 열을 기준으로 표를 정렬할 수 있습니다. 항목이 많은 목록형 표에 알맞으며, 병합한 칸이 있는 표에서는 정렬이 제대로 되지 않으므로 함께 쓰지 않기를 권합니다.
원문 정리
표의 원문은 금방 길어지므로 몇 가지 습관을 들이면 고치기 쉬워집니다. 서식이 없는 칸은 한 줄에 이어 쓰고 서식이 있는 칸은 한 줄에 하나씩 씁니다. 같은 서식을 여러 칸에 되풀이한다면 행 서식이나 표 서식으로 옮길 수 있는지 먼저 확인합니다. 구조가 복잡한 표에는 <!-- 설명 -->로 원문에만 보이는 메모를 남깁니다. 같은 모양의 표를 여러 문서에서 쓴다면 틀로 만들기를 권합니다.