TABLE

Swavy UI table is used display data of a webpage in a tabular form

DEFAULT TABLE

Heading1 Heading2 Heading3
Body1 Body2 Body3
Foot1 Foot2 Foot3 
                    
<div class="sw_table-responsive">
    <table class="sw_table st_align-center">
        <thead>
            <tr>
                <th>Heading1</th>
                <th>Heading2</th>
                <th>Heading3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Body1</td>
                <td>Body2</td>
                <td>Body3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Foot1</td>
                <td>Foot2</td>
                <td>Foot3</td>
            </tr>
        </tfoot>
    </table>
</div>

TABLE WITH STRIPES & TABLE HOVER

Heading1 Heading2 Heading3
Body1 Body2 Body3
Body1 Body2 Body3
Foot1 Foot2 Foot3 
                    
<div class="sw_table-responsive">
    <table class="sw_table-striped sw_table-hover st_align-center">
        <thead>
            <tr>
                <th>Heading1</th>
                <th>Heading2</th>
                <th>Heading3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Body1</td>
                <td>Body2</td>
                <td>Body3</td>
            </tr>
            <tr>
                <td>Body1</td>
                <td>Body2</td>
                <td>Body3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Foot1</td>
                <td>Foot2</td>
                <td>Foot3</td>
            </tr>
        </tfoot>
    </table>
</div>

UN-BORDERED TABLE WITH STRIPES

Heading1 Heading2 Heading3
Body1 Body2 Body3
Body1 Body2 Body3
Foot1 Foot2 Foot3 
                    
<div class="sw_table-responsive">
    <table class="sw_table-striped sw_table-border-none st_align-center">
        <thead>
            <tr>
                <th>Heading1</th>
                <th>Heading2</th>
                <th>Heading3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Body1</td>
                <td>Body2</td>
                <td>Body3</td>
            </tr>
            <tr>
                <td>Body1</td>
                <td>Body2</td>
                <td>Body3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Foot1</td>
                <td>Foot2</td>
                <td>Foot3</td>
            </tr>
        </tfoot>
    </table>
</div>

SEMI-BORDERED TABLE

Heading1 Heading2 Heading3
Body1 Body2 Body3
Body1 Body2 Body3
Foot1 Foot2 Foot3
Heading1 Heading2 Heading3
Body1 Body2 Body3
Body1 Body2 Body3
Foot1 Foot2 Foot3 
                    
<div class="sw_table-responsive">
    <table class="sw_table-striped sw_table-border-half st_align-center">
        <thead>
            <tr>
                <th>Heading1</th>
                <th>Heading2</th>
                <th>Heading3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Body1</td>
                <td>Body2</td>
                <td>Body3</td>
            </tr>
            <tr>
                <td>Body1</td>
                <td>Body2</td>
                <td>Body3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Foot1</td>
                <td>Foot2</td>
                <td>Foot3</td>
            </tr>
        </tfoot>
    </table>
</div>

<div class="sw_table-responsive sw_mt-3">
    <table class="sw_table-striped sw_table-border-side st_align-center">
        <thead>
            <tr>
                <th>Heading1</th>
                <th>Heading2</th>
                <th>Heading3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Body1</td>
                <td>Body2</td>
                <td>Body3</td>
            </tr>
            <tr>
                <td>Body1</td>
                <td>Body2</td>
                <td>Body3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Foot1</td>
                <td>Foot2</td>
                <td>Foot3</td>
            </tr>
        </tfoot>
    </table>
</div>