표

가격표, 일정표, 비교표처럼 칸을 나눠 정리할 때 씁니다. 툴바의 표 버튼에서 크기를 고르면 표가 들어가고, 표 안에 커서를 두면 표 위에 편집 막대가 뜹니다.

createEditor('#editor', {
  toolbar: 'heading | bold color | table | undo redo',
});

표 넣기

• 툴바의 table 버튼을 누르면 10 × 10 칸이 나옵니다. 마우스를 올려 크기를 정하고 누르면 됩니다. 키보드로는 방향키로 크기를 정하고 Enter 를 누릅니다.
• 빈 줄에서 / 를 치고 "표"를 고르면 3 × 3 표가 들어갑니다 (슬래시 메뉴).
• 엑셀·한글·워드에서 복사한 표는 셀 병합 같은 표 구조를 살려 붙여집니다 (붙여넣기 정리).

표 편집 막대

커서가 표 안에 있으면 표 위쪽에 막대가 뜹니다. 버튼은 왼쪽부터 다음과 같습니다.

셀 고르기와 이동

• 셀 하나에서 다른 셀까지 마우스로 끌면 사각형 범위로 셀이 골라집니다. 합쳐진 셀이 걸치면 범위가 그만큼 넓어집니다.
• Tab 은 다음 셀, Shift+Tab 은 이전 셀로 갑니다. 마지막 셀에서 Tab 을 누르면 아래에 행이 하나 생깁니다.
• 셀 오른쪽 테두리에 마우스를 대면 커서가 바뀝니다. 그대로 끌면 열 너비가 바뀝니다 (최소 30px). 처음 끌 때 모든 열의 지금 너비가 px로 고정되어, 끈 열만 달라집니다.

저장되는 HTML

모양은 모두 인라인 스타일로 저장됩니다. 사이트에 따로 CSS가 없어도 편집할 때와 같은 표가 보입니다.

<div data-table-wrap="" style="overflow-x: auto">
  <table style="border-collapse: collapse; width: 100%"><tbody>
    <tr><th style="border: 1px solid #d0d5dd; …; background-color: #f2f4f7; font-weight: 600" scope="col">요금제</th>…</tr>
    <tr><td style="border: 1px solid #d0d5dd; padding: 6px 8px; vertical-align: top">기본</td>…</tr>
  </tbody></table>
</div>

바깥의 div[data-table-wrap] 는 responsiveOutput(기본 켜짐)이 붙입니다. 휴대폰처럼 좁은 화면에서 표가 화면 밖으로 넘치지 않고 옆으로 밀어서 보입니다. 저장한 글을 다시 불러오면 이 상자는 벗겨지므로 편집할 때는 보이지 않습니다.

코드로 다루기

표 막대의 버튼은 모두 editor.exec() 명령입니다. 직접 만든 버튼이나 단축키에서 같은 일을 할 수 있습니다.

editor.exec('insertTable', '4x3');   // 4행 3열
editor.exec('rowBelow');             // rowAbove, colLeft, colRight
editor.exec('deleteRow');            // deleteCol, deleteTable
editor.exec('mergeCells');           // splitCell
editor.exec('headerRow');
editor.exec('cellColor', '#fff3bf'); // '' 이면 배경색 지우기
editor.exec('cellVAlign', 'middle'); // top | middle | bottom
editor.exec('tableBorder', '0');     // 0 | 1 | 2 | 3 (px)

프리셋과 휴대폰

table 버튼은 basic, board(기본), full 프리셋의 첫 줄에 있고 minimal 에는 없습니다. 휴대폰에서 기본 board 툴바는 자주 쓰는 버튼 한 줄만 남기므로, 표 버튼은 ⋯ 메뉴 안에 들어갑니다.

옵션