Scroll to Top

Table

Customize the table as much as you want now with Material Grammi.

SITEMAP Documentation / Css / Table

Demo

heading
table column in row

Code copy

<table>
    <thead>
        <tr>heading</tr>
    </thead>
    <tbody>
        <tr>
            <td>table column in row</td>
        </tr>
    </tbody>
</table>

use Stripped table to created focused table.

Demo

table column in row1
table column in row2
table column in row3

Code copy

    <table class="stripped">
        <tbody>
            <tr>
                <td>table column in row1</td>
            </tr>
            <tr>
                <td>table column in row2</td>
            </tr>
            <tr>
                <td>table column in row3</td>
            </tr>
        </tbody>
    </table>

Users can add auto border on tables.

Demo

table heading 01 table heading 02
Table column 01 of row 01 Table column 02 of row 01
Table column 01 of row 02 Table column 02 of row 02

Code copy

<table class="table-bordered-bottom table-bordered-right">
    <thead>
        <th>table heading 01</th>
        <th>table heading 02</th>
    </thead>
    <tbody>
        <tr>
            <td>Table column 01 of row 01</td>
            <td>Table column 02 of row 01</td>
        </tr>
        <tr>
            <td>Table column 01 of row 02</td>
            <td>Table column 02 of row 02</td>
        </tr>
    </tbody>
</table> 

Table Rows can be made darkened on hovering over.

Demo

table heading 01 table heading 02
Table column 01 of row 01 Table column 02 of row 01
Table column 01 of row 02 Table column 02 of row 02

Code copy

<table class="hoverable">
    <thead>
        <th>table heading 01</th>
        <th>table heading 02</th>
    </thead>
    <tbody>
        <tr>
            <td>Table column 01 of row 01</td>
            <td>Table column 02 of row 01</td>
        </tr>
        <tr>
            <td>Table column 01 of row 02</td>
            <td>Table column 02 of row 02</td>
        </tr>
    </tbody>
</table> 

Feedback