Table

Style wrapper for native HTML tables in the light DOM.

Examples

Slots

NameDescription
defaultA native `<table>` element and its sections.

Usage

Table wraps a native <table> and applies Duo borders, typography, header treatment, and caption styling. Markup stays in the light DOM so applications can build tables imperatively or declaratively without losing table semantics.

Do

  • Put one native <table> in the default slot.
  • Use <caption> for the table title, or a visually hidden caption when a nearby heading already names the table.
  • Set scope="col" / scope="row" on header cells and use the HTML align attribute when a column needs center or right alignment.
  • Keep row content as plain text or existing Duo components such as duo-button.

Don’t

  • Don’t use Table for simple term/value rows — use Description list.
  • Don’t use Table for navigable list rows — use List group item.
  • Don’t replace <table> structure with div-based grids.