Tables

Overview #

The table component provides a variety of table designs with different styles and functionality such as zebra-striped rows, outlined tables, and responsive tables.

Basic Table #

    

        

            

                

                    
ID
                    
Name
                    
Profession
                
            
            

                

                    
Id1
                    
Name1
                    
Profession1
                
                

                    
Id2
                    
Name2
                    
Profession2
                
            
        
    
    

        
        
HTML
        
    
    <table class="table w-100" style="--table-space:7px;">
    <thead>
        <tr class="bg-primary-color">
            <th>ID</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Id1</td>
            <td>Name1</td>
            <td>Profession1</td>
        </tr>
        <tr>
            <td>Id2</td>
            <td>Name2</td>
            <td>Profession2</td>
        </tr>
    </tbody>
</table>

Table with Images and Buttons #

    

        

            

                

                    
ID
                    
Name
                    
Profession
                
            
            

                

                    

                    
Name1
                    
Primary
                
            
        
    
    

        
        
HTML
        
    
    <table class="table w-100" style="--table-space:7px;">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><img src="../../assets/media/images/2669ac63cf122930dc8980e08c3c917c.jpg" alt="Image"></td>
            <td>Name1</td>
            <td><button type="button" class="btn btn-primary btn-round">Primary</button></td>
        </tr>
    </tbody>
</table>

Zebra-striped Table #

    

        

            

                

                    
ID
                    
Name
                    
Profession
                
            
            

                

                    
Id1
                    
Name1
                    
Profession1
                
                

                    
Id2
                    
Name2
                    
Profession2
                
            
        
    
    

        
        
HTML
        
    
    <table class="table w-100" style="--table-space:7px;">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody class="zebra-mode">
        <tr>
            <td>Id1</td>
            <td>Name1</td>
            <td>Profession1</td>
        </tr>
        <tr>
            <td>Id2</td>
            <td>Name2</td>
            <td>Profession2</td>
        </tr>
    </tbody>
</table>

Outlined Table #

    

        

            

                

                    
ID
                    
Name
                    
Profession
                
            
            

                

                    
Id1
                    
Name1
                    
Profession1
                
            
        
    
    

        
        
HTML
        
    
    <table class="table outline w-100" style="--table-space:7px;">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Id1</td>
            <td>Name1</td>
            <td>Profession1</td>
        </tr>
    </tbody>
</table>

Responsive Table #

    

        

            

                

                    
Lorem
                    
Name
                    
Profession
                
            
            

                

                    
Id1
                    
Name1
                    
Profession1
                
            
        
    
    

        
        
HTML
        
    
    <table class="table responsive-table w-100" style="--table-space:7px;">
    <thead>
        <tr>
            <th>Lorem</th>
            <th>Name</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-thead-title="Lorem">Id1</td>
            <td data-thead-title="Name">Name1</td>
            <td data-thead-title="Profession">Profession1</td>
        </tr>
    </tbody>
</table>