diff --git a/src/lib/components/ribbon/Ribbon.svelte b/src/lib/components/ribbon/Ribbon.svelte
index 7aa2a9b..52e159a 100644
--- a/src/lib/components/ribbon/Ribbon.svelte
+++ b/src/lib/components/ribbon/Ribbon.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Editor } from '@tiptap/core';
+  import { NodeSelection } from '@tiptap/pm/state';
   import Icon from './Icon.svelte';
   import RibbonMenu from './RibbonMenu.svelte';
   import HistoryButton from '../HistoryButton.svelte';
@@ -9,6 +10,8 @@
   import ReferencesTab from './tabs/ReferencesTab.svelte';
   import ReviewTab from './tabs/ReviewTab.svelte';
   import ViewTab from './tabs/ViewTab.svelte';
+  import TableTabs from './tabs/TableTabs.svelte';
+  import FrameTabs from './tabs/FrameTabs.svelte';
   import UiLanguagePicker from '../UiLanguagePicker.svelte';
   import { clickOutside, isMenuOpen, toggleMenu, closeMenu } from './menu.svelte';
   import { t } from '../../i18n/i18n.svelte';
@@ -85,11 +88,39 @@
   } = $props();
 
   const TABS = ['home', 'insert', 'layout', 'references', 'review', 'view'] as const;
-  type Tab = (typeof TABS)[number];
+  const CONTEXTUAL = ['tableDesign', 'tableLayout', 'pictureFormat', 'shapeFormat'] as const;
+  type Tab = (typeof TABS)[number] | (typeof CONTEXTUAL)[number];
 
   // Word opens on Home every time, so the active tab is not persisted.
   let tab = $state<Tab>('home');
 
+  // Word's contextual tabs: they appear while the caret is in the object and
+  // vanish with it, so a tab that disappears hands the strip back to Home.
+  let inTable = $derived(tick >= 0 && !!editor?.isActive('table'));
+
+  let selectedNode = $derived.by<string | null>(() => {
+    if (tick < 0 || !editor) return null;
+    const sel = editor.state.selection;
+    return sel instanceof NodeSelection ? sel.node.type.name : null;
+  });
+
+  let frameAttrs = $derived.by<Record<string, unknown> | null>(() => {
+    if (tick < 0 || !editor) return null;
+    const sel = editor.state.selection;
+    return sel instanceof NodeSelection ? sel.node.attrs : null;
+  });
+
+  let shown = $derived([
+    ...TABS,
+    ...(inTable ? (['tableDesign', 'tableLayout'] as const) : []),
+    ...(selectedNode === 'image' ? (['pictureFormat'] as const) : []),
+    ...(selectedNode === 'textBox' ? (['shapeFormat'] as const) : []),
+  ] as Tab[]);
+
+  $effect(() => {
+    if (!shown.includes(tab)) tab = 'home';
+  });
+
   let docNameSizerWidth = $state(0);
 
   function run(fn?: () => void) {
@@ -159,8 +190,13 @@
     <HistoryButton {editor} {tick} direction="redo" />
     <span class="qa-sep"></span>
 
-    {#each TABS as id}
-      <button class="ribbon-tab" class:active={tab === id} onclick={() => (tab = id)}>
+    {#each shown as id}
+      <button
+        class="ribbon-tab"
+        class:active={tab === id}
+        class:contextual={!(TABS as readonly string[]).includes(id)}
+        onclick={() => (tab = id)}
+      >
         {t().ribbon.tabs[id]}
       </button>
     {/each}
@@ -229,6 +265,18 @@
       <ReviewTab {editor} {tick} {documentLanguage} {onLanguage} />
     {:else if tab === 'view'}
       <ViewTab bind:showRuler bind:showFormattingMarks {zoom} {onZoom} {onDebugDump} />
+    {:else if tab === 'tableDesign' || tab === 'tableLayout'}
+      <TableTabs {editor} {tick} which={tab === 'tableDesign' ? 'design' : 'layout'} />
+    {:else if tab === 'pictureFormat' || tab === 'shapeFormat'}
+      <FrameTabs
+        {editor}
+        which={tab === 'pictureFormat' ? 'picture' : 'shape'}
+        wrap={(frameAttrs?.wrap ?? 'inline') as never}
+        shapeKind={frameAttrs?.shapeKind as never}
+        fillColor={frameAttrs?.fillColor as string | null}
+        strokeColor={frameAttrs?.strokeColor as string | null}
+        strokeWidthPt={frameAttrs?.strokeWidthPt as number}
+      />
     {/if}
   </div>
 </div>
@@ -279,6 +327,18 @@
   }
 
   .ribbon-tab:hover { color: var(--w-accent); }
+
+  /* Word tints a contextual tab so it reads as belonging to the selected object
+     rather than to the document. */
+  .ribbon-tab.contextual { color: var(--w-accent-dark); }
+  .ribbon-tab.contextual::before {
+    content: '';
+    position: absolute;
+    inset: 2px 4px auto;
+    height: 2px;
+    border-radius: 1px;
+    background: var(--w-accent-soft);
+  }
   .ribbon-tab.active { color: var(--w-accent); }
 
   /* Word's underline is inset from the tab's edges, not full width. */
diff --git a/src/lib/components/ribbon/icons.ts b/src/lib/components/ribbon/icons.ts
index ec16e3f..88d6cbd 100644
--- a/src/lib/components/ribbon/icons.ts
+++ b/src/lib/components/ribbon/icons.ts
@@ -55,6 +55,28 @@ export const STROKED = {
   highlighter: ['M5.5 9.5 10 5l3 3-4.5 4.5H5.5z', 'M9.25 3.25 12.75 6.75', 'M2.5 13.5h4'],
   shading: ['M4 8.5 8.5 4l4 4-4.5 4.5a1.4 1.4 0 0 1-2 0L4 10.5a1.4 1.4 0 0 1 0-2z', 'M6.5 2 8.5 4', 'M2.5 13.5h11'],
 
+  rowAbove: ['M1.5 9h13v5.5h-13z', 'M1.5 11.75h13', 'M8 1.5v5M5.5 4h5'],
+  rowBelow: ['M1.5 1.5h13V7h-13z', 'M1.5 4.25h13', 'M8 9.5v5M5.5 12h5'],
+  colLeft: ['M9 1.5h5.5v13H9z', 'M11.75 1.5v13', 'M1.5 8h5M4 5.5v5'],
+  colRight: ['M1.5 1.5H7v13H1.5z', 'M4.25 1.5v13', 'M9.5 8h5M12 5.5v5'],
+  deleteRow: ['M1.5 5.5h13v5h-13z', 'M4 3 12 13M12 3 4 13'],
+  deleteCol: ['M5.5 1.5h5v13h-5z', 'M3 4 13 12M13 4 3 12'],
+  deleteTable: ['M2 2.5h12v11H2z', 'M2 6h12M2 10h12M6 2.5v11M10 2.5v11', 'M3 3 13 13'],
+  merge: ['M2 3h12v10H2z', 'M2 8h4M10 8h4', 'M6.5 6 8.5 8l-2 2M9.5 6 7.5 8l2 2'],
+  split: ['M2 3h12v10H2z', 'M8 3v10', 'M5 6.5 3 8l2 1.5M11 6.5 13 8l-2 1.5'],
+  headerRow: ['M2 3h12v10H2z', 'M2 6.25h12', 'M3.4 4.6h9.2'],
+  firstColumn: ['M2 3h12v10H2z', 'M5.5 3v10', 'M3.75 5v6'],
+  alignTop: ['M2 3h12', 'M8 5.5v7M5.5 8 8 5.5 10.5 8'],
+  alignMiddle: ['M2 8h12', 'M8 2.5v3M8 10.5v3'],
+  alignBottom: ['M2 13h12', 'M8 3.5v7M5.5 8 8 10.5 10.5 8'],
+  cellMargins: ['M2 2.5h12v11H2z', 'M4.5 5h7v6h-7z'],
+  wrapInline: ['M2 4h12M2 8h12M2 12h12'],
+  wrapLeft: ['M2 3.5h6v9H2z', 'M9.5 4.5h4.5M9.5 7h4.5M9.5 9.5h4.5M9.5 12h4.5'],
+  wrapRight: ['M8 3.5h6v9H8z', 'M2 4.5h4.5M2 7h4.5M2 9.5h4.5M2 12h4.5'],
+  wrapTopBottom: ['M4 6.5h8v3H4z', 'M2 3h12M2 13h12'],
+  shapeRect: ['M2 4h12v8H2z'],
+  shapeRound: ['M4 4h8a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'],
+  shapeEllipse: ['M8 12.5c3.6 0 6.5-2 6.5-4.5S11.6 3.5 8 3.5 1.5 5.5 1.5 8s2.9 4.5 6.5 4.5z'],
   toc: ['M2 3h6M2 6.5h5M2 10h6M2 13.5h4', 'M11 3h3M10 6.5h4M11 10h3M10 13.5h4'],
   tocLevels: ['M2.5 3.5h11M4.5 7h9M6.5 10.5h7M8.5 14h5'],
   wordCount: ['M2.5 2.5h11v11h-11z', 'M5 6h6M5 9h4'],
diff --git a/src/lib/components/ribbon/tabs/FrameTabs.svelte b/src/lib/components/ribbon/tabs/FrameTabs.svelte
new file mode 100644
index 0000000..c764d54
--- /dev/null
+++ b/src/lib/components/ribbon/tabs/FrameTabs.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core';
+  import RibbonGroup from '../RibbonGroup.svelte';
+  import RibbonButton from '../RibbonButton.svelte';
+  import ColorPicker from '../../ColorPicker.svelte';
+  import type { WrapMode } from '../../../editor/extensions/image';
+  import type { ShapeKind } from '../../../editor/extensions/textBox';
+  import { t } from '../../../i18n/i18n.svelte';
+
+  // Word's Picture Format and Shape Format: the same wrap modes, plus a shape's
+  // own fill, outline and kind.
+  let { editor, which, wrap, shapeKind, fillColor, strokeColor, strokeWidthPt }: {
+    editor: Editor | null;
+    which: 'picture' | 'shape';
+    wrap: WrapMode;
+    shapeKind?: ShapeKind;
+    fillColor?: string | null;
+    strokeColor?: string | null;
+    strokeWidthPt?: number;
+  } = $props();
+
+  const WRAPS: { key: WrapMode; icon: 'wrapInline' | 'wrapLeft' | 'wrapRight' | 'wrapTopBottom'; label: () => string }[] = [
+    { key: 'inline', icon: 'wrapInline', label: () => t().image.wrapInline },
+    { key: 'left', icon: 'wrapLeft', label: () => t().image.wrapLeft },
+    { key: 'right', icon: 'wrapRight', label: () => t().image.wrapRight },
+    { key: 'topBottom', icon: 'wrapTopBottom', label: () => t().image.wrapTopBottom },
+  ];
+
+  const SHAPES: { key: ShapeKind; label: () => string }[] = [
+    { key: 'textbox', label: () => t().textBox.shapeRect },
+    { key: 'roundRect', label: () => t().textBox.shapeRoundRect },
+    { key: 'ellipse', label: () => t().textBox.shapeEllipse },
+  ];
+
+  function setWrap(w: WrapMode) {
+    if (which === 'picture') editor?.chain().focus().setImageWrap(w).run();
+    else editor?.chain().focus().setTextBoxAttrs({ wrap: w }).run();
+  }
+</script>
+
+<RibbonGroup label={t().ribbon.groups.arrange}>
+  {#each WRAPS as w}
+    <RibbonButton variant="big" icon={w.icon} label={w.label()} title={w.label()} active={wrap === w.key} onclick={() => setWrap(w.key)} />
+  {/each}
+</RibbonGroup>
+
+{#if which === 'shape'}
+  <div class="ribbon-sep"></div>
+
+  <RibbonGroup label={t().ribbon.groups.shapeStyles}>
+    {#each SHAPES as s}
+      <RibbonButton variant="big" icon={s.key === 'ellipse' ? 'shapeEllipse' : s.key === 'roundRect' ? 'shapeRound' : 'shapeRect'} label={s.label()} title={s.label()} active={shapeKind === s.key} onclick={() => editor?.chain().focus().setTextBoxAttrs({ shapeKind: s.key }).run()} />
+    {/each}
+    <div class="rb-captioned">
+      <ColorPicker
+        {editor}
+        currentColor={fillColor ?? null}
+        defaultColor="#4472C4"
+        title={t().textBox.fillColor}
+        chevronTitle={t().textBox.fillColor}
+        clearLabel={t().textBox.noFill}
+        onApply={(c) => editor?.chain().focus().setTextBoxAttrs({ fillColor: c }).run()}
+        onClear={() => editor?.chain().focus().setTextBoxAttrs({ fillColor: null }).run()}
+        icon={fillIcon}
+      />
+      <span class="rb-caption">{t().textBox.fillColor}</span>
+    </div>
+    <div class="rb-captioned">
+      <ColorPicker
+        {editor}
+        currentColor={strokeColor ?? null}
+        defaultColor="#2F5496"
+        title={t().textBox.borderColor}
+        chevronTitle={t().textBox.borderColor}
+        clearLabel={t().textBox.noBorder}
+        onApply={(c) => editor?.chain().focus().setTextBoxAttrs({ strokeColor: c }).run()}
+        onClear={() => editor?.chain().focus().setTextBoxAttrs({ strokeColor: null }).run()}
+        icon={strokeIcon}
+      />
+      <span class="rb-caption">{t().textBox.borderColor}</span>
+    </div>
+    <label class="field">
+      <span>{t().textBox.borderWidth}</span>
+      <input
+        type="text"
+        inputmode="decimal"
+        value={strokeWidthPt ?? 1}
+        onchange={(e) => {
+          const v = parseFloat((e.currentTarget as HTMLInputElement).value.replace(',', '.'));
+          if (!isNaN(v)) editor?.chain().focus().setTextBoxAttrs({ strokeWidthPt: Math.max(0, v) }).run();
+        }}
+      />
+    </label>
+  </RibbonGroup>
+{/if}
+
+{#snippet fillIcon()}<span class="swatch" style="background: {fillColor ?? 'transparent'}"></span>{/snippet}
+{#snippet strokeIcon()}<span class="swatch outline" style="border-color: {strokeColor ?? 'currentColor'}"></span>{/snippet}
+
+<style>
+  .swatch {
+    width: 14px;
+    height: 14px;
+    border: 1px solid var(--w-border-strong);
+    border-radius: 2px;
+  }
+
+  .swatch.outline { background: transparent; border-width: 2px; }
+
+  .rb-captioned {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px 7px 6px;
+  }
+
+  .rb-caption, .field {
+    font-family: var(--w-font);
+    font-size: 12px;
+    color: var(--w-text);
+    white-space: nowrap;
+  }
+
+  .field {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--w-text-dim);
+  }
+
+  .field input {
+    width: 52px;
+    height: 24px;
+    border: 1px solid var(--w-border-strong);
+    border-radius: 3px;
+    background: var(--w-surface);
+    padding: 0 5px;
+    color: var(--w-text);
+    font: inherit;
+    text-align: right;
+  }
+
+  .field input:focus { outline: none; border-color: var(--w-accent); }
+</style>
diff --git a/src/lib/components/ribbon/tabs/TableTabs.svelte b/src/lib/components/ribbon/tabs/TableTabs.svelte
new file mode 100644
index 0000000..6be7485
--- /dev/null
+++ b/src/lib/components/ribbon/tabs/TableTabs.svelte
@@ -0,0 +1,295 @@
+<script lang="ts">
+  import type { Editor, ChainedCommands } from '@tiptap/core';
+  import { CellSelection } from '@tiptap/pm/tables';
+  import RibbonGroup from '../RibbonGroup.svelte';
+  import RibbonButton from '../RibbonButton.svelte';
+  import ColorPicker from '../../ColorPicker.svelte';
+  import TableBorderPicker from '../../TableBorderPicker.svelte';
+  import TableStylePicker from '../../TableStylePicker.svelte';
+  import TableSplitDialog from '../../TableSplitDialog.svelte';
+  import { anchored, clickOutside, isMenuOpen, toggleMenu, closeMenu } from '../menu.svelte';
+  import { isHeaderStyled } from '../../../editor/extensions/tableHeaderRow';
+  import { DEFAULT_CELL_PADDING, parseCellPadding, type CellPadding } from '../../../editor/extensions/tableCellPadding';
+  import type { CellVerticalAlign } from '../../../editor/extensions/tableCellAlign';
+  import { t } from '../../../i18n/i18n.svelte';
+
+  // Word splits the table's contextual tabs in two: Design paints it, Layout
+  // changes its shape.
+  let { editor, tick, which }: {
+    editor: Editor | null;
+    tick: number;
+    which: 'design' | 'layout';
+  } = $props();
+
+  let splitOpen = $state(false);
+  let splitAt = $state({ top: 0, left: 0 });
+
+  function openSplit(e: MouseEvent) {
+    const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    splitAt = { top: r.bottom + 4, left: r.left };
+    splitOpen = true;
+  }
+
+  function run(cmd: (chain: ChainedCommands) => ChainedCommands) {
+    if (!editor) return;
+    cmd(editor.chain().focus()).run();
+  }
+
+  const canMerge = $derived(tick >= 0 && !!editor && editor.can().mergeCells());
+  const isHeaderRow = $derived(tick >= 0 && !!editor && isHeaderStyled(editor.state, 'row'));
+  const isHeaderCol = $derived(tick >= 0 && !!editor && isHeaderStyled(editor.state, 'column'));
+
+  // One attribute over the selected cells: the shared value, '' if they disagree.
+  function cellAttr(name: string): string | null {
+    if (!editor) return null;
+    const sel = editor.state.selection;
+    const values = new Set<string | null>();
+    if (sel instanceof CellSelection) {
+      sel.forEachCell((cell) => values.add((cell.attrs[name] as string) ?? null));
+    } else {
+      const from = sel.$from;
+      for (let d = from.depth; d > 0; d--) {
+        const role = from.node(d).type.spec.tableRole;
+        if (role === 'cell' || role === 'header_cell') {
+          values.add((from.node(d).attrs[name] as string) ?? null);
+          break;
+        }
+      }
+    }
+    if (values.size === 0) return null;
+    return values.size > 1 ? '' : ([...values][0] ?? null);
+  }
+
+  const cellColor = $derived(tick >= 0 ? cellAttr('backgroundColor') : null);
+  const vAlign = $derived(tick >= 0 ? cellAttr('verticalAlign') : null);
+  // The cell's margins in cm, [top, right, bottom, left]; null outside a table.
+  const padding = $derived.by<CellPadding | null>(() => {
+    if (tick < 0 || !editor || !editor.isActive('table')) return null;
+    // A cell that never set its margins reports none, and shows the format default.
+    return parseCellPadding(cellAttr('cellPadding')) ?? DEFAULT_CELL_PADDING;
+  });
+
+  function setPaddingEdge(i: number, cm: number) {
+    if (!editor || !padding) return;
+    const next = [...padding] as CellPadding;
+    next[i] = cm;
+    editor.chain().focus().setCellAttribute('cellPadding', next).run();
+  }
+
+  const VALIGNS: { key: CellVerticalAlign | null; icon: 'alignTop' | 'alignMiddle' | 'alignBottom'; label: () => string }[] = [
+    { key: null, icon: 'alignTop', label: () => t().table.cellAlignTop },
+    { key: 'middle', icon: 'alignMiddle', label: () => t().table.cellAlignMiddle },
+    { key: 'bottom', icon: 'alignBottom', label: () => t().table.cellAlignBottom },
+  ];
+</script>
+
+{#if which === 'design'}
+  <RibbonGroup label={t().styles.tableStyles}>
+    <div class="rb-captioned">
+      <TableStylePicker {editor} {tick} />
+      <span class="rb-caption">{t().table.tableStyle}</span>
+    </div>
+  </RibbonGroup>
+
+  <div class="ribbon-sep"></div>
+
+  <RibbonGroup label={t().ribbon.groups.tableDecor}>
+    <div class="rb-captioned">
+      <ColorPicker
+        {editor}
+        currentColor={cellColor}
+        defaultColor="#D9D9D9"
+        title={t().table.cellShading}
+        chevronTitle={t().table.chooseCellColor}
+        clearLabel={t().table.noFill}
+        onApply={(c) => editor?.chain().focus().setCellAttribute('backgroundColor', c).run()}
+        onClear={() => editor?.chain().focus().setCellAttribute('backgroundColor', null).run()}
+        icon={shadeIcon}
+      />
+      <span class="rb-caption">{t().table.cellShading}</span>
+    </div>
+    <div class="rb-captioned">
+      <TableBorderPicker {editor} {tick} />
+      <span class="rb-caption">{t().borders.title}</span>
+    </div>
+  </RibbonGroup>
+
+  <div class="ribbon-sep"></div>
+
+  <RibbonGroup label={t().ribbon.groups.tableOptions}>
+    <div class="rb-col">
+      <RibbonButton variant="small" icon="headerRow" label={t().styles.regions.headerRow} active={isHeaderRow} onclick={() => run((c) => c.toggleHeaderRowStyle())} />
+      <RibbonButton variant="small" icon="firstColumn" label={t().styles.regions.firstColumn} active={isHeaderCol} onclick={() => run((c) => c.toggleHeaderColumnStyle())} />
+    </div>
+  </RibbonGroup>
+{:else}
+  <RibbonGroup label={t().ribbon.groups.rowsColumns}>
+    <div class="rb-col">
+      <RibbonButton variant="small" icon="rowAbove" label={t().table.insertRowAbove} onclick={() => run((c) => c.addRowBefore())} />
+      <RibbonButton variant="small" icon="rowBelow" label={t().table.insertRowBelow} onclick={() => run((c) => c.addRowAfter())} />
+    </div>
+    <div class="rb-col">
+      <RibbonButton variant="small" icon="colLeft" label={t().table.insertColumnLeft} onclick={() => run((c) => c.addColumnBefore())} />
+      <RibbonButton variant="small" icon="colRight" label={t().table.insertColumnRight} onclick={() => run((c) => c.addColumnAfter())} />
+    </div>
+  </RibbonGroup>
+
+  <div class="ribbon-sep"></div>
+
+  <RibbonGroup label={t().common.remove}>
+    <div class="rb-col">
+      <RibbonButton variant="small" icon="deleteRow" label={t().table.deleteRow} onclick={() => run((c) => c.deleteRow())} />
+      <RibbonButton variant="small" icon="deleteCol" label={t().table.deleteColumn} onclick={() => run((c) => c.deleteColumn())} />
+      <RibbonButton variant="small" icon="deleteTable" label={t().table.deleteTable} onclick={() => run((c) => c.deleteTable())} />
+    </div>
+  </RibbonGroup>
+
+  <div class="ribbon-sep"></div>
+
+  <RibbonGroup label={t().ribbon.groups.merge}>
+    <RibbonButton variant="big" icon="merge" label={t().table.mergeCells} disabled={!canMerge} onclick={() => run((c) => c.mergeCells())} />
+    <span class="split-anchor">
+      <button class="split-trigger" onclick={openSplit} title={t().table.splitCells}>
+        <RibbonButton variant="big" icon="split" label={t().table.splitCellsAria} />
+      </button>
+      <TableSplitDialog
+        open={splitOpen}
+        top={splitAt.top}
+        left={splitAt.left}
+        onApply={(cols, rows) => { splitOpen = false; editor?.chain().focus().splitCellInto(cols, rows).run(); }}
+        onClose={() => (splitOpen = false)}
+      />
+    </span>
+  </RibbonGroup>
+
+  <div class="ribbon-sep"></div>
+
+  <RibbonGroup label={t().align.section}>
+    {#each VALIGNS as v}
+      <RibbonButton
+        icon={v.icon}
+        title={v.label()}
+        active={vAlign === v.key}
+        onclick={() => editor?.chain().focus().setCellAttribute('verticalAlign', v.key).run()}
+      />
+    {/each}
+  </RibbonGroup>
+
+  <div class="ribbon-sep"></div>
+
+  <RibbonGroup label={t().ribbon.groups.cellSize}>
+    <div class="rb-menu-wrap" use:clickOutside={'cellMargins'}>
+      <RibbonButton
+        variant="big"
+        icon="cellMargins"
+        label={t().ribbon.cellMargins}
+        title={t().ribbon.cellMargins}
+        disabled={!padding}
+        caret
+        caretActive={isMenuOpen('cellMargins')}
+        onclick={() => toggleMenu('cellMargins')}
+        onCaret={() => toggleMenu('cellMargins')}
+      />
+      {#if isMenuOpen('cellMargins') && padding}
+        <div class="ribbon-menu margin-menu" use:anchored role="menu">
+          <div class="rb-menu-label">{t().ribbon.cellMargins}</div>
+          <div class="margin-grid">
+            {#each (['top', 'right', 'bottom', 'left'] as const) as edge, i}
+              <label class="margin-field">
+                <span>{t().toolbarExpanded.margins[edge]}</span>
+                <input
+                  type="text"
+                  inputmode="decimal"
+                  value={padding[i]}
+                  onchange={(e) => {
+                    const v = parseFloat((e.currentTarget as HTMLInputElement).value.replace(',', '.'));
+                    if (!isNaN(v)) setPaddingEdge(i, Math.max(0, v));
+                  }}
+                />
+              </label>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </RibbonGroup>
+{/if}
+
+{#snippet shadeIcon()}<span class="shade-glyph"></span>{/snippet}
+
+<style>
+  .rb-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    height: 100%;
+  }
+
+  .rb-menu-wrap { position: relative; }
+
+  /* The dialog positions itself in viewport coordinates, so the trigger only has
+     to hand it the button's rect. */
+  .split-trigger {
+    display: contents;
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+  }
+  .margin-menu { min-width: 210px; }
+
+  .margin-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4px;
+    padding: 2px 7px 4px;
+  }
+
+  .margin-field {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--w-font);
+    font-size: 12px;
+    color: var(--w-text-dim);
+  }
+
+  .margin-field input {
+    width: 52px;
+    height: 24px;
+    border: 1px solid var(--w-border-strong);
+    border-radius: 3px;
+    background: var(--w-surface);
+    padding: 0 5px;
+    color: var(--w-text);
+    font: inherit;
+    text-align: right;
+  }
+
+  .margin-field input:focus { outline: none; border-color: var(--w-accent); }
+
+  .shade-glyph {
+    width: 14px;
+    height: 14px;
+    border: 1px solid currentColor;
+    border-radius: 2px;
+    background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 3px);
+  }
+
+  .rb-captioned {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px 7px 6px;
+  }
+
+  .rb-caption {
+    font-family: var(--w-font);
+    font-size: 12px;
+    color: var(--w-text);
+    white-space: nowrap;
+  }
+</style>
diff --git a/src/lib/i18n/locales/de.ts b/src/lib/i18n/locales/de.ts
index 69aa146..3ca4d27 100644
--- a/src/lib/i18n/locales/de.ts
+++ b/src/lib/i18n/locales/de.ts
@@ -476,6 +476,13 @@ const de: Messages = {
       language: 'Sprache',
       show: 'Anzeigen',
       debug: 'Debug',
+      tableDecor: 'Schattierung & Rahmen',
+      tableOptions: 'Tabellenformatoptionen',
+      rowsColumns: 'Zeilen & Spalten',
+      merge: 'Zusammenführen',
+      cellSize: 'Zellengröße',
+      arrange: 'Anordnen',
+      shapeStyles: 'Formenarten',
       editing: 'Bearbeiten',
     },
     case: {
@@ -524,6 +531,7 @@ const de: Messages = {
     tocOptions: 'Ebenen',
     tocMaxLevel: 'Tiefste angezeigte Ebene',
     debugDump: 'Dump',
+    cellMargins: 'Zellenränder',
     chrome: {
       title: 'Symbolleisten-Stil',
       ribbon: 'Menüband',
diff --git a/src/lib/i18n/locales/en.ts b/src/lib/i18n/locales/en.ts
index 8505fe7..b1b233b 100644
--- a/src/lib/i18n/locales/en.ts
+++ b/src/lib/i18n/locales/en.ts
@@ -480,6 +480,13 @@ const en = {
       language: 'Language',
       show: 'Show',
       debug: 'Debug',
+      tableDecor: 'Shading & Borders',
+      tableOptions: 'Table Style Options',
+      rowsColumns: 'Rows & Columns',
+      merge: 'Merge',
+      cellSize: 'Cell Size',
+      arrange: 'Arrange',
+      shapeStyles: 'Shape Styles',
       editing: 'Editing',
     },
     case: {
@@ -528,6 +535,7 @@ const en = {
     tocOptions: 'Levels',
     tocMaxLevel: 'Deepest level shown',
     debugDump: 'Dump',
+    cellMargins: 'Cell margins',
     chrome: {
       title: 'Toolbar style',
       ribbon: 'Ribbon',