Inserting and Editing Tables (End-User Guide)

This page is the end-user reference for the table-editing experience inside the SpiceLogic WinForms HTML Editor. It is written for the people using the editor (the report author, the email-template designer, the knowledge-base writer) — not for the C# / VB.NET developer integrating the control. If you are looking for the programming reference, jump to Table Authoring Service.

1. Inserting a table

Place the caret where the table should appear and click the Table button on the second row of the toolbar (the icon shows a small grid). The button opens the Insert Table dialog.

• Rows — the initial number of rows in the new table.
• Columns — the initial number of columns. You can add or remove either dimension later from the cell context menu.
• Width — the overall table width. Pick a pixel value if you need exact print width, or a percentage if the table should fill its container. Percentage is the right choice for tables that go into emails or responsive pages.
• Border — the thickness, in pixels, of the visible cell border. Set to 0 for a layout-only table (see section 6).
• Cell padding — the inside breathing room around the text in every cell.
• Cell spacing — the gap between adjacent cells.

Click OK to insert. The table appears at the caret position and the caret moves into the first cell so you can start typing immediately.

2. Resizing rows and columns

Two ways:

1. Drag a border. Hover over the line between two columns (or two rows). The cursor changes to a double-headed resize arrow. Click and drag to move the boundary. The neighbouring column / row absorbs or releases the difference.
2. Edit Cell Properties. Right-click inside a cell and choose Cell Properties. The dialog lets you set Width and Height explicitly in pixels or percentage. Use this when you need a precise size rather than an eyeballed drag.

For an entire row or column at once, drag the first cell's right (or bottom) border — the editor propagates the change to every cell in the same column (or row).

3. Adding and removing rows and columns

Right-click inside the cell where you want the new row or column to appear. The context menu has the following table commands:

• Insert Row Above / Insert Row Below
• Insert Column to Left / Insert Column to Right
• Delete Row
• Delete Column
• Delete Table — removes the entire table, not just the active cell.

If you delete the last row, the entire table is removed. Same with the last column. This is intentional — an empty table with no rows would be invisible and impossible to interact with.

4. Merging and splitting cells

To merge cells:

1. Click in the first cell, then hold Shift and click in the last cell of the rectangle you want to merge. The selection is highlighted with a light overlay colour.
2. Right-click and choose Merge Cells. The selected cells collapse into one. The content of the top-left cell is preserved; the content of the other cells is concatenated into it.

Rules of thumb.

• The selection must be a rectangle. You cannot merge an L-shape or a diagonal set of cells.
• The cells must be adjacent. Two cells in opposite corners of a table cannot be merged together.
• If Merge Cells is greyed out, your application developer has disabled cell merging (the EnableTableCellMerge option is off). Ask them to enable it if you need this feature.

To split a previously merged cell, right-click inside it and choose Split Cell. The cell breaks back apart along the original row / column boundaries.

5. Cell background, border, and alignment

Right-click inside a cell and choose Cell Properties. The dialog has four useful tabs:

• Size — Width, Height, and whether the cell spans multiple rows or columns (colspan / rowspan values, set automatically when you merge but editable here).
• Alignment — horizontal (Left / Center / Right / Justify) and vertical (Top / Middle / Bottom). Vertical alignment is what most authors miss; the default is Middle.
• Background — pick a colour for the cell. The colour is written as an inline background-color style on the <td> element.
• Border — per-cell border colour and thickness. Useful for highlighting a single row, for example a totals row, without changing the rest of the table.

6. Zero-border (layout-only) tables

Tables are still the most reliable way to lay out HTML email and printable invoices. For these you want the cell grid as a structural skeleton but you do not want the border lines to show in the final output. Two ways to get there:

1. At creation time: in the Insert Table dialog, set Border to 0.
2. On an existing table: right-click inside any cell, choose Table Properties (with the whole table selected — see section 7), and set the Border field to 0. This sets every cell border to zero in one go.

While you author, the cells with a zero border would otherwise be invisible. The editor solves this by drawing dashed grey design-time guidelines on top of zero-border tables. The guidelines never appear in the saved HTML — they exist only on the editing surface. For the technical details and how a developer can customise the guideline style, see Design-time guidelines for zero-border tables.

7. Whole-table selection vs. single-cell selection

This is the single most common confusion authors hit with the editor. The Table Properties and Cell Properties dialogs change which fields are editable depending on what is selected:

• Caret inside one cell — Cell Properties applies to that one cell only. Table Properties still works but the changes are scoped to the table as a whole, not the cell you clicked in.
• Whole table selected (click just outside the top-left corner or use Edit > Select Table) — Table Properties now operates on the entire table, and changing Border here propagates to every cell. Cell Properties becomes ambiguous and most fields are disabled.

If a change you make does not appear to stick — for example, setting Border to 0 from Table Properties while only one cell was selected — check what is selected before opening the dialog. The easiest way to select the whole table is to right-click the top-left cell and choose Select Table.

8. Selection highlight colour

When you Shift-click across multiple cells (section 4), the editor draws a translucent overlay so you can see what is in your selection. The default is a light blue. If the colour clashes with your document background, ask your developer to change TableAuthoringService.SelectedCellBackgroundColor — it is a one-line setting in code. This colour never appears in the saved HTML; it is only on the editing surface.

For developers

Every action on this page can also be driven from C# / VB.NET code. The corresponding service is htmlEditor1.Content.TableAuthoringService. See Table Authoring Service for the full API reference with worked examples for InsertColumn, InsertRow, DeleteColumn, DeleteRow, MergeSelectedCells, CanMergeCells, and the zero-border guideline overlay methods.