テーブルの管理:エディタ:項目の詳細設定:拡張HTML
## 概要
項目の前後に任意のHTMLを挿入します。
## 前提条件
1. 設定を行うには「サイトの管理権限」が必要です。
## 操作手順
任意のテーブルにて「管理」→[テーブルの管理](/ja/manual/table-management)→[エディタ](/ja/manual/table-editor)を開き、HTMLを前後に挿入したい項目を選択して「詳細設定」をクリックしてください。
すべての項目の前後に拡張HTMLは挿入が可能です。
![image](https://pleasanter.org/binaries/e12f15b34f004a2f9937f7421360b593)
「拡張HTML」タブを開いてください。
|項目名|内容|
|-|-|
|フィールドの前|入力したHTMLが項目の前に出力されます|
|ラベルの前|入力したHTMLが項目名の前に出力されます|
|ラベルとコントロールの間|入力したHTMLが項目名と入力欄の間に出力されます|
|コントロールの後|入力したHTMLが入力欄の後に出力されます|
|フィールドの後|入力したHTMLが項目の後に出力されます|
フィールド、ラベル、コントロールおよびこれらの前後関係は概念的には次のようになります。
![image](https://pleasanter.org/binaries/3187dd4c07fb42178a523bebba54ecbe)
こちらはHTML の DOM ツリーの構造であって、画面での配置が自動的に上図の文字の位置となるものではありません。
### フィールドの前およびフィールドの後の設定例
- テーブルの管理
![image](https://pleasanter.org/binaries/fe5b2295c8f1411b9a4f1acfd1e8deb1)
- エディタ画面
![image](https://pleasanter.org/binaries/cae5104527364f8789fe03c1603521c3)
### ラベルの前、ラベルとコントロールの間、コントロールの後の各設定例
- テーブルの管理
![image](https://pleasanter.org/binaries/316e8e92c41d417ea7598bb7e48e6051)
- エディタ画面
![image](https://pleasanter.org/binaries/9a142e8535594bd7a0c4755d13ea71d4)
※ HTML の画面構成の仕様上、項目自体に十分な余白がないと、拡張 HTML で設定した内容と他の項目などとの予期しない重なりが起こり得ます。
なお、本サンプルでは「分類A」「分類B」に、フィールドCSS の機能を利用して、マージンを設定しています。
具体的な CSS の調整は、テスト用のテーブルなどで事前に検証を行ってください。
## 関連情報
<div id="ManualList"><ul><li><a href="/ja/manual/table-editor">テーブル機能:レコードのエディタ画面</a><span>2023/04/12 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management">テーブルの管理</a><span>2024/05/24 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management-editor">テーブルの管理:エディタ</a><span>2024/04/09 up</span></li>
<li><a href="/ja/manual/table-management-editor-columns">テーブルの管理:エディタ:エディタの項目の設定</a><span>2024/04/09 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />