Buty na półce

Odstawiliśmy buty na półkę w szafie, grzecznie, w porządeczku czekają tam na nas. Gdyby tak popatrzyć na tą szafkę to buty siedzą w niej jak dane w tabeli. Każda para na swoim miejscu. Przez analogię szafki na buty do zagadnienia formatowania tabeli w Bootstrap – też mam skojarzenia ;).

No ale już tak bardziej na serio. Bootstrap daje nam możliwość formatowania tabeli. Mamy tabelę taką jak w poniższym kodzie:

<div class="row">
        <div class="col-md-12">
        <span style="font-weight: bold;">"surowa" tabela przed formatowaniem</span>
            <table>
                <tr>
                    <td>1</td>
                    <td>Ala</td>
                    <td>Kraków</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, accusamus.</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>ma</td>
                    <td>Warszawa</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, tempora! </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>kota</td>
                    <td>Poznań</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, at. </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Ola</td>
                    <td>Katowice</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, repellat. </td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>ma</td>
                    <td>Szczecin</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, culpa? </td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>psa</td>
                    <td>Gdynia</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, illum? </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <br>
            <span style="font-weight: bold;">tabela "sformatowana" poprzez dodanie do znacznika &amp;lt;table&amp;gt; klasy &amp;quot;table&amp;quot;</span>
            <table class="table">
                <tr>
                    <td>1</td>
                    <td>Ala</td>
                    <td>Kraków</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, accusamus.</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>ma</td>
                    <td>Warszawa</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, tempora! </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>kota</td>
                    <td>Poznań</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, at. </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Ola</td>
                    <td>Katowice</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, repellat. </td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>ma</td>
                    <td>Szczecin</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, culpa? </td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>psa</td>
                    <td>Gdynia</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, illum? </td>
                </tr>
            </table>                
        </div>
    </div>

Poniżej przykłady zawierające zarówno tabelę niesformatowaną jak i sformatowaną poprzez dodanie różnych klas do znacznika <table>.

Np.  dodanie do znacznika <table> klasy „table” (<table class=”table”>) dodaje poziome linie do tabeli.
Z kolei dodanie do znacznika <table> klas „table table-striped” (<table class=”table table-striped”>) dodaje poziome linie do tabeli i zmienia kolor co drugiego wiersza.

Chcąc mieć tabelę z obramowaniem musimy dodać klasę „table-bordered”.

Jeśli poszczególne wiersze tabeli maja zmieniać kolor wypełnienia po najechaniu na nie (hover) to musimy użyć klasy „table-hover”.

Przykład-> https://www.rafalrebacz.pl/examples/bootstrap/table.html

Istnieje jeszcze kilka klas używanych do formatowania wierszy tabeli lub nawet pojedynczych komórek.

<table class="table table-bordered table-striped">
	<thead>
		<tr>
			<th>Klasa</th>
			<th>opis</th>
		</tr>
	</thead>
	<tbody>
		<tr class="active">
			<td>.active</td>
			<td>Applies the hover color to a particular row or cell</td>
		</tr>
		<tr class="success">
			<td>.success</td>
		<td>Wskazuje akcję zakończoną sukcesem lub pozytywną</td>
		</tr>
		<tr class="info">
			<td>.info</td>
			<td>Wskazuje neutralną informacyjną zmianę lub akcję</td>
		</tr>
		<tr class="warning">
			<td>.warning</td>
		<td>Wskazuje ostrzeżenie i może potrzebować uwagi</td>
		</tr>
		<tr class="danger">
			<td>.danger</td>
			<td>Wskazuje nibezpieczną lub potencjalnie negatywną akcję</td>
		</tr>
	</tbody>
</table>

Przykład-> https://www.rafalrebacz.pl/examples/bootstrap/table_trtd.html

Responsywność tabeli możemy uzyskać poprzez zamknięcie tabeli w bloku z klasą „table-responsive” tak jak na przykładzie poniżej:

<div class="table-responsive">
    <table class="table table-bordered table-striped">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

Autor: gervee

Pełnoetatowy ojciec małej gromadki, programista(?), "amator" fotograf, "dłubacz" lubiący DIY, miłośnik chmielonego napitku. "Żartowniś" bez poczucia humoru ;). Zobacz wszystkie wpisy opublikowane przez gervee