Table

Les tableaux permettent d'afficher des données tabulaires. Ils sont classiques par défaut et peuvent être déclinés pour comparer des éléments (forfaits, téléphones, etc.)

Tableau simple

Aperçu

Mode responsive

Tableau avec lignes en surbrillance
DATE	TYPE DE FACTURE	LIGNE(S)	MONTANT	STATUT
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99	A régler
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99	Impayé
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99	Payé
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99 /mois	Payé

                                                        <table class="table is-fullwidth">
                                <caption>Tableau avec lignes en surbrillance</caption>
                                <thead>
                                    <tr>
                                    <th>DATE</th>
                                    <th>TYPE DE FACTURE</th>
                                    <th>LIGNE(S)</th>
                                    <th>MONTANT</th>
                                    <th>STATUT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3" itemprop="price" content="24.99">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag">A régler</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3" itemprop="price" content="24.99">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag is-warning">Impayé</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3" itemprop="price" content="24.99">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag">Payé</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3 is-main">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents">€99</span>
                                                <span class="period">/mois</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag">Payé</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

Tableau simple avec sélecteur

Aperçu

Mode responsive

Tableau avec sélecteur
DATE	TYPE DE FACTURE	LIGNE(S)	MONTANT	STATUT
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99	A régler
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99	Impayé
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99	Payé
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99 /mois	Payé

                                                        <table class="table is-fullwidth">
                                <caption>Tableau avec sélecteur</caption>
                                <thead>
                                    <tr>
                                    <th>
                                        <div class="field">
                                            <div class="control is-secondary">
                                                <input class="is-checkradio" id="checkbox-demo-secondary" type="checkbox">
                                                <label for="checkbox-demo-secondary"> </label>
                                            </div>
                                        </div>
                                    </th>
                                    <th>DATE</th>
                                    <th>TYPE DE FACTURE</th>
                                    <th>LIGNE(S)</th>
                                    <th>MONTANT</th>
                                    <th>STATUT</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="field">
                                                <div class="control is-secondary">
                                                    <input class="is-checkradio" id="checkbox-demo-2" type="checkbox">
                                                    <label for="checkbox-demo-2"> </label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3" itemprop="price" content="24.99">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag">A régler</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="field">
                                                <div class="control is-secondary">
                                                    <input class="is-checkradio" id="checkbox-demo-3" type="checkbox">
                                                    <label for="checkbox-demo-3"> </label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3" itemprop="price" content="24.99">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag is-warning">Impayé</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="field">
                                                <div class="control is-secondary">
                                                    <input class="is-checkradio" id="checkbox-demo-4" type="checkbox">
                                                    <label for="checkbox-demo-4"> </label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3" itemprop="price" content="24.99">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag">Payé</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="field">
                                                <div class="control is-secondary">
                                                    <input class="is-checkradio" id="checkbox-demo-5" type="checkbox">
                                                    <label for="checkbox-demo-5"> </label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3 is-main">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents">€99</span>
                                                <span class="period">/mois</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag">Payé</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

Tableau simple avec sélecteur et tri

Aperçu

Mode responsive

Tableau avec sélecteur
DATE	TYPE DE FACTURE	LIGNE(S)	MONTANT	STATUT
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99	A régler
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99	Impayé
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99	Payé
09/11/2018	Facture mensuelle	06 27 38 29 10	24 €99 /mois	Payé

                                                        <table class="table is-fullwidth is-selectable">
                                <caption>Tableau avec sélecteur</caption>
                                <thead>
                                    <tr>
                                    <th>
                                        <div class="field">
                                            <div class="control is-secondary">
                                                <input class="is-checkradio" id="checkbox-demo-secondary" type="checkbox">
                                                <label for="checkbox-demo-secondary"></label>
                                            </div>
                                        </div>
                                    </th>
                                    <th onclick="this.classList.toggle('is-active')">
                                        <span class="is-flex is-aligned-center">
                                            <span>DATE</span>
                                            <span class="icon is-small" aria-label="Icone">
                                                <i class="tri-arrow-down" aria-hidden="true"></i>
                                            </span>
                                        </span>
                                    </th>
                                    <th onclick="this.classList.toggle('is-active')">
                                        <span class="is-flex is-aligned-center">
                                            <span>TYPE DE FACTURE</span>
                                            <span class="icon is-small" aria-label="Icone">
                                                <i class="tri-arrow-down" aria-hidden="true"></i>
                                            </span>
                                        </span>
                                    </th>
                                    <th onclick="this.classList.toggle('is-active')">
                                        <span class="is-flex is-aligned-center">
                                            <span>LIGNE(S)</span>
                                            <span class="icon is-small" aria-label="Icone">
                                                <i class="tri-arrow-down" aria-hidden="true"></i>
                                            </span>
                                        </span>
                                    </th>
                                    <th onclick="this.classList.toggle('is-active')">
                                        <span class="is-flex is-aligned-center">
                                            <span>MONTANT</span>
                                            <span class="icon is-small" aria-label="Icone">
                                                <i class="tri-arrow-down" aria-hidden="true"></i>
                                            </span>
                                        </span>
                                    </th>
                                    <th onclick="this.classList.toggle('is-active')">
                                        <span class="is-flex is-aligned-center">
                                            <span>STATUT</span>
                                            <span class="icon is-small" aria-label="Icone">
                                                <i class="tri-arrow-down" aria-hidden="true"></i>
                                            </span>
                                        </span>
                                    </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="field">
                                                <div class="control is-secondary">
                                                    <input class="is-checkradio" id="checkbox-2" type="checkbox">
                                                    <label for="checkbox-2"> </label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3" itemprop="price" content="24.99">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag">A régler</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="field">
                                                <div class="control is-secondary">
                                                    <input class="is-checkradio" id="checkbox-3" type="checkbox">
                                                    <label for="checkbox-3"> </label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3" itemprop="price" content="24.99">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag is-warning">Impayé</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="field">
                                                <div class="control is-secondary">
                                                    <input class="is-checkradio" id="checkbox-4" type="checkbox">
                                                    <label for="checkbox-4"> </label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3" itemprop="price" content="24.99">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents"><span itemprop="priceCurrency" content="EUR">€</span>99</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag">Payé</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="field">
                                                <div class="control is-secondary">
                                                    <input class="is-checkradio" id="checkbox-5" type="checkbox">
                                                    <label for="checkbox-5"> </label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>09/11/2018</td>
                                        <td>Facture mensuelle</td>
                                        <td>06 27 38 29 10</td>
                                        <td>
                                            <div class="price is-3 is-main">
                                            <span class="main">24</span>
                                            <span class="price-details">
                                                <span class="cents">€99</span>
                                                <span class="period">/mois</span>
                                            </span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="tag">Payé</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>