Tables help logically organise content in columns and rows to make it easier to scan, understand or compare data or information.
table
class to make the table fill the width of its parent container.<caption>
element to describe a table and helps users find and understand tables.<!-- Row header: <th class="scope="row"> Column header: <th class="scope="col"> --> <table class="table"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col" class="text-right">Header</th> <th scope="col" class="text-right">Header</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td class="text-right">7,670,700</td> <td class="text-right">3.1%</td> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td class="text-right">5,996,400</td> <td class="text-right">2.5%</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td class="text-right">517,400</td> <td class="text-right">4.0%</td> </tr> </tbody> </table>
To add borders, apply the class table-bordered
to the table element.
<!-- Row header: <th class="scope="row"> Column header: <th class="scope="col"> --> <table class="table table-bordered"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col" class="text-right">Header</th> <th scope="col" class="text-right">Header</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td class="text-right">7,670,700</td> <td class="text-right">3.1%</td> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td class="text-right">5,996,400</td> <td class="text-right">2.5%</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td class="text-right">517,400</td> <td class="text-right">4.0%</td> </tr> </tbody> </table>
To remove the zebra stripes from rows, apply the class qg-table-no-stripes
to the table element.
<!-- Row header: <th class="scope="row"> Column header: <th class="scope="col"> --> <table class="table qg-table-no-stripes"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col" class="text-right">Header</th> <th scope="col" class="text-right">Header</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td class="text-right">7,670,700</td> <td class="text-right">3.1%</td> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td class="text-right">5,996,400</td> <td class="text-right">2.5%</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td class="text-right">517,400</td> <td class="text-right">4.0%</td> </tr> </tbody> </table>
Display a data table that is searchable, sortable and has pagination.
<!-- Row header: <th class="scope="row"> Column header: <th class="scope="col"> --> <div class="sortable-table" data-search="true" data-rows="10"> <table class="dataTable no-footer"> <caption>Table caption</caption> <thead> <tr> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col" class="text-right">Header</th> <th scope="col" class="text-right">Header</th> </tr> </thead> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> <td class="text-right">7,670,700</td> <td class="text-right">3.1%</td> <tr> <td>D</td> <td>E</td> <td>F</td> <td class="text-right">5,996,400</td> <td class="text-right">2.5%</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> <td class="text-right">517,400</td> <td class="text-right">4.0%</td> </tr> </tbody> </table> </div>