TinyMCE의 테이블 함수

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 02월 01일
  • 읽기1분
  • TinyMCE 버전 4는 메뉴와 메뉴 선택 항목을 사용하여 테이블을 만들고 편집합니다.

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

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

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

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

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