Tables - Wilout UI

Basic Table

#	Name	Email	Role
1	John Doe	john@example.com	Admin
2	Jane Smith	jane@example.com	User
3	Bob Johnson	bob@example.com	User

<table class="ui-table">
  <thead>
    <tr><th>#</th><th>Name</th><th>Email</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John Doe</td><td>john@example.com</td><td>Admin</td></tr>
    <tr><td>2</td><td>Jane Smith</td><td>jane@example.com</td><td>User</td></tr>
  </tbody>
</table>

Striped Table

Add alternating row colors with ui-table--striped.

#	Name	Email	Role
1	John Doe	john@example.com	Admin
2	Jane Smith	jane@example.com	User
3	Bob Johnson	bob@example.com	User

<table class="ui-table ui-table--striped">
  ...
</table>

Bordered Table

Add borders to all cells with ui-table--bordered.

#	Name	Status
1	Item 1	Active
2	Item 2	Pending

<table class="ui-table ui-table--bordered">
  ...
</table>

Hoverable Rows

Add hover effect on rows with ui-table--hover.

#	Name	Actions
1	Hover me
2	Hover me too

<table class="ui-table ui-table--hover">
  ...
</table>

Compact Table

Reduce cell padding with ui-table--sm.

#	Name	Value
1	Compact row	100
2	Another row	200
3	More data	300

<table class="ui-table ui-table--sm ui-table--striped">
  ...
</table>

CSS Classes Reference

Class	Description
`.ui-table`	Base table class
`.ui-table--striped`	Alternating row colors
`.ui-table--bordered`	Borders on all cells
`.ui-table--hover`	Hover effect on rows
`.ui-table--sm`	Compact/smaller padding