Table

Use the table when you need authored rows and columns with stripes, borders, and compact layout.

AEM publisher guidelines

View the component in Figma

Live demo

Visitors scan comparisons, schedules, and structured facts faster than in long paragraphs. Content authors should use header rows, simple grids, and plain language in cells; visual designers pick density and lines so the table stays readable on narrow screens (consider horizontal scroll or splitting very wide tables).

Behaviour

  • Visual options (lines, stripes, hover, small text) combine on the wrapper and inner table.
  • In edit mode, an empty state may show a placeholder until authors add content.

Anatomy

  1. Wrapper around the table for styling hooks.
  2. Table HTML from the authoring field.

Data table (placeholder)

Replace with striped and compact variants.

Content guidelines

  • Use <th> for header cells with scope on simple tables.
  • Add a caption when the table’s purpose is not clear from surrounding headings.

Best practices

Do

  • Include <th> cells with scope for simple tables.
  • Provide captions (<caption>) when the table title is not obvious from surrounding headings.

Don't

  • Don't build layout tables for non-data content.

When to use

  • Tabular data with row and column relationships (schedules, comparisons).

When not to use

  • Layout grids; use Column control or Grid container.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/table/table.jsp']

Technical behaviour

table.jsp builds a div wrapper whose classes reflect dialog toggles: horizontal and vertical lines, hover, striped shading, small-text / table-sm, and optional additionalClass. The inner cq:text on tableData does not escape XML so table tags render; a placeholder image appears in empty edit states.

Legacy smallText boolean maps to small-text when textSize is empty.

Authoring fields

FieldPurpose
Table dataHTML for <table> and children.
Lines / hover / shadingVisual options.
Text sizeDefault or small.
CSS classOptional extra class.

Instances in the codebase

Location Notes
apps/concordia/components/table/table.jsp Implementation.
Item Location
Component apps/concordia/components/table/table.jsp