HTML 필드 편집기의 테이블 함수

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기1분
  • TinyMCE 버전 6.8.3은 메뉴 및 메뉴 선택을 사용하여 테이블을 만들고 편집합니다.

    표 1. TinyMCE 버전 6.8.3
    UI 요소 작업
    그림 1. 테이블 메뉴
    TinyMCE v6.8.3 테이블 메뉴
    테이블 아이콘( TinyMCE v6.8.3 Table)을 선택하여 TinyMCE 버전 6.8.3 테이블 메뉴에 액세스합니다. 테이블 메뉴를 사용하여 다음을 수행합니다.
    • 테이블 삽입 또는 삭제
    • 테이블 속성 수정
    • 행과 열 추가, 이동 또는 삭제
    • 행 및 열 속성 수정
    • 셀 분할 및 병합
    그림 2. 테이블 삽입 그리드
    TinyMCE v6.8.3 테이블 삽입 그리드

    HTML 필드에 표를 삽입하려면 표 삽입 을 선택하고 그리드에서 원하는 수의 행과 열을 나타내는 사각형을 강조 표시합니다. 마지막으로 강조 표시된 사각형을 선택하여 테이블을 삽입합니다.

    표를 삽입한 후 표 가장자리에서 핸들을 선택하고 끌어 크기를 수정할 수 있습니다.

    그림 3. 목차
    TinyMCE v6.8.3 목차

    Table of Contents 플러그인은 기본 목차(ToC)를 생성하여 편집기의 현재 커서 위치에 삽입합니다. 목차 항목은 콘텐츠의 헤더 요소 에서 생성됩니다.

    그림 4. 테이블 속성
    TinyMCE v6.8.3 테이블 속성
    테이블 메뉴에서 테이블 속성 버튼을 선택하여 테이블 속성 대화 상자를 엽니다. 이 메뉴에서 다음 작업을 수행할 수 있습니다.
    • 일반 탭:
      • 테이블 너비 및 높이 설정
      • 셀 간격 및 안쪽 여백 설정
      • 테두리 및 캡션 사용
      • 테이블 정렬 설정
    • 고급 탭:
      • 테이블 스타일 구성
      • 테두리 색상 선택
      • 배경색 선택
    그림 5. 셀 속성
    TinyMCE v6.8.3 셀 속성 메뉴
    원하는 테이블 셀에 커서를 놓고 테이블 메뉴를 열고 셀 속성을 선택합니다. 이 메뉴에서 테이블 셀에 대해 다음과 같은 속성을 설정할 수 있습니다.
    • 일반 탭:
      • 너비 및 높이
      • 유형 및 범위
      • 수평 및 수직 맞춤
    • 고급 탭:
      • Cell 스타일
      • B주문 칼라
      • Background 색깔
    그림 6. 행 속성
    TinyMCE v6.8.3 행 속성 메뉴
    원하는 행의 테이블 셀에 커서를 놓고 테이블 메뉴를 열고 행 속성을 선택합니다. 이 메뉴에서 행에 대해 다음 속성을 설정할 수 있습니다.
    • 일반 탭:
      • 행 유형
      • 정렬
      • 높이
    • 고급 탭:
      • Row 스타일
      • B주문 칼라
      • Background 색깔

    표 기반 편집기에서 HTML 필드에 표를 붙여넣을 수도 있습니다.