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

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기1분

    • TinyMCE 버전 6.8.3은 메뉴와 메뉴 선택을 사용하여 테이블을 만들고 편집합니다.

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

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

    테이블을 삽입한 후 테이블 모서리에서 핸들을 선택하고 끌어 크기를 수정할 수 있습니다.
    그림 3. 목차
    TinyMCE v6.8.3 목차

    목차 플러그인은 기본 목차(ToC)를 생성하여 편집기의 현재 커서 위치에 삽입합니다. ToC 항목은 콘텐츠의 헤더 요소 에서 생성됩니다.
    그림 4. 테이블 속성
    TinyMCE v6.8.3 테이블 속성
    		테이블 메뉴에서 테이블 속성 단추를 선택하여 테이블 속성 대화 상자를 엽니다. 이 메뉴에서 다음 작업을 수행할 수 있습니다.
    • 일반 탭:
      • 테이블 너비 및 높이 설정
      • 셀 간격 및 패딩 설정
      • 테두리 및 캡션 사용
      • 테이블 정렬 설정
    • 고급 탭:
      • 테이블 스타일 구성
      • 테두리 색상 선택
      • 배경색 선택
    그림 5. 셀 속성
    TinyMCE v6.8.3 셀 속성 메뉴
    		원하는 테이블 셀에 커서를 놓고 테이블 메뉴를 열고 셀 속성을 선택합니다. 이 메뉴에서는 테이블 셀에 대해 다음과 같은 속성을 설정할 수 있습니다.
    • 일반 탭:
      • 너비 및 높이
      • 유형 및 범위
      • 수평 및 수직 맞춤
    • 고급 탭:
      • Cell 스타일
      • B순서 색
      • Background 색상
    그림 6. 행 속성
    TinyMCE v6.8.3 행 속성 메뉴
    		원하는 행의 테이블 셀에 커서를 놓고 테이블 메뉴를 열고 행 속성을 선택합니다. 이 메뉴에서 행에 대해 다음 속성을 설정할 수 있습니다.
    • 일반 탭:
      • 행 유형
      • 정렬
      • 높이
    • 고급 탭:
      • Row 스타일
      • B순서 색
      • Background 색상

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