Table Component

Live Example

HTML Structure

Axiom01 styles standard HTML <table> elements. No special classes are needed for basic table styling, promoting semantic HTML.

<!-- Basic Table -->
	<table>
			<thead>
					<tr>
							<th>#</th>
							<th>First Name</th>
							<th>Last Name</th>
							<th>Username</th>
					</tr>
			</thead>
			<tbody>
					<tr>
							<td>1</td>
							<td>Mark</td>
							<td>Otto</td>
							<td>@mdo</td>
					</tr>
					<tr>
							<td>2</td>
							<td>Jacob</td>
							<td>Thornton</td>
							<td>@fat</td>
					</tr>
			</tbody>
	</table>

	<!-- Striped Table -->
	<table class="striped">
			<!-- ... table content ... -->
	</table>

Styling

Axiom01 applies default styles to <table>, <th>, and <td> elements. For variations, a minimal class approach is used:

• Default: Basic borders, padding, and text alignment are applied to all tables.
• Striped: Add the .striped class to the <table> element to apply alternating row backgrounds for improved readability.
• Hover Rows: Rows automatically get a subtle hover effect.

Responsive Tables

For tables that may contain many columns and overflow on smaller screens, wrap the table in a container with overflow-x: auto; to enable horizontal scrolling.

<div style="overflow-x: auto;">
			<table>
					<!-- ... wide table content ... -->
			</table>
	</div>

Accessibility

Tables are inherently accessible when structured correctly:

• Always use <thead>, <tbody>, and <th> elements.
• Use the scope attribute on <th> elements (e.g., <th scope="col"> or <th scope="row">) to explicitly define header cells for screen readers.
• Provide a <caption> element for a descriptive table title.

Customization

Customize the appearance using Axiom01's CSS variables for colors (e.g., --a-color-outline for borders, --a-color-surface-variant for striped rows), spacing, and typography. You can also add custom classes for more specific table variations.