Tabele

Stefanescu Mihai Stefanescu Mihai Bootstrap cu 4 ani în urmă
Fii primul care comenteaza!

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>

Avem un cod de conduita.
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.