Table

A structured data component for comparing rows and columns.

When To Use

Use	Avoid
A structured data component for comparing rows and columns.	Avoid using this component when the content has a different job or needs a simpler plain-text treatment.
Use tables and metadata lists when people compare values, scan records, sort information, or review evidence.	Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide.
Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews.	Avoid copying placeholder IDs, links, contact details, or image paths without replacing them.

Example

Example event comparison table
Use case	Recommended style	Reason
Public webpage	Open Sans body, clear section headers	Supports scanning and consistent brand implementation.
Event flyer	Display title, short body copy, quiet captions	Keeps the first read strong without crowding the page.
Production Notes
Governance note	Body small with clear labels	Helps dense information stay readable and auditable.

Code

CSS Imports

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";

Starter Markup

<div class="lds-table-wrap">
  <table class="lds-table">
    <caption>Example event comparison table</caption>
    <thead>
      <tr><th scope="col">Use case</th><th scope="col">Recommended style</th><th scope="col">Reason</th></tr>
    </thead>
    <tbody>
      <tr><td>Public webpage</td><td><strong>Open Sans body</strong>, clear section headers</td><td>Supports scanning and consistent brand implementation.</td></tr>
      <tr><td>Event flyer</td><td><strong>Display title</strong>, short body copy, quiet captions</td><td>Keeps the first read strong without crowding the page.</td></tr>
      <tr class="lds-table-section-row"><td colspan="3">Production Notes</td></tr>
      <tr><td>Governance note</td><td><strong>Body small</strong> with clear labels</td><td>Helps dense information stay readable and auditable.</td></tr>
    </tbody>
  </table>
</div>

Class Reference

Class	Use
`.lds-table-wrap`	Wraps a table with the Landcare top rule and horizontal scrolling for narrow screens.
`.lds-table`	Applies Landcare table typography, quiet row rules, spacing, and header hierarchy.
`.lds-table-section-row`	Adds a quiet grouped section row inside a table without turning the table into a card.

Review Notes

Web

Use tables and metadata lists when people compare values, scan records, sort information, or review evidence.

Print

Use captions, source notes, quiet rules, aligned numbers, and enough space for photocopying or projection.

States And Variants

Document loading, empty, filtered, sorted, selected, error, and source-note states.

Checklist

Brand colours, typography, and logo use are inherited from the approved master brand.
The first-read message or action is clear.
Labels, headings, links, and alternative text are meaningful.
Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.