Manage Table: Editor: Column Advanced Settings: Extended HTML
## Overview
Insert arbitrary HTML before or after the column.
## Prerequisites
1. "Site Administration Permission" is required to configure settings.
## Operation Procedure
In an arbitrary table, open "Manage" → "[Manage Table](/en/manual/table-management)" → "[Editor](/en/manual/table-management-editor)", select the column you want to insert HTML before and after, and click "Advanced Settings".
Extended HTML can be inserted before and after all columns.
![image](https://pleasanter.org/binaries/afa50f733d1e40f4998de9fb0181424d)
Open the "Extended HTML" tab.
|Column name|Content|
|-|-|
|Before field|The HTML you entered is output before the column|
|Before label|The HTML you entered is output before the column name|
|Between label and control|The HTML you entered is output between the column name and the input column|
|After control|The HTML you entered is output after the input column|
|After field|The HTML you entered is output after the column|
Conceptually, the fields, labels, and controls and their context are as follows:
![image](https://pleasanter.org/binaries/2650630aaaf9489fab0de37db37b7bfb)
This is the structure of the HTML DOM tree, and its placement on the screen is not automatically the position of the text in the image above.
### Examples of Setting Before and After Field
- Manage Table
![image](https://pleasanter.org/binaries/c087852f3a094f7285ecd2be4b1b2f62)
- Editor Screen
![image](https://pleasanter.org/binaries/2b2a708d10254e71a32f9f349a2d5557)
### Examples of Setting Before Label, Between Label and Control, and After Control
- Manage Table
![image](https://pleasanter.org/binaries/5f80747f87f14ca89054bd440e8648e1)
- Editor Screen
![image](https://pleasanter.org/binaries/44cf2f1556a54bccb3ee090e1c1d9bc6)
*Due to the specifications of the HTML layout, if the column itself does not have enough margins, the contents set in the extended HTML may unexpectedly overlap with other columns.
In this sample, margins are set for "ClassA" and "ClassB" using the Field CSS function.
Specific CSS adjustments should be verified in advance using a test table.
## Related Information
<div id="ManualList"><ul><li><a href="/en/manual/table-management">Manage Table</a><span>10.02.2024 up</span></li></ul></article>
<ul><li><a href="/en/manual/table-management-editor">Table Management: Editor</a><span>08.13.2024 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />