---
name: ms-teams-tables
description: Use when inserting, filling, or modifying a table in the MS Teams chat compose box via Chrome DevTools MCP. Covers the hidden overflow button that opens the table picker. Use ONLY when the user asks to create or edit a table in an MS Teams message.
---

# MS Teams tables

How to insert and fill tables in the MS Teams chat compose box via Chrome
DevTools MCP. Verified empirically against the live Teams web app.

Teams' chat editor DOES support tables, but the "Insert table" button is
NOT on the main toolbar. It is hidden behind an overflow "more options"
button.

## Step 1 — open the table picker

1. Focus the editor.
2. Open the formatting toolbar (`Ctrl+Shift+X` or click "Show Formatting
   options").
3. In the main FluentUI toolbar (`.ms-FocusZone.ui-toolbar` with ~24
   buttons), the overflow button is at **index 18** — it has
   `aria-haspopup="dialog"` and NO `aria-label`. Click it via
   `evaluate_script`:
   ```js
   () => {
     const tb = Array.from(document.querySelectorAll('.ms-FocusZone.ui-toolbar'))
       .find(t => t.querySelectorAll('button').length > 10);
     Array.from(tb.querySelectorAll('button'))[18].click();
   }
   ```
   This opens the "Insert table" dialog.

Alternatively, once the dialog is open, locate any button whose
`aria-label` matches `/^Insert \d+ by \d+ table$/`.

## Step 2 — pick a size

The dialog presents a grid of preset buttons, `Insert N by M table` where
N ∈ [1..7] (columns) and M ∈ [1..5] (rows), plus an "Allow edits"
checkbox. Click the desired size:
```js
() => {
  const btn = Array.from(document.querySelectorAll('button'))
    .find(b => b.getAttribute('aria-label') === 'Insert 3 by 3 table');
  btn.click();
}
```
A real `<table>` with `<td>` cells is inserted. Each cell is its own
`contenteditable` nested editable.

## Step 3 — fill cells

The first cell is auto-focused after insert. Use `type_text` to fill it,
then `Tab` to move to the next cell, and repeat:

```
chrome-devtools_type_text  text: "A1"
chrome-devtools_press_key  key: "Tab"
chrome-devtools_type_text  text: "B1"
chrome-devtools_press_key  key: "Tab"
chrome-devtools_type_text  text: "A2"
chrome-devtools_press_key  key: "Tab"
chrome-devtools_type_text  text: "B2"
```

`Tab` navigates cells left-to-right, top-to-bottom. `Shift+Tab` reverses.
Inline formatting shortcuts (`Ctrl+B` etc.) work inside cells.

## Step 4 — modify an existing table

Once a table exists, the main toolbar reveals two table-specific buttons:
- "Insert column or row" (`aria-haspopup="dialog"`)
- "Delete column, row, or table" (`aria-haspopup="dialog"`)

Use `evaluate_script` to click these by `aria-label`. They open their own
dialogs with row/column insert/delete options.

## Verifying table state

```js
() => {
  const e = document.querySelector('[role="textbox"]');
  const t = e.querySelector('table');
  return t ? {
    rows: t.rows.length,
    cols: t.rows[0].cells.length,
    cells: Array.from(t.querySelectorAll('td')).map(c => c.innerText.trim())
  } : 'no table';
}
```

## Do NOT

- Do not look for "Insert table" on the main formatting toolbar — it is
  hidden in the overflow button (index 18, no aria-label,
  `haspopup="dialog"`).
- Do not use the "Actions and apps" menu for tables — that menu only
  contains "Set delivery options" and "Record video clip".