Tutorial Image

UIkit Table

UIkit table provides different predefined table classes that are used to create nice looking table having different styles.

UIKit Basic Table

To create UIkit basic table, add .uk-table class to the <table> element base class

Example

Name Job
Jhon Smith Designer
John Doe Developer

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Name Job
Jhon Smith Designer
John Doe Developer

UIkit Table With Horizontal Row Divider

The predefined class .uk-table-divider is used to create a divider between tables rows.

Example

Name Job
Jhon Smith Designer
John Doe Developer

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Name Job
Jhon Smith Designer
John Doe Developer

UIkit Table: Striped Row

To create UIkit table stripped row, add .uk-table & uk-table-striped class to the <table> element base class.

Example

Name Job
Jhon Smith Designer
John Doe Developer

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Name Job
Jhon Smith Designer
John Doe Developer

UIkit Table: Hover Effect

To add table hover effect, simply assign .uk-table & .uk-table-hover class to the <table> element base class.

Example

Name Job
Jhon Smith Designer
John Doe Developer

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Name Job
Jhon Smith Designer
John Doe Developer

Responsive Table

To create responsive table, simply wrap the table inside the container having class .uk-overflow-auto.

Example

Name Job
Jhon Smith Designer
John Doe Developer

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Name Job
Jhon Smith Designer
John Doe Developer