Tables Overview

Trongate CSS provides clean, responsive table styling out of the box. Tables are automatically styled for readability with alternating row colors, borders, and hover effects - all without requiring additional classes.

Basic Example

Here's a simple table that demonstrates the default styling:

Table Structure

A well-structured HTML table should include both <thead> and <tbody> sections. While these tags are technically optional, using them provides several benefits:

The <thead> Element

• Defines the header section of your table
• Contains one or more rows (<tr>) of header cells (<th>)
• Automatically styled with the primary theme color in Trongate CSS
• Helps screen readers identify header information for accessibility
• Makes it easier to style header cells differently from body cells

The <tbody> Element

• Contains the main content of your table
• Groups table rows (<tr>) and data cells (<td>)
• Enables features like scrollable tables with fixed headers
• Helps maintain table structure when rows are dynamically added or removed
• Improves readability of your HTML code

Default Features

Trongate CSS applies the following styles to tables automatically:

• Full-width layout that adapts to container size
• Consistent padding (0.7em) for all cells
• Borders around all cells using the primary theme color
• Alternating row colors for better readability
• Hover effect on table rows
• Themed header styling using the primary color
• White text color for header cells for optimal contrast

Basic Table Example with Data

Here's a more comprehensive example showing a data-rich table with multiple columns: