Tables

Create content tables with the table tool. Select cells to insert or delete rows and columns, merge or split cells, and edit table or cell properties with undo support.

Use headers to express row and column relationships, and captions where helpful. Tables represent structured content rather than page layout.

Check scrolling, keyboard navigation and contextual controls on narrow screens. Legacy CMS attributes such as cellpadding, widths and classes must remain meaningful after saving.

Minimal content and expected behavior

export async function editTable(host: HTMLElement) {
    return createClassicEditor(host, {
        data: '<table cellpadding="4"><caption>Products</caption><thead><tr><th scope="col">Name</th><th scope="col">Stock</th></tr></thead><tbody><tr><td>Example</td><td>12</td></tr></tbody></table>',
    });
}

Click a cell to use contextual tools. After changing rows, columns or properties, read getData(). Expect semantic HTML without editor handles or selection styles.

Common errors

Do not mutate cells in the projection DOM. Host CSS determines the rendered saved result; cellpadding, border-collapse and padding rules can jointly affect spacing.

Next steps

Examples · Configuration · Troubleshooting