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
Use of Cookies by this site is just to guarantee Ease of Access and better user experience while browsing. Continuation of your browsing acknowledges your approval for Terms and Conditions of this site and its use of Cookies.
Privacy Policy
