1.1.0

Tables

The table element allows to display set of datas, through rows, cells and headers.

Basic usage

Rank Team Point(s)
1 FC Barcelona 98
2 Real Madrid 87
3 Atletico Madrid 80 
<table class="ms-table">
    <thead>
        <tr>
            <th>Rank</th>
            <th>Team</th>
            <th>Point(s)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>FC Barcelona</td>
            <td>98</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Real Madrid</td>
            <td>87</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Atletico Madrid</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

Striped

The .ms-striped classe allow you to striped your table.

Rank Team Point(s)
1 FC Barcelona 98
2 Real Madrid 87
3 Atletico Madrid 80 
<table class="ms-table ms-striped">
    <thead>
        <tr>
            <th>Rank</th>
            <th>Team</th>
            <th>Point(s)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>FC Barcelona</td>
            <td>98</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Real Madrid</td>
            <td>87</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Atletico Madrid</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

Bordered

The .ms-bordered classe allow you to bordered your table.

Rank Team Point(s)
1 FC Barcelona 98
2 Real Madrid 87
3 Atletico Madrid 80 
<table class="ms-table ms-striped ms-bordered">
    <thead>
        <tr>
            <th>Rank</th>
            <th>Team</th>
            <th>Point(s)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>FC Barcelona</td>
            <td>98</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Real Madrid</td>
            <td>87</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Atletico Madrid</td>
            <td>80</td>
        </tr>
    </tbody>
</table>
← IconsTypographie →