Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Color system Iconography Layout and spacing Input & fields Buttons Responsive Accessibility Design tokens Content design
Get started UI Components Templates UI Kit
Roadmap

Links

Home Getting Started UI Kit

Guidelines

Typography Color system Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

Tables

Tables are used to organize and display structured data in rows and columns, allowing users to scan, compare, and understand information efficiently. In the Sharjah Design System, tables follow consistent spacing, typography, and interaction patterns to ensure clarity and usability across all digital services.

Purpose

  • Present structured or comparative data
  • Display lists with multiple attributes
  • Support data-heavy pages such as reports and dashboards
  • Enable users to scan and compare values easily

Avoid tables for simple content that can be presented as text or lists.

Component Structure

  • Header row – defines column labels
  • Body rows – display data entries
  • Cells – individual data values
  • Optional footer – summary, pagination or totals

Interaction Behavior

  • Rows may support hover states for better focus
  • Sorting and actions (if present) must be clearly indicated
  • Interactive elements within cells remain accessible

Accessibility Guidelines

  • Use semantic HTML table elements (<table>, <thead>, <tbody>)
  • Ensure header cells are properly associated with data cells
  • Maintain sufficient contrast between text and backgrounds
  • Support keyboard navigation where interactions exist

Responsive Behavior

  • Tables adapt to smaller screens via horizontal scrolling or stacked layouts
  • Column visibility may be adjusted on mobile
  • Text remains readable at all breakpoints
Previous Pagination Next Tabs