Tabele

Bootstrap ne pune la discpozitie o serie de clase ce ne pot schimba modul in care arata un tabel in HTML.

Un table simplu

Putem crea un tabel normal si ii dam clasa “table” care ii va daun aspect ceva mai ingirjit.

    <table class="table">
        <thead>
            <tr>
                <th>Rand</th>
                <th>Nume</th>
                <th>Prenume</th>
                <th>Limbaj</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Stefanescu</td>
                <td>Mihai</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ionescu</td>
                <td>George</td>
                <td>C#</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Popescu</td>
                <td>Ion</td>
                <td>Java</td>
            </tr>
        </tbody>
    </table>

Tabel cu randuri colorate

In bootstrap putem face un tabel cu randuri de culori diferite foarte simplu , trebuie numai sa punem clasa table-striped la table.

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Rand</th>
                <th>Nume</th>
                <th>Prenume</th>
                <th>Limbaj</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Stefanescu</td>
                <td>Mihai</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ionescu</td>
                <td>George</td>
                <td>C#</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Popescu</td>
                <td>Ion</td>
                <td>Java</td>
            </tr>
        </tbody>
    </table>

Tabel cu border pe margini

Pur si simplu adaugam si clasa table-bordered la tabel.

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Rand</th>
                <th>Nume</th>
                <th>Prenume</th>
                <th>Limbaj</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Stefanescu</td>
                <td>Mihai</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ionescu</td>
                <td>George</td>
                <td>C#</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Popescu</td>
                <td>Ion</td>
                <td>Java</td>
            </tr>
        </tbody>
    </table>

Tabel Condensed

Acest tip de tabel nu este altceva decat un tabel cu mai putin padding.

    <table class="table table-condensed">
        <thead>
            <tr>
                <th>Rand</th>
                <th>Nume</th>
                <th>Prenume</th>
                <th>Limbaj</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Stefanescu</td>
                <td>Mihai</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ionescu</td>
                <td>George</td>
                <td>C#</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Popescu</td>
                <td>Ion</td>
                <td>Java</td>
            </tr>
        </tbody>
    </table>