seatable-ui/site/views/table.html

Basic style of dtable related products

<h2>Table Examples</h2>

<h3>.table and .table-md</h3>
<table class="table table-md">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
    </tbody>
</table>
<p>This table uses the .table and .table-md classes for styling.</p>

<h3>.table-vcenter</h3>
<table class="table table-vcenter">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
    </tbody>
</table>
<p>This table uses the .table-vcenter class to vertically center content.</p>

<h3>.table-center</h3>
<table class="table table-center">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
    </tbody>
</table>
<p>This table uses the .table-center class to center text.</p>

<h3>.table-striped</h3>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Item 2</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr>
        <tr>
            <td>Item 5</td>
            <td>Item 6</td>
        </tr>
        <tr>
            <td>Item 7</td>
            <td>Item 8</td>
        </tr>
        <tr>
            <td>Item 9</td>
            <td>Item 10</td>
        </tr>
    </tbody>
</table>
<p>This table uses the .table-striped class for alternating row colors.</p>

<h3>.table-calendar</h3>
<table class="table table-calendar">
    <thead>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
        </tr>
        <tr>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
        </tr>
        <tr>
            <td>29</td>
            <td>30</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<p>This is a calendar styled using the .table-calendar class.</p>

<h3>.table-calendar-link</h3>
<a href="#" class="table-calendar-link">Date Link</a>
<p>This link is styled with the .table-calendar-link class for calendar dates.</p>

<h3>.table-header</h3>
<div class="table-header">Sortable Header</div>
<p>This header is styled with the .table-header class, indicating sortability.</p>

<h3>.table-header-asc</h3>
<div class="table-header table-header-asc">Ascending Header</div>
<p>This header is styled with the .table-header-asc class, indicating ascending order.</p>

<h3>.table-header-desc</h3>
<div class="table-header table-header-desc">Descending Header</div>
<p>This header is styled with the .table-header-desc class, indicating descending order.</p>