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

      <table class="uk-table"></table>

Try it now

Source Code

     <table class="uk-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Jhon Smith</td>
            <td>Designer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>Developer</td>
        </tr>
    </tbody>
</table>

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

      <table class="uk-table uk-table-divider"></table>

Try it now

Source Code

     <table class="uk-table  uk-table-divider">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Jhon Smith</td>
            <td>Designer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>Developer</td>
        </tr>
    </tbody>
</table>

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

      <table class="uk-table uk-table-striped"></table>

Try it now

Source Code

     <table class="uk-table uk-table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Jhon Smith</td>
            <td>Designer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>Developer</td>
        </tr>
    </tbody>
</table>

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

      <table class="uk-table uk-table-hover"></table>

Try it now

Source Code

     <table class="uk-table uk-table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Jhon Smith</td>
            <td>Designer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>Developer</td>
        </tr>
    </tbody>
</table>

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 a 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

      <div class="uk-overflow-auto">
  <table class="uk-table"></table>
</div>

Try it now

Source Code

     <div class="uk-overflow-auto">        
<table class="uk-table uk-table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Jhon Smith</td>
            <td>Designer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>Developer</td>
        </tr>
    </tbody>
</table>
</div>

Try it now

Source Code: Output

The above source code result will be:

        
            Name
            Job
        
            Jhon Smith
            Designer
        
            John Doe
            Developer

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4