diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/editor-popover/editor-popover.component.ts b/core-web/libs/new-block-editor/src/lib/editor/components/editor-popover/editor-popover.component.ts
index 4b2ca8947231..dfdd8a6e5cec 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/editor-popover/editor-popover.component.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/editor-popover/editor-popover.component.ts
@@ -44,16 +44,29 @@ import { EditorPopoverService, type PopoverId } from '../../services/editor-popo
     `
 })
 export class EditorPopoverComponent {
-    readonly popoverId = input.required<PopoverId>();
+    /**
+     * Accepts a single popover id or an array of ids. The shell is "open" when the
+     * service's active popover matches any of the listed ids — used by the unified
+     * `dot-table-handle-popover` to host the column / row / selection variants under
+     * a single shell.
+     */
+    readonly popoverId = input.required<PopoverId | readonly PopoverId[]>();
 
-    private readonly manager = inject(EditorPopoverService);
-    private readonly el = inject(ElementRef<HTMLElement>);
-    private readonly zone = inject(NgZone);
-    private readonly doc = inject(DOCUMENT);
-    private readonly injector = inject(Injector);
+    readonly #manager = inject(EditorPopoverService);
+    readonly #el = inject(ElementRef<HTMLElement>);
+    readonly #zone = inject(NgZone);
+    readonly #doc = inject(DOCUMENT);
+    readonly #injector = inject(Injector);
 
-    protected readonly isOpen = computed(
-        () => this.manager.activePopover()?.id === this.popoverId()
+    /** True when the service's active id matches this shell's id (or any of them). */
+    #matchesActive(activeId: PopoverId | undefined): boolean {
+        if (activeId == null) return false;
+        const ids = this.popoverId();
+        return Array.isArray(ids) ? ids.includes(activeId) : ids === activeId;
+    }
+
+    protected readonly isOpen = computed(() =>
+        this.#matchesActive(this.#manager.activePopover()?.id)
     );
     protected readonly floatX = signal(0);
     protected readonly floatY = signal(0);
@@ -65,8 +78,8 @@ export class EditorPopoverComponent {
         // so the popover stays anchored to its trigger rect (e.g. the cursor line) as the
         // user scrolls instead of getting stranded at its initial viewport spot.
         effect((onCleanup) => {
-            const active = this.manager.activePopover();
-            if (!active || active.id !== this.popoverId()) {
+            const active = this.#manager.activePopover();
+            if (!active || !this.#matchesActive(active.id)) {
                 untracked(() => this.positioned.set(false));
                 return;
             }
@@ -78,13 +91,13 @@ export class EditorPopoverComponent {
             };
 
             const update = () => {
-                computePosition(virtualEl, this.el.nativeElement, {
+                computePosition(virtualEl, this.#el.nativeElement, {
                     placement: 'bottom-start',
                     strategy: 'fixed',
                     middleware: [flip(), shift({ padding: 8 })]
                 }).then(({ x, y }) => {
                     const wasPositioned = untracked(() => this.positioned());
-                    this.zone.run(() => {
+                    this.#zone.run(() => {
                         untracked(() => {
                             this.floatX.set(x);
                             this.floatY.set(y);
@@ -94,8 +107,8 @@ export class EditorPopoverComponent {
                     if (!wasPositioned) {
                         // Defer to next render so the visibility binding is painted
                         // before .focus() runs — otherwise it no-ops on a hidden element.
-                        afterNextRender(() => this.focusFirstInput(), {
-                            injector: this.injector
+                        afterNextRender(() => this.#focusFirstInput(), {
+                            injector: this.#injector
                         });
                     }
                 });
@@ -106,12 +119,12 @@ export class EditorPopoverComponent {
             // never fires. Add a manual capture-phase scroll listener — same pattern the
             // slash menu uses — so the popover re-positions when the editor container scrolls.
             const onScroll = () => update();
-            this.doc.addEventListener('scroll', onScroll, { passive: true, capture: true });
+            this.#doc.addEventListener('scroll', onScroll, { passive: true, capture: true });
 
-            const cleanup = autoUpdate(virtualEl, this.el.nativeElement, update);
+            const cleanup = autoUpdate(virtualEl, this.#el.nativeElement, update);
             onCleanup(() => {
                 cleanup();
-                this.doc.removeEventListener('scroll', onScroll, { capture: true });
+                this.#doc.removeEventListener('scroll', onScroll, { capture: true });
             });
         });
 
@@ -120,29 +133,29 @@ export class EditorPopoverComponent {
             if (!this.isOpen()) return;
 
             const onKey = (e: KeyboardEvent) => {
-                if (e.key === 'Escape') this.zone.run(() => this.manager.close());
+                if (e.key === 'Escape') this.#zone.run(() => this.#manager.close());
             };
             const onMouse = (e: MouseEvent) => {
                 const target = e.target as Element | null;
                 if (!target) return;
-                if (this.el.nativeElement.contains(target)) return;
+                if (this.#el.nativeElement.contains(target)) return;
                 // PrimeNG overlay panels (e.g. <p-select> with appendTo="body") render outside
                 // this shell's DOM but logically belong to a control inside an open popover.
                 // Treat clicks inside them as inside the popover so the popover stays open.
                 if (target.closest('.p-overlay, .p-select-overlay')) return;
-                this.zone.run(() => this.manager.close());
+                this.#zone.run(() => this.#manager.close());
             };
-            this.doc.addEventListener('keydown', onKey);
-            this.doc.addEventListener('mousedown', onMouse);
+            this.#doc.addEventListener('keydown', onKey);
+            this.#doc.addEventListener('mousedown', onMouse);
             onCleanup(() => {
-                this.doc.removeEventListener('keydown', onKey);
-                this.doc.removeEventListener('mousedown', onMouse);
+                this.#doc.removeEventListener('keydown', onKey);
+                this.#doc.removeEventListener('mousedown', onMouse);
             });
         });
     }
 
-    private focusFirstInput(): void {
-        const target = this.el.nativeElement.querySelector(
+    #focusFirstInput(): void {
+        const target = this.#el.nativeElement.querySelector(
             'input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])'
         ) as HTMLElement | null;
         target?.focus();
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/table-popover/table-handle-popover.component.ts b/core-web/libs/new-block-editor/src/lib/editor/components/table-popover/table-handle-popover.component.ts
new file mode 100644
index 000000000000..63fcea88dd03
--- /dev/null
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/table-popover/table-handle-popover.component.ts
@@ -0,0 +1,354 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    OnDestroy,
+    Signal,
+    computed,
+    effect,
+    inject,
+    input,
+    signal,
+    untracked
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { Select } from 'primeng/select';
+
+import { Editor } from '@tiptap/core';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { DotMessagePipe } from '@dotcms/ui';
+
+import { EditorPopoverService } from '../../services/editor-popover.service';
+import { EditorPopoverComponent } from '../editor-popover/editor-popover.component';
+
+/**
+ * Unified popover for the three table handles (column / row / multi-cell selection). One
+ * `<dot-editor-popover>` shell is bound to all three popover ids; the rendered actions are
+ * picked from `COLUMN_ACTIONS`, `ROW_ACTIONS` or `SELECTION_ACTIONS` based on which id is
+ * currently active. Only one is open at a time — the `EditorPopoverService.activePopover`
+ * signal already enforces that — so a single component naturally owns all three variants
+ * with no behavior change versus the previous three-component setup.
+ *
+ * Adding a new action: drop an entry into {@link ACTIONS} and append the key to the right
+ * action list. The template's `@for` picks it up automatically.
+ *
+ * Two pieces of UI live outside the action loop:
+ *   - The column variant's scope `<p-select>` (only shown when the active cell is `<th>`).
+ *   - The selection variant's reactive `disabled` state, fed by `editor.can()`.
+ */
+
+type ActionKey =
+    | 'columnInsertLeft'
+    | 'columnInsertRight'
+    | 'columnToggleHeader'
+    | 'columnDelete'
+    | 'rowInsertAbove'
+    | 'rowInsertBelow'
+    | 'rowToggleHeader'
+    | 'rowDelete'
+    | 'selectionMerge'
+    | 'selectionSplit';
+
+interface ActionEntry {
+    testid: string;
+    icon: string;
+    labelKey: string;
+    handler: () => void;
+    variant?: 'danger';
+    disabled?: Signal<boolean>;
+}
+
+@Component({
+    selector: 'dot-table-handle-popover',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [FormsModule, Select, EditorPopoverComponent, DotMessagePipe],
+    template: `
+        <dot-editor-popover [popoverId]="POPOVER_IDS">
+            <div
+                role="menu"
+                [attr.aria-label]="activeAriaLabel() | dm"
+                class="w-56 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg py-1">
+                @for (key of currentActions(); track key) {
+                    @let action = ACTIONS[key];
+                    <button
+                        type="button"
+                        [class]="actionClass(action)"
+                        [disabled]="action.disabled?.() ?? false"
+                        [attr.aria-disabled]="action.disabled?.() ?? false"
+                        [attr.data-testid]="action.testid"
+                        (mousedown)="run($event, action.handler)">
+                        <span aria-hidden="true" class="material-symbols-outlined">
+                            {{ action.icon }}
+                        </span>
+                        <span>{{ action.labelKey | dm }}</span>
+                    </button>
+                }
+
+                @if (showScopeSelect()) {
+                    <div class="flex flex-col gap-1 px-3 py-2">
+                        <label class="text-xs font-medium text-gray-700" for="tbl-col-scope">
+                            {{ 'dot.block.editor.toolbar.table.header-scope' | dm }}
+                        </label>
+                        <p-select
+                            inputId="tbl-col-scope"
+                            appendTo="body"
+                            styleClass="popover-field__select"
+                            [size]="'small'"
+                            [options]="scopeOptions"
+                            [(ngModel)]="scope"
+                            (onChange)="onScopeChange($event.value)" />
+                    </div>
+                }
+            </div>
+        </dot-editor-popover>
+    `,
+    styles: [
+        `
+            /*
+             * PrimeNG escape hatch — can't be Tailwind. The component renders its own root
+             * with class .p-select; we need to stretch that element to fill the popover.
+             * styleClass="popover-field__select" lands on the .p-select root, then this
+             * rule pierces Angular view encapsulation to override PrimeNG's default width.
+             */
+            :host ::ng-deep .popover-field__select.p-select,
+            :host ::ng-deep .popover-field__select .p-select {
+                width: 100%;
+            }
+        `
+    ]
+})
+export class TableHandlePopoverComponent implements OnDestroy {
+    readonly editor = input.required<Editor>();
+    protected readonly manager = inject(EditorPopoverService);
+    private readonly dotMessageService = inject(DotMessageService);
+
+    protected readonly POPOVER_IDS = ['table-column', 'table-row', 'table-selection'] as const;
+
+    // ── Action lists ─────────────────────────────────────────────────────────
+    // Plain lists of action keys per variant. The actual config lives in `ACTIONS` below.
+
+    protected readonly COLUMN_ACTIONS: readonly ActionKey[] = [
+        'columnInsertLeft',
+        'columnInsertRight',
+        'columnToggleHeader',
+        'columnDelete'
+    ];
+
+    protected readonly ROW_ACTIONS: readonly ActionKey[] = [
+        'rowInsertAbove',
+        'rowInsertBelow',
+        'rowToggleHeader',
+        'rowDelete'
+    ];
+
+    protected readonly SELECTION_ACTIONS: readonly ActionKey[] = [
+        'selectionMerge',
+        'selectionSplit'
+    ];
+
+    protected readonly currentActions = computed<readonly ActionKey[]>(() => {
+        const id = this.manager.activePopover()?.id;
+        if (id === 'table-column') return this.COLUMN_ACTIONS;
+        if (id === 'table-row') return this.ROW_ACTIONS;
+        if (id === 'table-selection') return this.SELECTION_ACTIONS;
+        return [];
+    });
+
+    protected readonly activeAriaLabel = computed(() => {
+        const id = this.manager.activePopover()?.id;
+        if (id === 'table-column') return 'dot.block.editor.table.handle.column.aria-label';
+        if (id === 'table-row') return 'dot.block.editor.table.handle.row.aria-label';
+        if (id === 'table-selection') return 'dot.block.editor.table.handle.selection.aria-label';
+        return '';
+    });
+
+    // ── Selection variant: reactive can-merge / can-split ────────────────────
+
+    protected readonly canMerge = signal(false);
+    protected readonly canSplit = signal(false);
+    private readonly canNotMerge = computed(() => !this.canMerge());
+    private readonly canNotSplit = computed(() => !this.canSplit());
+
+    // ── Column variant: scope select state ───────────────────────────────────
+
+    protected readonly scope = signal<string>('');
+    protected readonly showScopeSelect = computed(
+        () =>
+            this.manager.activePopover()?.id === 'table-column' &&
+            (this.manager.tableColumnPayload()?.isHeader ?? false)
+    );
+    protected readonly scopeOptions: ReadonlyArray<{ label: string; value: string }>;
+
+    // ── Action registry ──────────────────────────────────────────────────────
+
+    protected readonly ACTIONS: Record<ActionKey, ActionEntry> = {
+        columnInsertLeft: {
+            testid: 'col-insert-left',
+            icon: 'add_column_left',
+            labelKey: 'dot.block.editor.table.column.insert-left',
+            handler: () => this.runColumnCommand((ed) => ed.chain().focus().addColumnBefore().run())
+        },
+        columnInsertRight: {
+            testid: 'col-insert-right',
+            icon: 'add_column_right',
+            labelKey: 'dot.block.editor.table.column.insert-right',
+            handler: () => this.runColumnCommand((ed) => ed.chain().focus().addColumnAfter().run())
+        },
+        columnToggleHeader: {
+            testid: 'col-toggle-header',
+            icon: 'view_column',
+            labelKey: 'dot.block.editor.table.column.toggle-header',
+            handler: () =>
+                this.runColumnCommand((ed) => ed.chain().focus().toggleHeaderColumn().run())
+        },
+        columnDelete: {
+            testid: 'col-delete',
+            icon: 'delete',
+            labelKey: 'dot.block.editor.table.column.delete',
+            variant: 'danger',
+            handler: () => this.runColumnCommand((ed) => ed.chain().focus().deleteColumn().run())
+        },
+        rowInsertAbove: {
+            testid: 'row-insert-above',
+            icon: 'add_row_above',
+            labelKey: 'dot.block.editor.table.row.insert-above',
+            handler: () => this.runRowCommand((ed) => ed.chain().focus().addRowBefore().run())
+        },
+        rowInsertBelow: {
+            testid: 'row-insert-below',
+            icon: 'add_row_below',
+            labelKey: 'dot.block.editor.table.row.insert-below',
+            handler: () => this.runRowCommand((ed) => ed.chain().focus().addRowAfter().run())
+        },
+        rowToggleHeader: {
+            testid: 'row-toggle-header',
+            icon: 'table_rows',
+            labelKey: 'dot.block.editor.table.row.toggle-header',
+            handler: () => this.runRowCommand((ed) => ed.chain().focus().toggleHeaderRow().run())
+        },
+        rowDelete: {
+            testid: 'row-delete',
+            icon: 'delete',
+            labelKey: 'dot.block.editor.table.row.delete',
+            variant: 'danger',
+            handler: () => this.runRowCommand((ed) => ed.chain().focus().deleteRow().run())
+        },
+        selectionMerge: {
+            testid: 'selection-merge',
+            icon: 'cell_merge',
+            labelKey: 'dot.block.editor.table.selection.merge-cells',
+            disabled: this.canNotMerge,
+            handler: () => this.editor().chain().focus().mergeCells().run()
+        },
+        selectionSplit: {
+            testid: 'selection-split',
+            icon: 'call_split',
+            labelKey: 'dot.block.editor.table.selection.split-cell',
+            disabled: this.canNotSplit,
+            handler: () => this.editor().chain().focus().splitCell().run()
+        }
+    };
+
+    private cleanupCanListener: (() => void) | null = null;
+
+    constructor() {
+        const msg = (key: string) => this.dotMessageService.get(key);
+        this.scopeOptions = [
+            { label: msg('dot.block.editor.toolbar.table.scope.auto'), value: '' },
+            { label: msg('dot.block.editor.toolbar.table.scope.col'), value: 'col' },
+            { label: msg('dot.block.editor.toolbar.table.scope.row'), value: 'row' },
+            { label: msg('dot.block.editor.toolbar.table.scope.colgroup'), value: 'colgroup' },
+            { label: msg('dot.block.editor.toolbar.table.scope.rowgroup'), value: 'rowgroup' }
+        ];
+
+        // Seed scope from the column payload when the popover opens for the column variant.
+        effect(() => {
+            const payload = this.manager.tableColumnPayload();
+            const open = this.manager.isOpen('table-column');
+            untracked(() => {
+                if (open && payload) this.scope.set(payload.headerScope);
+            });
+        });
+
+        // Mirror editor.can().mergeCells() / splitCell() to signals so the selection-variant
+        // action entries can bind a reactive `disabled` state.
+        effect(() => {
+            const ed = this.editor();
+            this.cleanupCanListener?.();
+
+            const update = () => {
+                this.canMerge.set(ed.can().mergeCells());
+                this.canSplit.set(ed.can().splitCell());
+            };
+            update();
+            ed.on('transaction', update);
+            this.cleanupCanListener = () => ed.off('transaction', update);
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.cleanupCanListener?.();
+    }
+
+    // ── Click + command helpers ──────────────────────────────────────────────
+
+    /**
+     * Tailwind utility classes for a menu-item button. Splits the static base classes from
+     * the per-variant color set so the disabled / hover states cascade cleanly without
+     * fighting `:disabled` ordering rules.
+     */
+    protected actionClass(action: ActionEntry): string {
+        const base =
+            'flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent px-3 py-2 text-left text-sm disabled:cursor-not-allowed disabled:hover:bg-transparent';
+        const variant =
+            action.variant === 'danger'
+                ? 'text-red-700 hover:bg-red-100 disabled:text-red-300'
+                : 'text-gray-700 hover:bg-indigo-50 disabled:text-gray-400';
+        return `${base} ${variant}`;
+    }
+
+    protected run(event: MouseEvent, handler: () => void): void {
+        event.preventDefault();
+        event.stopPropagation();
+        handler();
+        this.manager.close();
+    }
+
+    /** Place selection inside the column-payload's cell, then run the chain. */
+    private runColumnCommand(chain: (editor: Editor) => void): void {
+        const payload = this.manager.tableColumnPayload();
+        if (!payload) return;
+        const editor = this.editor();
+        editor
+            .chain()
+            .focus()
+            .setTextSelection(payload.cellPos + 1)
+            .run();
+        chain(editor);
+    }
+
+    /** Place selection inside the row-payload's cell, then run the chain. */
+    private runRowCommand(chain: (editor: Editor) => void): void {
+        const payload = this.manager.tableRowPayload();
+        if (!payload) return;
+        const editor = this.editor();
+        editor
+            .chain()
+            .focus()
+            .setTextSelection(payload.cellPos + 1)
+            .run();
+        chain(editor);
+    }
+
+    protected onScopeChange(value: string): void {
+        const payload = this.manager.tableColumnPayload();
+        if (!payload) return;
+        this.editor()
+            .chain()
+            .focus()
+            .setTextSelection(payload.cellPos + 1)
+            .updateAttributes('tableHeader', { scope: value === '' ? null : value })
+            .run();
+    }
+}
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/table-properties-popover/table-properties-popover.component.ts b/core-web/libs/new-block-editor/src/lib/editor/components/table-properties-popover/table-properties-popover.component.ts
new file mode 100644
index 000000000000..61a0fcb3328b
--- /dev/null
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/table-properties-popover/table-properties-popover.component.ts
@@ -0,0 +1,165 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    inject,
+    input,
+    untracked
+} from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+import { Editor } from '@tiptap/core';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+import { EditorPopoverService } from '../../services/editor-popover.service';
+import { EditorPopoverComponent } from '../editor-popover/editor-popover.component';
+
+const EMPTY_VALUES = {
+    caption: '',
+    hasCaption: false,
+    ariaLabel: '',
+    ariaLabelledby: ''
+};
+
+/**
+ * Toolbar-anchored a11y popover for the active table. Edits:
+ *
+ *   - **Caption** — sets the table's `caption` attribute (rendered as a `<caption>` child).
+ *   - **aria-label** — accessible name for the `<table>`.
+ *   - **aria-labelledby** — references an `id` of an external label.
+ *
+ * Phase 3: stripped down from the prior `TableActionsPopover` — merge / split / delete-table
+ * were dropped as out-of-scope for the a11y ticket. Opened from the new `table_edit` toolbar
+ * button only when the cursor is inside a table.
+ */
+@Component({
+    selector: 'dot-table-properties-popover',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [ReactiveFormsModule, EditorPopoverComponent, DotMessagePipe],
+    template: `
+        <dot-editor-popover popoverId="table-properties">
+            <div
+                [attr.aria-label]="'dot.block.editor.dialog.table-properties.title' | dm"
+                class="w-80 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg">
+                <form
+                    [formGroup]="form"
+                    class="flex flex-col gap-3 p-3"
+                    (keydown.enter)="$event.preventDefault(); onApply()">
+                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide m-0">
+                        {{ 'dot.block.editor.dialog.table-properties.title' | dm }}
+                    </p>
+
+                    <label class="flex items-center gap-2 cursor-pointer" for="tbl-has-caption">
+                        <input
+                            id="tbl-has-caption"
+                            type="checkbox"
+                            formControlName="hasCaption"
+                            data-testid="tbl-has-caption"
+                            class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
+                        <span class="text-sm text-gray-700">
+                            {{ 'dot.block.editor.dialog.table-properties.add-caption' | dm }}
+                        </span>
+                    </label>
+
+                    <div class="flex flex-col gap-1">
+                        <label for="tbl-caption" class="text-xs font-medium text-gray-700">
+                            {{ 'dot.block.editor.dialog.table-properties.caption' | dm }}
+                        </label>
+                        <input
+                            id="tbl-caption"
+                            type="text"
+                            formControlName="caption"
+                            data-testid="tbl-caption"
+                            [attr.disabled]="form.controls.hasCaption.value ? null : true"
+                            class="w-full rounded border border-gray-300 px-2 py-1 text-sm focus:border-indigo-500 focus:outline-none disabled:bg-gray-100 disabled:text-gray-400" />
+                    </div>
+
+                    <div class="flex flex-col gap-1">
+                        <label for="tbl-aria-label" class="text-xs font-medium text-gray-700">
+                            {{ 'dot.block.editor.dialog.table-properties.aria-label' | dm }}
+                        </label>
+                        <input
+                            id="tbl-aria-label"
+                            type="text"
+                            formControlName="ariaLabel"
+                            data-testid="tbl-aria-label"
+                            class="w-full rounded border border-gray-300 px-2 py-1 text-sm focus:border-indigo-500 focus:outline-none" />
+                    </div>
+
+                    <div class="flex flex-col gap-1">
+                        <label for="tbl-aria-labelledby" class="text-xs font-medium text-gray-700">
+                            {{ 'dot.block.editor.dialog.table-properties.aria-labelledby' | dm }}
+                        </label>
+                        <input
+                            id="tbl-aria-labelledby"
+                            type="text"
+                            formControlName="ariaLabelledby"
+                            data-testid="tbl-aria-labelledby"
+                            class="w-full rounded border border-gray-300 px-2 py-1 text-sm focus:border-indigo-500 focus:outline-none" />
+                    </div>
+
+                    <div class="flex justify-end gap-2 pt-1">
+                        <button
+                            type="button"
+                            data-testid="tbl-cancel"
+                            (mousedown)="$event.preventDefault(); manager.close()"
+                            class="rounded px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300">
+                            {{ 'dot.common.cancel' | dm }}
+                        </button>
+                        <button
+                            type="button"
+                            data-testid="tbl-apply"
+                            (mousedown)="$event.preventDefault(); onApply()"
+                            class="rounded bg-indigo-500 px-3 py-1 text-sm text-white hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-400">
+                            {{ 'dot.common.apply' | dm }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </dot-editor-popover>
+    `
+})
+export class TablePropertiesPopoverComponent {
+    readonly editor = input.required<Editor>();
+    protected readonly manager = inject(EditorPopoverService);
+
+    readonly form = new FormGroup({
+        hasCaption: new FormControl<boolean>(false, { nonNullable: true }),
+        caption: new FormControl<string>('', { nonNullable: true }),
+        ariaLabel: new FormControl<string>('', { nonNullable: true }),
+        ariaLabelledby: new FormControl<string>('', { nonNullable: true })
+    });
+
+    constructor() {
+        effect(() => {
+            const payload = this.manager.tablePropertiesPayload();
+            const open = this.manager.isOpen('table-properties');
+
+            untracked(() => {
+                if (open && payload) {
+                    this.form.reset(payload.initialValues);
+                } else if (!open) {
+                    this.form.reset(EMPTY_VALUES);
+                }
+            });
+        });
+    }
+
+    onApply(): void {
+        const { hasCaption, caption, ariaLabel, ariaLabelledby } = this.form.getRawValue();
+
+        // All three a11y fields are stored as table attributes — set them in one shot.
+        this.editor()
+            .chain()
+            .focus()
+            .updateAttributes('table', {
+                caption: hasCaption && caption.trim() ? caption.trim() : null,
+                ariaLabel: ariaLabel?.trim() ? ariaLabel.trim() : null,
+                ariaLabelledby: ariaLabelledby?.trim() ? ariaLabelledby.trim() : null
+            })
+            .run();
+
+        this.manager.close();
+    }
+}
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/editor-toolbar.store.ts b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/editor-toolbar.store.ts
index b038a46ddd95..4f7540c8410d 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/editor-toolbar.store.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/editor-toolbar.store.ts
@@ -29,9 +29,9 @@ export class EditorToolbarStore {
     readonly textAlign = signal<'left' | 'center' | 'right' | 'justify'>('left');
     readonly isSuperscript = signal(false);
     readonly isSubscript = signal(false);
+    /** True when the editor selection is anywhere inside a table — drives the toolbar's
+     *  `table_edit` (Table properties) button's enabled state. */
     readonly isInTable = signal(false);
-    readonly canMergeCells = signal(false);
-    readonly canSplitCell = signal(false);
     readonly selectedContentlet = signal<ContentletEditEvent | null>(null);
 
     connect(editor: Editor): () => void {
@@ -84,10 +84,7 @@ export class EditorToolbarStore {
                 );
                 this.isSuperscript.set(editor.isActive('superscript'));
                 this.isSubscript.set(editor.isActive('subscript'));
-                this.isInTable.set(editor.isActive('table'));
-                this.canMergeCells.set(editor.can().mergeCells());
-                this.canSplitCell.set(editor.can().splitCell());
-
+                this.isInTable.set(inTable);
                 const { selection } = editor.state;
                 const contentletNode =
                     selection instanceof NodeSelection && selection.node.type.name === 'dotContent'
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.html b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.html
index 046fce0fe90c..a3f221ed841e 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.html
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.html
@@ -425,168 +425,27 @@
             (mousedown)="openTableDialog($event)">
             <span aria-hidden="true" class="material-symbols-outlined">table</span>
         </button>
-    }
-
-    @if (isAllowed('table')) {
-        <span aria-hidden="true" [class]="DIVIDER_CLASS"></span>
-
-        <!-- Insert row / column -->
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.insert-row-above' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.insert-row-above' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable()"
-            [attr.aria-disabled]="!state.isInTable()"
-            [class]="btnClass(false)"
-            (click)="tableInsertRowAbove()">
-            <span aria-hidden="true" class="material-symbols-outlined">add_row_above</span>
-        </button>
         <button
             type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.insert-row-below' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.insert-row-below' | dm"
+            [attr.aria-label]="'dot.block.editor.toolbar.table.properties' | dm"
+            [pTooltip]="'dot.block.editor.toolbar.table.properties' | dm"
             [tooltipPosition]="TOOLTIP_POSITION"
             [tooltipOptions]="overlayTooltipOptions()"
             [showDelay]="TOOLTIP_SHOW_DELAY"
+            data-testid="toolbar-table-properties"
             [disabled]="!state.isInTable()"
             [attr.aria-disabled]="!state.isInTable()"
             [class]="btnClass(false)"
-            (click)="tableInsertRowBelow()">
-            <span aria-hidden="true" class="material-symbols-outlined">add_row_below</span>
-        </button>
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.insert-column-left' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.insert-column-left' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable()"
-            [attr.aria-disabled]="!state.isInTable()"
-            [class]="btnClass(false)"
-            (click)="tableInsertColLeft()">
-            <span aria-hidden="true" class="material-symbols-outlined">add_column_left</span>
-        </button>
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.insert-column-right' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.insert-column-right' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable()"
-            [attr.aria-disabled]="!state.isInTable()"
-            [class]="btnClass(false)"
-            (click)="tableInsertColRight()">
-            <span aria-hidden="true" class="material-symbols-outlined">add_column_right</span>
-        </button>
-
-        <span aria-hidden="true" [class]="DIVIDER_CLASS"></span>
-
-        <!-- Merge / split -->
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.merge-cells' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.merge-cells' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable() || !state.canMergeCells()"
-            [attr.aria-disabled]="!state.isInTable() || !state.canMergeCells()"
-            [class]="btnClass(false)"
-            (click)="tableMerge()">
-            <span aria-hidden="true" class="material-symbols-outlined">cell_merge</span>
-        </button>
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.split-cell' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.split-cell' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable() || !state.canSplitCell()"
-            [attr.aria-disabled]="!state.isInTable() || !state.canSplitCell()"
-            [class]="btnClass(false)"
-            (click)="tableSplit()">
-            <span aria-hidden="true" class="material-symbols-outlined">call_split</span>
-        </button>
-
-        <span aria-hidden="true" [class]="DIVIDER_CLASS"></span>
-
-        <!-- Header toggles -->
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.toggle-row-header' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.toggle-row-header' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable()"
-            [attr.aria-disabled]="!state.isInTable()"
-            [class]="btnClass(false)"
-            (click)="tableToggleRowHeader()">
-            <span aria-hidden="true" class="material-symbols-outlined">table_rows</span>
-        </button>
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.toggle-column-header' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.toggle-column-header' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable()"
-            [attr.aria-disabled]="!state.isInTable()"
-            [class]="btnClass(false)"
-            (click)="tableToggleColHeader()">
-            <span aria-hidden="true" class="material-symbols-outlined">view_column</span>
-        </button>
-
-        <span aria-hidden="true" [class]="DIVIDER_CLASS"></span>
-
-        <!-- Delete -->
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.delete-row' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.delete-row' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable()"
-            [attr.aria-disabled]="!state.isInTable()"
-            [class]="btnClass(false)"
-            (click)="tableDeleteRow()">
-            <span aria-hidden="true" class="material-symbols-outlined">border_horizontal</span>
-        </button>
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.delete-column' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.delete-column' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable()"
-            [attr.aria-disabled]="!state.isInTable()"
-            [class]="btnClass(false)"
-            (click)="tableDeleteCol()">
-            <span aria-hidden="true" class="material-symbols-outlined">border_vertical</span>
-        </button>
-        <button
-            type="button"
-            [attr.aria-label]="'dot.block.editor.toolbar.table.delete-table' | dm"
-            [pTooltip]="'dot.block.editor.toolbar.table.delete-table' | dm"
-            [tooltipPosition]="TOOLTIP_POSITION"
-            [tooltipOptions]="overlayTooltipOptions()"
-            [showDelay]="TOOLTIP_SHOW_DELAY"
-            [disabled]="!state.isInTable()"
-            [attr.aria-disabled]="!state.isInTable()"
-            [class]="btnClass(false)"
-            (click)="tableDeleteTable()">
-            <span aria-hidden="true" class="material-symbols-outlined">border_clear</span>
+            (mousedown)="openTablePropertiesDialog($event)">
+            <span aria-hidden="true" class="material-symbols-outlined">table_edit</span>
         </button>
     }
+
+    <!--
+        Per-row / per-column actions are rendered INSIDE each cell by the
+        DotTableCell / DotTableHeader NodeViews — see `extensions/table-extensions.ts`.
+        The toolbar keeps only "Insert table" + "Table properties" (a11y) above.
+    -->
     @if (isAllowed('emoji')) {
         <button
             type="button"
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.ts b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.ts
index aa462fc0cfe1..c266948de022 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.ts
@@ -567,50 +567,47 @@ export class ToolbarComponent implements OnDestroy {
         });
     }
 
-    // ── Table actions ────────────────────────────────────────────────────────
+    // Row / column actions are rendered inline INSIDE each cell by the DotTableCell /
+    // DotTableHeader NodeViews — see `extensions/table-extensions.ts` and
+    // `extensions/table-active-cells.plugin.ts`. The toolbar keeps the "Insert table"
+    // entry + the `table_edit` button below for a11y properties (caption / aria).
 
-    protected tableInsertRowAbove(): void {
-        this.editor().chain().focus().addRowBefore().run();
-    }
-
-    protected tableInsertRowBelow(): void {
-        this.editor().chain().focus().addRowAfter().run();
-    }
-
-    protected tableInsertColLeft(): void {
-        this.editor().chain().focus().addColumnBefore().run();
-    }
-
-    protected tableInsertColRight(): void {
-        this.editor().chain().focus().addColumnAfter().run();
-    }
+    // ── Table properties (caption + aria-*) ──────────────────────────────────
 
-    protected tableMerge(): void {
-        this.editor().chain().focus().mergeCells().run();
-    }
-
-    protected tableSplit(): void {
-        this.editor().chain().focus().splitCell().run();
-    }
-
-    protected tableToggleRowHeader(): void {
-        this.editor().chain().focus().toggleHeaderRow().run();
-    }
+    protected openTablePropertiesDialog(event: MouseEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
 
-    protected tableToggleColHeader(): void {
-        this.editor().chain().focus().toggleHeaderColumn().run();
-    }
+        if (this.popovers.isOpen('table-properties')) {
+            this.popovers.close();
+            return;
+        }
 
-    protected tableDeleteRow(): void {
-        this.editor().chain().focus().deleteRow().run();
-    }
+        const editor = this.editor();
+        const tableAttrs = editor.getAttributes('table');
+        const { captionText, hasCaption } = this.readActiveTableCaption(editor);
+        const btn = event.currentTarget as HTMLElement;
 
-    protected tableDeleteCol(): void {
-        this.editor().chain().focus().deleteColumn().run();
+        this.popovers.openTableProperties(() => btn.getBoundingClientRect(), {
+            initialValues: {
+                caption: captionText,
+                hasCaption,
+                ariaLabel: tableAttrs['ariaLabel'] ?? '',
+                ariaLabelledby: tableAttrs['ariaLabelledby'] ?? ''
+            }
+        });
     }
 
-    protected tableDeleteTable(): void {
-        this.editor().chain().focus().deleteTable().run();
+    /** Reads the active table's `caption` attribute from the current selection. */
+    private readActiveTableCaption(editor: Editor): { captionText: string; hasCaption: boolean } {
+        const { $from } = editor.state.selection;
+        for (let depth = $from.depth; depth >= 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name !== 'table') continue;
+            const caption = (node.attrs['caption'] as string | null) ?? '';
+            return { captionText: caption, hasCaption: caption.length > 0 };
+        }
+        return { captionText: '', hasCaption: false };
     }
 
     // ── Keyboard navigation (roving tabindex) ────────────────────────────────
diff --git a/core-web/libs/new-block-editor/src/lib/editor/editor.component.css b/core-web/libs/new-block-editor/src/lib/editor/editor.component.css
index 248e3bdba06d..2fdacfe9d65c 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/editor.component.css
+++ b/core-web/libs/new-block-editor/src/lib/editor/editor.component.css
@@ -207,19 +207,30 @@
     border-collapse: collapse;
     width: 100%;
     table-layout: fixed;
-    overflow: hidden;
+    /* No `overflow: hidden` — the cell-anchored handles (.dot-cell-handle) sit on the
+       table's outer border via negative top/left offsets and would otherwise be clipped. */
     margin: 0;
 }
 
 :host ::ng-deep .tiptap td,
 :host ::ng-deep .tiptap th {
     border: 1px solid #e5e7eb;
-    padding: 8px 12px;
+    padding: 4px 8px;
     vertical-align: top;
     position: relative;
     min-width: 80px;
 }
 
+/*
+ * Tailwind Typography's `prose` adds vertical margins to <p> globally; inside a table
+ * cell those margins compound with the cell's padding and make every cell feel bloated.
+ * Reset paragraph margins inside the NodeView's content wrapper so the cell padding
+ * (4px 8px above) is the only spacing.
+ */
+:host ::ng-deep .tiptap .dot-cell-content > * {
+    margin: 0;
+}
+
 :host ::ng-deep .tiptap th {
     background-color: #f9fafb;
     font-weight: 600;
@@ -242,7 +253,95 @@
 }
 
 :host ::ng-deep .tiptap .tableWrapper {
-    overflow-x: auto;
+    /* `overflow: visible` (instead of `overflow-x: auto`) so the column / row handles can
+       protrude past the table's outer edges without being clipped. Wide-table horizontal
+       scrolling is handled by the editor's outer scroll container; combined with
+       `table-layout: fixed; width: 100%` above, tables stay within the editor width by
+       resizing columns instead of overflowing. */
+    overflow: visible;
+}
+
+/* ─── Table contextual handles (cell-anchored NodeView) ─── */
+/*
+ * Handles live INSIDE the cell DOM (rendered by the DotTableCell / DotTableHeader
+ * NodeViews). Pure CSS positioning — no floating-ui, no autoUpdate. The cell's
+ * `position: relative` is already set on the .tiptap td/th rule above; the handles
+ * absolute-position themselves against the cell.
+ */
+:host ::ng-deep .tiptap .dot-cell-handle {
+    position: absolute;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 1px solid #c7d2fe;
+    border-radius: 4px;
+    background-color: #ffffff;
+    color: #4f46e5;
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    z-index: 5;
+}
+
+:host ::ng-deep .tiptap .dot-cell-handle .material-symbols-outlined {
+    font-size: 14px;
+    line-height: 1;
+}
+
+:host ::ng-deep .tiptap .dot-cell-handle:hover {
+    background-color: #eef2ff;
+    color: #4338ca;
+}
+
+:host ::ng-deep .tiptap .dot-cell-handle--col {
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+:host ::ng-deep .tiptap .dot-cell-handle--row {
+    top: 50%;
+    left: -12px;
+    transform: translateY(-50%);
+}
+
+:host ::ng-deep .tiptap .dot-cell-handle--selection {
+    top: 50%;
+    right: -12px;
+    transform: translateY(-50%);
+}
+
+/*
+ * Visibility rules — the TableActiveCellsPlugin marks every cell in the cursor's
+ * column with `is-active-column` and every cell in the cursor's row with `is-active-row`.
+ * For multi-cell `CellSelection`, only the bottom-right cell of the selection gets
+ * `is-selection-anchor` (column / row decorations are skipped in that branch).
+ *
+ * Column handle only shows on the first-row cell of the active column; row handle only
+ * shows on the first cell of the active row; selection handle only shows on the chosen
+ * anchor cell.
+ */
+:host ::ng-deep .tiptap tbody > tr:first-child > .is-active-column > .dot-cell-handle--col {
+    display: inline-flex;
+}
+
+:host ::ng-deep .tiptap tbody > tr > .is-active-row:first-child > .dot-cell-handle--row {
+    display: inline-flex;
+}
+
+:host ::ng-deep .tiptap .is-selection-anchor > .dot-cell-handle--selection {
+    display: inline-flex;
+}
+
+/*
+ * Even-row-count selections: the plugin anchors to the cell at floor(N/2) from the top.
+ * Override the default `top: 50%` so the handle sits at the cell's top border — which is
+ * the boundary between the two middle rows = the selection's vertical center.
+ */
+:host ::ng-deep .tiptap .is-selection-anchor--edge > .dot-cell-handle--selection {
+    top: 0;
 }
 
 /* ─── Placeholders ──────────────────────────────────────── */
diff --git a/core-web/libs/new-block-editor/src/lib/editor/editor.component.ts b/core-web/libs/new-block-editor/src/lib/editor/editor.component.ts
index 0c14c27ffcc0..fba0ff336f66 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/editor.component.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/editor.component.ts
@@ -2,17 +2,17 @@ import { TiptapEditorDirective } from 'ngx-tiptap';
 
 import { DOCUMENT } from '@angular/common';
 import {
+    booleanAttribute,
     ChangeDetectionStrategy,
     Component,
-    Injector,
-    OnDestroy,
-    booleanAttribute,
     computed,
     effect,
     forwardRef,
     inject,
+    Injector,
     input,
     numberAttribute,
+    OnDestroy,
     output,
     signal
 } from '@angular/core';
@@ -34,7 +34,9 @@ import { ImagePropertiesPopoverComponent } from './components/image-popover/imag
 import { LinkPopoverComponent } from './components/link-popover/link-popover.component';
 import { SlashMenuComponent } from './components/slash-menu/slash-menu.component';
 import { SlashMenuService } from './components/slash-menu/slash-menu.service';
+import { TableHandlePopoverComponent } from './components/table-popover/table-handle-popover.component';
 import { TablePopoverComponent } from './components/table-popover/table-popover.component';
+import { TablePropertiesPopoverComponent } from './components/table-properties-popover/table-properties-popover.component';
 import { EditorToolbarStore } from './components/toolbar/editor-toolbar.store';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
 import { syncCharacterStatsFromEditor } from './editor-character-stats';
@@ -135,12 +137,7 @@ function normalizeEditorContent(
         EditorModalService,
         EditorToolbarStore,
         ContentletEditUrlService,
-        // Component-scoped DialogService so each editor instance has its own PrimeNG
-        // dynamic-dialog factory; prevents the AI image prompt opened from one editor
-        // from accidentally being closed by another editor on the same page.
         DialogService,
-        // Component-scoped ConfirmationService pairs 1:1 with the local <p-confirmdialog>
-        // below — keeps two editors on the same page from sharing confirmation state.
         ConfirmationService,
         {
             provide: NG_VALUE_ACCESSOR,
@@ -153,6 +150,8 @@ function normalizeEditorContent(
         SlashMenuComponent,
         EmojiPickerComponent,
         TablePopoverComponent,
+        TableHandlePopoverComponent,
+        TablePropertiesPopoverComponent,
         ImagePropertiesPopoverComponent,
         LinkPopoverComponent,
         AssetByUrlPopoverComponent,
@@ -219,6 +218,8 @@ function normalizeEditorContent(
                     <dot-slash-menu />
                     <dot-emoji-picker [editor]="ed" />
                     <dot-table-popover [editor]="ed" />
+                    <dot-table-handle-popover [editor]="ed" />
+                    <dot-table-properties-popover [editor]="ed" />
                     <dot-image-popover [editor]="ed" />
                     <dot-link-popover [editor]="ed" />
                     <dot-asset-by-url-popover [editor]="ed" />
@@ -467,7 +468,7 @@ export class DotCMSEditorComponent implements OnDestroy, ControlValueAccessor {
     /** Inner panel sizing and chrome classes (fullscreen vs default card layout). */
     protected readonly panelClass = computed(() =>
         this.isFullscreen()
-            ? 'relative flex flex-col w-[90vw] max-w-7xl h-[90vh] rounded-lg border border-gray-200 bg-white overflow-hidden'
+            ? 'relative flex flex-col w-[90vw] h-[90vh] rounded-lg border border-gray-200 bg-white overflow-hidden'
             : 'relative rounded-lg border border-gray-200'
     );
 
diff --git a/core-web/libs/new-block-editor/src/lib/editor/extensions/editor-extensions.ts b/core-web/libs/new-block-editor/src/lib/editor/extensions/editor-extensions.ts
index 81568d989d11..a4c4027d9fe5 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/extensions/editor-extensions.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/extensions/editor-extensions.ts
@@ -8,7 +8,6 @@ import Emoji, { emojis } from '@tiptap/extension-emoji';
 import Placeholder from '@tiptap/extension-placeholder';
 import Subscript from '@tiptap/extension-subscript';
 import Superscript from '@tiptap/extension-superscript';
-import { TableKit } from '@tiptap/extension-table';
 import TextAlign from '@tiptap/extension-text-align';
 import { Youtube } from '@tiptap/extension-youtube';
 import StarterKit from '@tiptap/starter-kit';
@@ -30,6 +29,10 @@ import {
 import { Video } from './nodes/video.extension';
 import { SelectionPreserveExtension } from './selection-preserve.extension';
 import { createSlashCommandExtension } from './slash-command.extension';
+import { TableActiveCellsPlugin } from './table-active-cells.plugin';
+import { createDotTableExtensions } from './table-extensions';
+
+import { EditorPopoverService } from '../services/editor-popover.service';
 
 import type { SlashMenuService } from '../components/slash-menu/slash-menu.service';
 
@@ -80,7 +83,30 @@ export function createEditorExtensions(
         ...(has('codeBlock') ? [createCodeBlock(injector, lowlight)] : []),
         createBlockGutterDragHandle(t('dot.block.editor.gutter.add-block')),
         CharacterCount,
-        ...(has('table') ? [TableKit.configure({ table: { resizable: true } })] : []),
+        ...(has('table')
+            ? [
+                  ...createDotTableExtensions({
+                      table: { resizable: true },
+                      cell: {
+                          popovers: injector.get(EditorPopoverService),
+                          columnAriaLabel: t('dot.block.editor.table.handle.column.aria-label'),
+                          rowAriaLabel: t('dot.block.editor.table.handle.row.aria-label'),
+                          selectionAriaLabel: t(
+                              'dot.block.editor.table.handle.selection.aria-label'
+                          )
+                      },
+                      header: {
+                          popovers: injector.get(EditorPopoverService),
+                          columnAriaLabel: t('dot.block.editor.table.handle.column.aria-label'),
+                          rowAriaLabel: t('dot.block.editor.table.handle.row.aria-label'),
+                          selectionAriaLabel: t(
+                              'dot.block.editor.table.handle.selection.aria-label'
+                          )
+                      }
+                  }),
+                  TableActiveCellsPlugin
+              ]
+            : []),
         ...(has('image') ? [DotImage] : []),
         ...(has('link')
             ? [
diff --git a/core-web/libs/new-block-editor/src/lib/editor/extensions/table-active-cells.plugin.ts b/core-web/libs/new-block-editor/src/lib/editor/extensions/table-active-cells.plugin.ts
new file mode 100644
index 000000000000..3c4de8f84b89
--- /dev/null
+++ b/core-web/libs/new-block-editor/src/lib/editor/extensions/table-active-cells.plugin.ts
@@ -0,0 +1,208 @@
+import { Extension } from '@tiptap/core';
+import { Node as PMNode, ResolvedPos } from '@tiptap/pm/model';
+import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state';
+import { CellSelection, TableMap } from '@tiptap/pm/tables';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+
+const PLUGIN_KEY = new PluginKey<DecorationSet>('tableActiveCells');
+
+/**
+ * Marks cells with CSS classes that drive which handles the NodeView reveals:
+ *
+ *   - **Single-cell selection** (caret in one cell): every cell in the cursor's column gets
+ *     `is-active-column`, every cell in the cursor's row gets `is-active-row`. CSS shows the
+ *     column handle on the first-row cell of the active column, and the row handle on the
+ *     first-column cell of the active row.
+ *   - **Multi-cell `CellSelection`** (drag-select across 2+ cells): same column / row
+ *     decorations anchored to the selection's **anchor cell**, PLUS an `is-selection-anchor`
+ *     decoration on a chosen middle-row cell of the selection's right column. CSS surfaces
+ *     all three handles (column / row / selection-merge) simultaneously.
+ *
+ * `prosemirror-tables` already composes multiple `Decoration.node` classes on the same cell
+ * (e.g. `selectedCell`), so adding our own classes never clobbers theirs.
+ */
+export const TableActiveCellsPlugin = Extension.create({
+    name: 'tableActiveCells',
+
+    addProseMirrorPlugins() {
+        return [
+            new Plugin<DecorationSet>({
+                key: PLUGIN_KEY,
+                state: {
+                    init: (_, state) => buildDecorations(state),
+                    apply: (tr, oldSet, _oldState, newState) => {
+                        // Only recompute when the selection moved or the doc changed —
+                        // skipping pure metadata transactions keeps this cheap.
+                        if (!tr.docChanged && !tr.selectionSet) return oldSet;
+                        return buildDecorations(newState);
+                    }
+                },
+                props: {
+                    decorations(state) {
+                        return PLUGIN_KEY.getState(state) ?? null;
+                    }
+                }
+            })
+        ];
+    }
+});
+
+function buildDecorations(state: EditorState): DecorationSet {
+    // For a CellSelection, `state.selection.$from` resolves at the row depth (not inside
+    // a cell), so `findTableAt` would return null. Use `$anchorCell` instead — it's a
+    // resolved position whose depth IS at the row, and whose `pos` points right before
+    // the anchor cell.
+    const isCellSelection = state.selection instanceof CellSelection;
+    const tableInfo = isCellSelection
+        ? findTableFromCellAnchor((state.selection as CellSelection).$anchorCell)
+        : findTableAt(state.selection.$from);
+    if (!tableInfo) return DecorationSet.empty;
+
+    const { tableNode, tablePos, cellPos } = tableInfo;
+    const map = TableMap.get(tableNode);
+    const cellOffset = cellPos - tablePos - 1;
+    const cellIndex = map.map.indexOf(cellOffset);
+    if (cellIndex < 0) return DecorationSet.empty;
+
+    const activeCol = cellIndex % map.width;
+    const activeRow = Math.floor(cellIndex / map.width);
+
+    const decorations: Decoration[] = [];
+
+    // Column / row decorations are always emitted — they drive the top + left handles.
+    // Under a multi-cell selection they anchor to the selection's anchor cell, so the
+    // column handle sits over that cell's column and the row handle sits next to its row.
+    tableNode.forEach((row, rowOffset, rowIndex) => {
+        const rowStart = tablePos + 1 + rowOffset;
+        row.forEach((cell, cellOffsetInRow, colIndex) => {
+            const isActiveCol = colIndex === activeCol;
+            const isActiveRow = rowIndex === activeRow;
+            if (!isActiveCol && !isActiveRow) return;
+
+            const classes: string[] = [];
+            if (isActiveCol) classes.push('is-active-column');
+            if (isActiveRow) classes.push('is-active-row');
+
+            const cellStart = rowStart + 1 + cellOffsetInRow;
+            decorations.push(
+                Decoration.node(cellStart, cellStart + cell.nodeSize, {
+                    class: classes.join(' ')
+                })
+            );
+        });
+    });
+
+    // Selection-anchor decoration on top: surfaces the merge / split handle for 2+ cell
+    // selections. The column / row handles stay visible alongside it.
+    if (isCellSelection) {
+        const selectionDecoration = buildSelectionAnchorDecoration(
+            state.selection as CellSelection,
+            tableNode,
+            tablePos,
+            map
+        );
+        if (selectionDecoration) decorations.push(selectionDecoration);
+    }
+
+    return DecorationSet.create(state.doc, decorations);
+}
+
+/**
+ * For a `CellSelection` spanning 2+ cells, return a node decoration that marks a single
+ * cell in the rightmost column with `is-selection-anchor`. The chosen cell + CSS position
+ * combination places the handle at the **vertical center of the selection** (not just the
+ * vertical center of one cell):
+ *
+ *   - **Odd row count**: pick the middle row → CSS keeps the default `top: 50%` so the
+ *     handle sits at the cell's center, which IS the selection's center.
+ *   - **Even row count**: pick the cell at `floor(N/2)` from the top → CSS applies the
+ *     `is-selection-anchor--edge` override (`top: 0`) so the handle sits at that cell's
+ *     **top border**, which is the boundary between the two middle rows = the selection's
+ *     vertical center.
+ *
+ * Returns `null` for a 1×1 selection so the regular column / row decorations stay in play.
+ */
+function buildSelectionAnchorDecoration(
+    selection: CellSelection,
+    tableNode: PMNode,
+    tablePos: number,
+    map: TableMap
+): Decoration | null {
+    const anchorOffset = selection.$anchorCell.pos - tablePos - 1;
+    const headOffset = selection.$headCell.pos - tablePos - 1;
+    const rect = map.rectBetween(anchorOffset, headOffset);
+
+    // Single-cell CellSelection — fall back to the column / row decorations.
+    if (rect.right - rect.left <= 1 && rect.bottom - rect.top <= 1) return null;
+
+    const rowCount = rect.bottom - rect.top;
+    const anchorRow = rect.top + Math.floor(rowCount / 2);
+    const anchorCol = rect.right - 1;
+    const cellIndex = anchorRow * map.width + anchorCol;
+    const cellOffset = map.map[cellIndex];
+    if (cellOffset == null) return null;
+
+    const cellPos = tablePos + 1 + cellOffset;
+    const cellNode = tableNode.nodeAt(cellOffset);
+    if (!cellNode) return null;
+
+    // For an even row count we'd normally use the `--edge` variant (handle at the top
+    // border of the lower-half cell, which lines up with the selection's vertical center).
+    // BUT when the anchor cell is **merged across that boundary** — i.e. the cell at the
+    // anchor row is the same cell as the one in the row above — the "boundary" is inside
+    // a single cell, not between cells. The handle at the cell's top border lands at the
+    // top of the merged cell, not at its center. Detect that case and fall back to the
+    // centered variant so `top: 50%` places the handle at the merged cell's visual middle
+    // — which IS the selection's vertical center for a single merged-cell selection.
+    const isOdd = rowCount % 2 === 1;
+    const anchorCellSpansBoundary =
+        !isOdd &&
+        anchorRow > rect.top &&
+        map.map[(anchorRow - 1) * map.width + anchorCol] === cellOffset;
+
+    const className =
+        isOdd || anchorCellSpansBoundary
+            ? 'is-selection-anchor'
+            : 'is-selection-anchor is-selection-anchor--edge';
+
+    return Decoration.node(cellPos, cellPos + cellNode.nodeSize, { class: className });
+}
+
+interface TableInfo {
+    tableNode: PMNode;
+    tablePos: number;
+    cellPos: number;
+}
+
+/** Walks up from a resolved position to find the surrounding table + cell. */
+function findTableAt($pos: ResolvedPos): TableInfo | null {
+    for (let depth = $pos.depth; depth > 0; depth--) {
+        const node = $pos.node(depth);
+        if (node.type.name === 'table') {
+            const tablePos = $pos.before(depth);
+            const cellDepth = depth + 2;
+            if ($pos.depth < cellDepth) return null;
+            const cellPos = $pos.before(cellDepth);
+            return { tableNode: node, tablePos, cellPos };
+        }
+    }
+    return null;
+}
+
+/**
+ * `$anchorCell` from a `CellSelection` is resolved AT the position right before the cell —
+ * its depth is the row depth, not the cell depth. Walk up from there to find the table.
+ */
+function findTableFromCellAnchor($anchorCell: ResolvedPos): TableInfo | null {
+    for (let depth = $anchorCell.depth; depth >= 0; depth--) {
+        const node = $anchorCell.node(depth);
+        if (node.type.name === 'table') {
+            return {
+                tableNode: node,
+                tablePos: $anchorCell.before(depth),
+                cellPos: $anchorCell.pos
+            };
+        }
+    }
+    return null;
+}
diff --git a/core-web/libs/new-block-editor/src/lib/editor/extensions/table-extensions.ts b/core-web/libs/new-block-editor/src/lib/editor/extensions/table-extensions.ts
new file mode 100644
index 000000000000..92dc09edaa29
--- /dev/null
+++ b/core-web/libs/new-block-editor/src/lib/editor/extensions/table-extensions.ts
@@ -0,0 +1,268 @@
+import { NodeViewRenderer } from '@tiptap/core';
+import { Table, TableCell, TableHeader, TableKit } from '@tiptap/extension-table';
+import { Node as PMNode } from '@tiptap/pm/model';
+
+import { TableScopeAutoAssign } from './table-scope-auto-assign.plugin';
+
+import type { EditorPopoverService } from '../services/editor-popover.service';
+
+// ── DotTable ───────────────────────────────────────────────────────────────────────
+
+const DotTable = Table.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            caption: {
+                default: null,
+                parseHTML: (element) => {
+                    const captionEl = element.querySelector(':scope > caption');
+                    return captionEl?.textContent?.trim() || null;
+                },
+                renderHTML: () => ({})
+            },
+            ariaLabel: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('aria-label'),
+                renderHTML: (attributes) => {
+                    const value = attributes['ariaLabel'];
+                    if (value == null || value === '') return {};
+                    return { 'aria-label': value };
+                }
+            },
+            ariaLabelledby: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('aria-labelledby'),
+                renderHTML: (attributes) => {
+                    const value = attributes['ariaLabelledby'];
+                    if (value == null || value === '') return {};
+                    return { 'aria-labelledby': value };
+                }
+            }
+        };
+    }
+});
+
+// ── DotTableCell / DotTableHeader (NodeViews with embedded handles) ────────────────
+
+interface CellExtensionOptions {
+    HTMLAttributes: Record<string, unknown>;
+    /** Injected by the editor component scope so click handlers can open the scoped popovers. */
+    popovers: EditorPopoverService | null;
+    /** i18n labels for the handle buttons; supplied at extension-construction time. */
+    columnAriaLabel: string;
+    rowAriaLabel: string;
+    selectionAriaLabel: string;
+}
+
+const CELL_ATTRS_TO_SYNC = ['colspan', 'rowspan', 'colwidth', 'align', 'scope'] as const;
+
+/**
+ * Renders a `<td>` / `<th>` with two child buttons (column handle + row handle) plus a
+ * content container. The buttons live inside the cell DOM, so positioning is pure CSS:
+ *
+ *   - `--col` → `top: -12px; left: 50%; transform: translateX(-50%)`
+ *   - `--row` → `top: 50%; left: -12px; transform: translateY(-50%)`
+ *
+ * The {@link TableActiveCellsPlugin} adds `.is-active-column` / `.is-active-row` classes to
+ * cells in the cursor's column / row; CSS first-child selectors then show the handle only on
+ * the first-row cell of the active column (and the first-cell of the active row).
+ */
+function makeCellNodeViewFactory(
+    tag: 'td' | 'th',
+    options: CellExtensionOptions
+): NodeViewRenderer {
+    return ({ node, getPos, HTMLAttributes }) => {
+        const popovers = options.popovers;
+        const cell = document.createElement(tag);
+        applyHTMLAttributes(cell, HTMLAttributes);
+
+        const colHandle = makeHandleButton('column', 'more_horiz', options.columnAriaLabel);
+        const rowHandle = makeHandleButton('row', 'more_vert', options.rowAriaLabel);
+        const selectionHandle = makeHandleButton(
+            'selection',
+            'drag_indicator',
+            options.selectionAriaLabel
+        );
+
+        const content = document.createElement('div');
+        content.className = 'dot-cell-content';
+
+        cell.append(colHandle, rowHandle, selectionHandle, content);
+
+        const resolveCellPos = (): number | null => {
+            const pos = typeof getPos === 'function' ? getPos() : null;
+            return typeof pos === 'number' ? pos : null;
+        };
+
+        if (popovers) {
+            colHandle.addEventListener('mousedown', (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                const pos = resolveCellPos();
+                if (pos == null) return;
+                popovers.openTableColumn(() => colHandle.getBoundingClientRect(), {
+                    cellPos: pos,
+                    isHeader: tag === 'th',
+                    headerScope: (currentNode.attrs['scope'] as string | null) ?? ''
+                });
+            });
+            rowHandle.addEventListener('mousedown', (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                const pos = resolveCellPos();
+                if (pos == null) return;
+                popovers.openTableRow(() => rowHandle.getBoundingClientRect(), {
+                    cellPos: pos
+                });
+            });
+            // The selection handle is only visible when this cell carries the
+            // `is-selection-anchor` decoration (multi-cell CellSelection). The CellSelection
+            // itself stays alive across the click via mousedown.preventDefault, so the merge
+            // / split commands invoked from the popover see the right selection.
+            selectionHandle.addEventListener('mousedown', (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                popovers.openTableSelection(() => selectionHandle.getBoundingClientRect());
+            });
+        }
+
+        // The closure captures `node` at creation time. We update this reference in
+        // `update()` so the click handlers always see the latest attrs (e.g. scope).
+        let currentNode: PMNode = node;
+
+        return {
+            dom: cell,
+            contentDOM: content,
+            update: (newNode) => {
+                if (newNode.type.name !== node.type.name) return false;
+                currentNode = newNode;
+                // Sync the known attrs onto the cell element. We can't just call
+                // `applyHTMLAttributes` again because the new HTMLAttributes aren't
+                // passed to `update` — we resolve from `newNode.attrs` directly.
+                for (const attr of CELL_ATTRS_TO_SYNC) {
+                    const value = newNode.attrs[attr];
+                    if (value == null || value === '') cell.removeAttribute(attr);
+                    else cell.setAttribute(attr, String(value));
+                }
+                return true;
+            },
+            // The handle buttons + their icon spans are NodeView-owned DOM. Prevent
+            // ProseMirror from re-parsing them on every mutation inside.
+            ignoreMutation: (mutation) => {
+                const target = mutation.target as Element | null;
+                if (!target) return false;
+                if (target instanceof HTMLElement && target.closest('.dot-cell-handle')) {
+                    return true;
+                }
+                return false;
+            }
+        };
+    };
+}
+
+function makeHandleButton(
+    kind: 'column' | 'row' | 'selection',
+    icon: string,
+    ariaLabel: string
+): HTMLButtonElement {
+    const button = document.createElement('button');
+    button.type = 'button';
+    const modifier = kind === 'column' ? 'col' : kind === 'row' ? 'row' : 'selection';
+    button.className = `dot-cell-handle dot-cell-handle--${modifier}`;
+    button.setAttribute('contenteditable', 'false');
+    button.setAttribute('tabindex', '-1');
+    button.setAttribute('aria-label', ariaLabel);
+    button.dataset['testid'] = `table-${kind}-handle`;
+
+    const iconSpan = document.createElement('span');
+    iconSpan.className = 'material-symbols-outlined';
+    iconSpan.setAttribute('aria-hidden', 'true');
+    iconSpan.textContent = icon;
+    button.appendChild(iconSpan);
+    return button;
+}
+
+function applyHTMLAttributes(el: HTMLElement, attrs: Record<string, unknown>): void {
+    for (const [key, value] of Object.entries(attrs)) {
+        if (value == null || value === '' || value === false) continue;
+        el.setAttribute(key, String(value));
+    }
+}
+
+const DotTableCell = TableCell.extend<CellExtensionOptions>({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            popovers: null,
+            columnAriaLabel: 'Column actions',
+            rowAriaLabel: 'Row actions',
+            selectionAriaLabel: 'Selection actions'
+        };
+    },
+    addNodeView() {
+        return makeCellNodeViewFactory('td', this.options);
+    }
+});
+
+const DotTableHeader = TableHeader.extend<CellExtensionOptions>({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            popovers: null,
+            columnAriaLabel: 'Column actions',
+            rowAriaLabel: 'Row actions',
+            selectionAriaLabel: 'Selection actions'
+        };
+    },
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            scope: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('scope'),
+                renderHTML: (attributes) => {
+                    const value = attributes['scope'];
+                    if (value == null || value === '') return {};
+                    return { scope: value };
+                }
+            }
+        };
+    },
+    addNodeView() {
+        return makeCellNodeViewFactory('th', this.options);
+    }
+});
+
+// ── Bundle ─────────────────────────────────────────────────────────────────────────
+
+interface DotTableKitOptions {
+    table?: Parameters<typeof Table.configure>[0];
+    /** Cell + header NodeView options — used to inject the popover service + aria labels. */
+    cell?: Partial<CellExtensionOptions>;
+    header?: Partial<CellExtensionOptions>;
+}
+
+/**
+ * Returns the full set of table-related TipTap extensions. The cell + header NodeViews
+ * each receive an {@link EditorPopoverService} via options so their click handlers can open
+ * the column / row popovers without going through Angular DI.
+ *
+ *   - `DotTable` — adds caption + aria-label + aria-labelledby attributes.
+ *   - `DotTableCell` / `DotTableHeader` — NodeView renders handle buttons inside the cell.
+ *   - `TableCell` + `TableRow` come from `TableKit` (cell is overridden here; row stays default).
+ *   - `TableScopeAutoAssign` — fills `scope` on header cells based on position.
+ */
+export function createDotTableExtensions(options: DotTableKitOptions = {}) {
+    return [
+        // We provide custom Table, TableCell and TableHeader; disable the kit's versions.
+        TableKit.configure({
+            table: false,
+            tableCell: false,
+            tableHeader: false
+        }),
+        DotTable.configure(options.table ?? {}),
+        DotTableCell.configure(options.cell ?? {}),
+        DotTableHeader.configure(options.header ?? {}),
+        TableScopeAutoAssign
+    ];
+}
diff --git a/core-web/libs/new-block-editor/src/lib/editor/extensions/table-scope-auto-assign.plugin.ts b/core-web/libs/new-block-editor/src/lib/editor/extensions/table-scope-auto-assign.plugin.ts
new file mode 100644
index 000000000000..b581e1fe704a
--- /dev/null
+++ b/core-web/libs/new-block-editor/src/lib/editor/extensions/table-scope-auto-assign.plugin.ts
@@ -0,0 +1,106 @@
+import { Extension } from '@tiptap/core';
+import { Node as PMNode } from '@tiptap/pm/model';
+import { EditorState, Plugin, PluginKey, Transaction } from '@tiptap/pm/state';
+
+const PLUGIN_KEY = new PluginKey('tableScopeAutoAssign');
+
+/**
+ * Walks every `<table>` in the document and stages `scope` attribute updates on `<th>` cells
+ * whose `scope` is still unset. Returns the transaction when at least one cell was updated,
+ * or `null` when the doc is already in a consistent state (so callers can skip dispatching).
+ */
+function buildAutoScopeTransaction(state: EditorState): Transaction | null {
+    const tr = state.tr;
+    let changed = false;
+
+    state.doc.descendants((node, pos): boolean => {
+        if (node.type.name !== 'table') return true;
+
+        node.forEach((row, rowOffset, rowIndex) => {
+            const isFirstRow = rowIndex === 0;
+            const rowStart = pos + 1 + rowOffset;
+
+            row.forEach((cell, cellOffset, cellIndex) => {
+                if (cell.type.name !== 'tableHeader') return;
+
+                const existing = cell.attrs['scope'];
+                if (existing != null && existing !== '') return;
+
+                const desired = isFirstRow ? 'col' : cellIndex === 0 ? 'row' : null;
+                if (!desired) return;
+
+                const cellPos = rowStart + 1 + cellOffset;
+                tr.setNodeAttribute(cellPos, 'scope', desired);
+                changed = true;
+            });
+        });
+
+        // Children visited via node.forEach above — no need to descend further.
+        return false;
+    });
+
+    if (!changed) return null;
+    tr.setMeta(PLUGIN_KEY, true);
+    return tr;
+}
+
+/**
+ * Auto-fills `scope` on `<th>` cells based on their position so screen readers can
+ * resolve column-vs-row header relationships (WCAG 1.3.1).
+ *
+ *   - first row → `scope="col"`
+ *   - first column (when the cell is a `<th>`) → `scope="row"`
+ *
+ * Runs in `appendTransaction` only after doc-changing transactions, and is **idempotent**:
+ * it never touches a cell whose `scope` is already a non-null string. That preserves any
+ * value the author set explicitly (e.g. `colgroup`, `rowgroup`) via the toolbar select.
+ *
+ * Skipped when the previous transaction was generated by this plugin (`tr.getMeta` guard)
+ * to avoid recursive amplification when several tables exist in the same doc.
+ */
+export const TableScopeAutoAssign = Extension.create({
+    name: 'tableScopeAutoAssign',
+
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: PLUGIN_KEY,
+                /**
+                 * Runs once when the editor view mounts. ProseMirror builds the initial
+                 * state directly from the schema — that build does not flow through any
+                 * transaction, so `appendTransaction` would otherwise never see legacy
+                 * tables already in the doc.
+                 */
+                view: (view) => {
+                    const tr = buildAutoScopeTransaction(view.state);
+                    if (tr) view.dispatch(tr);
+                    return {};
+                },
+                appendTransaction: (transactions, _oldState, newState) => {
+                    if (!transactions.some((tr) => tr.docChanged)) return null;
+                    if (transactions.some((tr) => tr.getMeta(PLUGIN_KEY))) return null;
+                    return buildAutoScopeTransaction(newState);
+                }
+            })
+        ];
+    }
+});
+
+/**
+ * Exposed for unit-testing: returns the position-derived scope for a given cell
+ * inside a table node, mirroring the plugin's logic. `null` means leave untouched.
+ */
+export function computeAutoScope(
+    table: PMNode,
+    rowIndex: number,
+    cellIndex: number
+): 'col' | 'row' | null {
+    if (rowIndex < 0 || rowIndex >= table.childCount) return null;
+    const row = table.child(rowIndex);
+    if (cellIndex < 0 || cellIndex >= row.childCount) return null;
+    const cell = row.child(cellIndex);
+    if (cell.type.name !== 'tableHeader') return null;
+    if (rowIndex === 0) return 'col';
+    if (cellIndex === 0) return 'row';
+    return null;
+}
diff --git a/core-web/libs/new-block-editor/src/lib/editor/services/editor-popover.service.ts b/core-web/libs/new-block-editor/src/lib/editor/services/editor-popover.service.ts
index ee2799eeb2cd..a5cd1882d477 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/services/editor-popover.service.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/services/editor-popover.service.ts
@@ -1,12 +1,53 @@
 import { Injectable, NgZone, inject, signal } from '@angular/core';
 
-export type PopoverId = 'image-properties' | 'link' | 'table' | 'emoji' | 'asset-by-url';
+export type PopoverId =
+    | 'image-properties'
+    | 'link'
+    | 'table'
+    | 'table-column'
+    | 'table-row'
+    | 'table-selection'
+    | 'table-properties'
+    | 'emoji'
+    | 'asset-by-url';
 
 /** Prefill payload for the {@link ImagePropertiesPopoverComponent} (edit-mode). */
 export interface ImagePropertiesPayload {
     initialValues: { src: string; title: string; alt: string };
 }
 
+/**
+ * Prefill payload for the `TablePropertiesPopoverComponent` (caption + aria-label +
+ * aria-labelledby on the active table). Captures the current values so the form opens
+ * populated.
+ */
+export interface TablePropertiesPayload {
+    initialValues: {
+        caption: string;
+        hasCaption: boolean;
+        ariaLabel: string;
+        ariaLabelledby: string;
+    };
+}
+
+/**
+ * Prefill payload for the column-scoped popover. `cellPos` anchors edits to a specific
+ * cell so the popover keeps operating on the same cell even if the user clicks away while
+ * it's open.
+ */
+export interface TableColumnPayload {
+    cellPos: number;
+    /** True when the anchor cell is a `<th>` — controls visibility of the scope select. */
+    isHeader: boolean;
+    /** Current `scope` attribute of the anchor cell, or `''` when unset. */
+    headerScope: string;
+}
+
+/** Prefill payload for the row-scoped popover. */
+export interface TableRowPayload {
+    cellPos: number;
+}
+
 export interface LinkPopoverPayload {
     initialValues?: {
         href?: string;
@@ -28,9 +69,10 @@ interface ActivePopover {
 }
 
 /**
- * Owns the state for caret-anchored editor popovers (link, image-properties, table, emoji).
- * Each popover is rendered through the shared `<dot-editor-popover>` shell, which subscribes
- * to {@link activePopover} and positions itself against the trigger rect via floating-ui.
+ * Owns the state for caret-anchored editor popovers (link, image-properties, table, emoji,
+ * and the three table-handle popovers). Each popover is rendered through the shared
+ * `<dot-editor-popover>` shell, which subscribes to {@link activePopover} and positions
+ * itself against the trigger rect via floating-ui.
  *
  * Sibling to {@link EditorModalService}, which owns centered modal dialogs (AI content,
  * AI image, image picker, video picker).
@@ -42,6 +84,9 @@ export class EditorPopoverService {
     readonly activePopover = signal<ActivePopover | null>(null);
     readonly imagePropertiesPayload = signal<ImagePropertiesPayload | null>(null);
     readonly linkPayload = signal<LinkPopoverPayload | null>(null);
+    readonly tablePropertiesPayload = signal<TablePropertiesPayload | null>(null);
+    readonly tableColumnPayload = signal<TableColumnPayload | null>(null);
+    readonly tableRowPayload = signal<TableRowPayload | null>(null);
 
     /**
      * **Reactive:** reads {@link activePopover}, so calling this from inside an `effect()`
@@ -79,6 +124,48 @@ export class EditorPopoverService {
         });
     }
 
+    /**
+     * Opens the table-properties popover (caption + aria-label + aria-labelledby) anchored
+     * to the toolbar's `table_edit` button. Populated with the active table's current values.
+     */
+    openTableProperties(clientRectFn: () => DOMRect | null, payload: TablePropertiesPayload): void {
+        this.zone.run(() => {
+            this.tablePropertiesPayload.set(payload);
+            this.activePopover.set({ id: 'table-properties', clientRectFn });
+        });
+    }
+
+    /**
+     * Opens the column-scoped popover (insert L/R, toggle col header, header scope, delete
+     * column) anchored to the column handle. `cellPos` snapshot keeps the popover acting on
+     * the same column even if the user clicks elsewhere while it's open.
+     */
+    openTableColumn(clientRectFn: () => DOMRect | null, payload: TableColumnPayload): void {
+        this.zone.run(() => {
+            this.tableColumnPayload.set(payload);
+            this.activePopover.set({ id: 'table-column', clientRectFn });
+        });
+    }
+
+    /** Opens the row-scoped popover (insert above/below, toggle row header, delete row). */
+    openTableRow(clientRectFn: () => DOMRect | null, payload: TableRowPayload): void {
+        this.zone.run(() => {
+            this.tableRowPayload.set(payload);
+            this.activePopover.set({ id: 'table-row', clientRectFn });
+        });
+    }
+
+    /**
+     * Opens the multi-cell selection popover (merge cells / split cell). Anchored to the
+     * selection handle (right edge of the bottom-right cell of the active CellSelection).
+     * No payload — the popover reads `editor.can().mergeCells()` / `splitCell()` directly.
+     */
+    openTableSelection(clientRectFn: () => DOMRect | null): void {
+        this.zone.run(() => {
+            this.activePopover.set({ id: 'table-selection', clientRectFn });
+        });
+    }
+
     close(): void {
         this.zone.run(() => this.activePopover.set(null));
     }
diff --git a/core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/blocks/table.component.ts b/core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/blocks/table.component.ts
index f91d120e344f..26c3de1e48aa 100644
--- a/core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/blocks/table.component.ts
+++ b/core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/blocks/table.component.ts
@@ -8,37 +8,43 @@ import { DotCMSBlockEditorItemComponent } from '../item/dotcms-block-editor-item
     selector: 'dotcms-block-editor-renderer-table',
     imports: [NgComponentOutlet],
     template: `
-        <table>
-            <thead>
-                @for (rowNode of content?.slice(0, 1); track rowNode.type) {
-                    <tr>
-                        @for (cellNode of rowNode.content; track cellNode.type) {
-                            <th
-                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
-                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
-                                <ng-container
-                                    *ngComponentOutlet="
-                                        blockEditorItem;
-                                        inputs: { content: cellNode.content }
-                                    " />
-                            </th>
-                        }
-                    </tr>
-                }
-            </thead>
+        <table
+            [attr.aria-label]="attrs?.['ariaLabel'] || null"
+            [attr.aria-labelledby]="attrs?.['ariaLabelledby'] || null">
+            @if (attrs?.['caption']) {
+                <caption>{{ attrs?.['caption'] }}</caption>
+            }
             <tbody>
-                @for (rowNode of content?.slice(1); track rowNode.type) {
+                @for (rowNode of content; track $index) {
                     <tr>
-                        @for (cellNode of rowNode.content; track cellNode.type) {
-                            <td
-                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
-                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
-                                <ng-container
-                                    *ngComponentOutlet="
-                                        blockEditorItem;
-                                        inputs: { content: cellNode.content }
-                                    " />
-                            </td>
+                        @for (cellNode of rowNode.content; track $index) {
+                            <!--
+                                Cell type — not row index — decides th vs td. Matches the
+                                VTL renderer (storyblock/render.vtl) so headless markup
+                                stays consistent with server-rendered pages.
+                            -->
+                            @if (cellNode.type === 'tableHeader') {
+                                <th
+                                    [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                    [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1"
+                                    [attr.scope]="cellNode.attrs?.['scope'] || null">
+                                    <ng-container
+                                        *ngComponentOutlet="
+                                            blockEditorItem;
+                                            inputs: { content: cellNode.content }
+                                        " />
+                                </th>
+                            } @else {
+                                <td
+                                    [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                    [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                    <ng-container
+                                        *ngComponentOutlet="
+                                            blockEditorItem;
+                                            inputs: { content: cellNode.content }
+                                        " />
+                                </td>
+                            }
                         }
                     </tr>
                 }
@@ -48,5 +54,10 @@ import { DotCMSBlockEditorItemComponent } from '../item/dotcms-block-editor-item
 })
 export class DotTableBlock {
     @Input() content: BlockEditorNode[] | undefined;
+    /**
+     * Table-node attributes (`caption`, `ariaLabel`, `ariaLabelledby`). Optional for
+     * back-compat with older payloads that don't carry these.
+     */
+    @Input() attrs: BlockEditorNode['attrs'];
     blockEditorItem = DotCMSBlockEditorItemComponent;
 }
diff --git a/core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.html b/core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.html
index 9e6c6df28d81..28cb63d9a2ae 100644
--- a/core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.html
+++ b/core-web/libs/sdk/angular/src/lib/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.html
@@ -86,7 +86,7 @@
             }
 
             @case (BLOCKS.TABLE) {
-                <dotcms-block-editor-renderer-table [content]="node.content" />
+                <dotcms-block-editor-renderer-table [content]="node.content" [attrs]="node.attrs" />
             }
 
             @case (BLOCKS.GRID_BLOCK) {
diff --git a/core-web/libs/sdk/react/src/lib/next/components/DotCMSBlockEditorRenderer/components/BlockEditorBlock.tsx b/core-web/libs/sdk/react/src/lib/next/components/DotCMSBlockEditorRenderer/components/BlockEditorBlock.tsx
index 7bb28b947826..00ea6cb921f5 100644
--- a/core-web/libs/sdk/react/src/lib/next/components/DotCMSBlockEditorRenderer/components/BlockEditorBlock.tsx
+++ b/core-web/libs/sdk/react/src/lib/next/components/DotCMSBlockEditorRenderer/components/BlockEditorBlock.tsx
@@ -149,6 +149,7 @@ export const BlockEditorBlock = ({
                     <TableRenderer
                         key={key}
                         content={node.content ?? []}
+                        attrs={node.attrs}
                         blockEditorItem={BlockEditorBlock}
                     />
                 );
diff --git a/core-web/libs/sdk/react/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Table.tsx b/core-web/libs/sdk/react/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Table.tsx
index f90c1b30548e..0a58108d4c50 100644
--- a/core-web/libs/sdk/react/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Table.tsx
+++ b/core-web/libs/sdk/react/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Table.tsx
@@ -4,54 +4,71 @@ import { BlockEditorNode } from '@dotcms/types';
 
 interface TableRendererProps {
     content: BlockEditorNode[];
+    /**
+     * Table-node attributes (`caption`, `ariaLabel`, `ariaLabelledby`). Optional for
+     * back-compat with older payloads that don't carry these.
+     */
+    attrs?: BlockEditorNode['attrs'];
     blockEditorItem: React.FC<{
         content: BlockEditorNode[];
     }>;
 }
 
 /**
- * Renders a table component for the Block Editor.
+ * Renders a table block for the Block Editor.
  *
- * @param content - The content of the table.
- * @param blockEditorItem - The Block Editor item component.
+ * **Cell-type-aware**: each cell is emitted as `<th>` or `<td>` based on the node's
+ * `type` (`tableHeader` vs `tableCell`) rather than its row position — so column-header
+ * cells in any row (the result of "Toggle column header" in the editor) keep their
+ * semantic `<th>` wrapper and the `scope` attribute reaches headless consumers.
+ *
+ * @param content - The table's child rows.
+ * @param attrs - Optional table-level attributes (`caption`, `ariaLabel`, `ariaLabelledby`).
+ * @param blockEditorItem - The Block Editor item component for nested content.
  */
 export const TableRenderer: React.FC<TableRendererProps> = ({
     content,
+    attrs,
     blockEditorItem
 }: TableRendererProps) => {
     const BlockEditorItemComponent = blockEditorItem;
 
-    const renderTableContent = (node: BlockEditorNode) => {
-        return <BlockEditorItemComponent content={node.content ?? []} />;
-    };
+    const renderCellContent = (node: BlockEditorNode) => (
+        <BlockEditorItemComponent content={node.content ?? []} />
+    );
+
+    const caption: string | undefined = attrs?.caption || undefined;
+    const ariaLabel: string | undefined = attrs?.ariaLabel || undefined;
+    const ariaLabelledBy: string | undefined = attrs?.ariaLabelledby || undefined;
 
     return (
-        <table>
-            <thead>
-                {content.slice(0, 1).map((rowNode, rowIndex) => (
-                    <tr key={`${rowNode.type}-${rowIndex}`}>
-                        {rowNode.content?.map((cellNode, cellIndex) => (
-                            <th
-                                key={`${cellNode.type}-${cellIndex}`}
-                                colSpan={Number(cellNode.attrs?.colspan || 1)}
-                                rowSpan={Number(cellNode.attrs?.rowspan || 1)}>
-                                {renderTableContent(cellNode)}
-                            </th>
-                        ))}
-                    </tr>
-                ))}
-            </thead>
+        <table aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>
+            {caption ? <caption>{caption}</caption> : null}
             <tbody>
-                {content.slice(1).map((rowNode, rowIndex) => (
-                    <tr key={`${rowNode.type}-${rowIndex}`}>
-                        {rowNode.content?.map((cellNode, cellIndex) => (
-                            <td
-                                key={`${cellNode.type}-${cellIndex}`}
-                                colSpan={Number(cellNode.attrs?.colspan || 1)}
-                                rowSpan={Number(cellNode.attrs?.rowspan || 1)}>
-                                {renderTableContent(cellNode)}
-                            </td>
-                        ))}
+                {content.map((rowNode, rowIndex) => (
+                    <tr key={`row-${rowIndex}`}>
+                        {rowNode.content?.map((cellNode, cellIndex) => {
+                            const colSpan = Number(cellNode.attrs?.colspan || 1);
+                            const rowSpan = Number(cellNode.attrs?.rowspan || 1);
+                            // Cell type — not row index — decides th vs td. Matches the
+                            // VTL renderer (storyblock/render.vtl).
+                            if (cellNode.type === 'tableHeader') {
+                                return (
+                                    <th
+                                        key={`cell-${cellIndex}`}
+                                        colSpan={colSpan}
+                                        rowSpan={rowSpan}
+                                        scope={cellNode.attrs?.scope || undefined}>
+                                        {renderCellContent(cellNode)}
+                                    </th>
+                                );
+                            }
+                            return (
+                                <td key={`cell-${cellIndex}`} colSpan={colSpan} rowSpan={rowSpan}>
+                                    {renderCellContent(cellNode)}
+                                </td>
+                            );
+                        })}
                     </tr>
                 ))}
             </tbody>
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index 2af698fc7c78..0b263ab19aae 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -6033,6 +6033,33 @@ dot.block.editor.toolbar.table.toggle-column-header=Toggle column header
 dot.block.editor.toolbar.table.delete-row=Delete row
 dot.block.editor.toolbar.table.delete-column=Delete column
 dot.block.editor.toolbar.table.delete-table=Delete table
+dot.block.editor.toolbar.table.properties=Table properties
+dot.block.editor.toolbar.table.header-scope=Header scope
+dot.block.editor.toolbar.table.scope.auto=Auto
+dot.block.editor.toolbar.table.scope.col=Column
+dot.block.editor.toolbar.table.scope.row=Row
+dot.block.editor.toolbar.table.scope.colgroup=Column group
+dot.block.editor.toolbar.table.scope.rowgroup=Row group
+
+# Table contextual handles (column / row / table-actions popovers)
+dot.block.editor.table.handle.column.aria-label=Column actions
+dot.block.editor.table.handle.row.aria-label=Row actions
+dot.block.editor.table.handle.table.aria-label=Table actions
+dot.block.editor.table.column.insert-left=Insert column left
+dot.block.editor.table.column.insert-right=Insert column right
+dot.block.editor.table.column.toggle-header=Toggle column header
+dot.block.editor.table.column.delete=Delete column
+dot.block.editor.table.row.insert-above=Insert row above
+dot.block.editor.table.row.insert-below=Insert row below
+dot.block.editor.table.row.toggle-header=Toggle row header
+dot.block.editor.table.row.delete=Delete row
+dot.block.editor.table.handle.selection.aria-label=Selection actions
+dot.block.editor.table.selection.merge-cells=Merge cells
+dot.block.editor.table.selection.split-cell=Split cell
+dot.block.editor.table.actions.merge-cells=Merge cells
+dot.block.editor.table.actions.split-cell=Split cell
+dot.block.editor.table.actions.delete=Delete table
+
 dot.block.editor.toolbar.insert-emoji=Insert emoji
 dot.block.editor.toolbar.full-screen=Full screen
 dot.block.editor.toolbar.exit-full-screen=Exit full screen
@@ -6074,6 +6101,13 @@ dot.block.editor.dialog.table.field.rows=Rows
 dot.block.editor.dialog.table.field.columns=Columns
 dot.block.editor.dialog.table.field.header-row=Include header row
 
+# Table properties dialog
+dot.block.editor.dialog.table-properties.title=Table properties
+dot.block.editor.dialog.table-properties.caption=Caption
+dot.block.editor.dialog.table-properties.aria-label=Accessible name (aria-label)
+dot.block.editor.dialog.table-properties.aria-labelledby=Labelled by (aria-labelledby)
+dot.block.editor.dialog.table-properties.add-caption=Add caption
+
 # Asset by URL dialog
 dot.block.editor.dialog.asset-by-url.aria-label=Insert asset by URL
 dot.block.editor.dialog.asset-by-url.title=Insert asset by URL
diff --git a/dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/render.vtl b/dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/render.vtl
index b77d7d4ec801..165703066b3e 100644
--- a/dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/render.vtl
+++ b/dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/render.vtl
@@ -49,13 +49,13 @@
                 *##renderContentBlock($element.content)#*
             *#</blockquote>#*
         *##elseif( $element.type == "table" )
-#*          *#<table>#renderContentBlock($element.content)</table>
+#*          *#<table#if($!element.attrs.ariaLabel) aria-label="$esc.html($!element.attrs.ariaLabel)"#end#if($!element.attrs.ariaLabelledby) aria-labelledby="$esc.html($!element.attrs.ariaLabelledby)"#end>#if($!element.attrs.caption)<caption>$esc.html($!element.attrs.caption)</caption>#end#renderContentBlock($element.content)</table>
 #*      *##elseif( $element.type == "tableRow" )
 #*        *#  <tr>
 #*        *##renderContentBlock($element.content)
 #*        *#  </tr>
 #*      *##elseif( $element.type == "tableHeader" )
-#*      *#    <th colspan="$!element.attrs.colspan" rowspan="$!element.attrs.rowspan" colwidth="$!element.attrs.colwidth" >#renderContentBlock($element.content)</th>
+#*      *#    <th colspan="$!element.attrs.colspan" rowspan="$!element.attrs.rowspan" colwidth="$!element.attrs.colwidth"#if($!element.attrs.scope) scope="$!element.attrs.scope"#end>#renderContentBlock($element.content)</th>
 #*      *##elseif( $element.type == "tableCell" )
 #*      *#    <td colspan="$!element.attrs.colspan" rowspan="$!element.attrs.rowspan" colwidth="$!element.attrs.colwidth" >#renderContentBlock($element.content)</td>
 #*      *##elseif( $element.type == "hardBreak" )#*
diff --git a/dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/table.vtl b/dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/table.vtl
index 0018c6d325bf..df64291d96e3 100644
--- a/dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/table.vtl
+++ b/dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/table.vtl
@@ -1,5 +1,6 @@
 #parse( "static/storyblock/render.vtl" )
 
-<table>
+<table#if($!item.attrs.ariaLabel) aria-label="$esc.html($!item.attrs.ariaLabel)"#end#if($!item.attrs.ariaLabelledby) aria-labelledby="$esc.html($!item.attrs.ariaLabelledby)"#end>
+#if($!item.attrs.caption)<caption>$esc.html($!item.attrs.caption)</caption>#end
 #renderContentBlock($!item.content)
 </table>