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 テーブル) を選択して、TinyMCE バージョン 6.8.3 テーブルメニューにアクセスします。テーブルメニューを使用して、次のことを行います。
    • テーブルを挿入または削除する
    • テーブルのプロパティを変更する
    • 行と列を追加、移動、または削除する
    • 行と列のプロパティを変更する
    • セルを分割および結合する
    図 : 2. テーブル挿入グリッド
    TinyMCE v6.8.3 テーブル挿入グリッド

    HTML フィールドにテーブルを挿入するには、[テーブルの挿入] を選択し、グリッド上で目的の行数と列数を表す正方形をハイライト表示します。最後にハイライト表示された正方形を選択して、テーブルを挿入します。

    テーブルを挿入した後で、テーブルの端にあるハンドルを選択してドラッグしてサイズを変更できます。

    図 : 3. 目次
    TinyMCE v6.8.3 目次

    目次プラグインは、基本的な目次 (ToC) を生成し、エディターの現在のカーソル位置に挿入します。目次エントリは、コンテンツ内のヘッダー要素から生成されます。

    図 : 4. テーブルのプロパティ
    TinyMCE v6.8.3 テーブルのプロパティ
    テーブルメニューから、 [テーブルのプロパティ] ボタンをクリックして [テーブルのプロパティ] ダイアログボックスを開きます。このメニューから、次のいずれかのアクションを実行できます。
    • [全般] タブ:
      • テーブルの幅と高さを設定する
      • セル間隔とパディングを設定する
      • 境界線とキャプションを有効にする
      • テーブルの配置を設定する
    • [詳細] タブ:
      • テーブルスタイルを構成する
      • 境界色を選択する
      • 背景色を選択する
    図 : 5. セルのプロパティ
    TinyMCE v6.8.3 のセルプロパティメニュー
    目的のテーブルセルにカーソルを置いたまま、テーブルメニューを開き、[セルのプロパティ] を選択します。このメニューから、テーブルセルの次のプロパティを設定できます。
    • [全般] タブ:
      • 幅と高さ
      • タイプとスコープ
      • 水平および垂直配置
    • [詳細] タブ:
      • セルスタイル
      • 境界色
      • 背景色
    図 : 6. 行のプロパティ
    TinyMCE v6.8.3 の行プロパティメニュー
    目的の行のテーブルセルにカーソルを置いたまま、テーブルメニューを開き、[行のプロパティ] を選択します。このメニューから、行の次のプロパティを設定できます。
    • [全般] タブ:
      • 行タイプ
      • 位置調整
      • 高さ
    • [詳細] タブ:
      • 行スタイル
      • 境界色
      • 背景色

    テーブルベースのエディターから HTML フィールドにテーブルを貼り付けることもできます。