Bootstrap - Tabelas
O Bootstrap fornece um layout limpo para a construção de tabelas. Alguns dos elementos da tabela suportados pelo Bootstrap são -
| Sr. Não. | Tag e descrição |
|---|---|
| 1 | <table> Elemento de empacotamento para exibir dados em um formato tabular |
| 2 | <thead> Elemento de contêiner para linhas de cabeçalho da tabela (<tr>) para rotular as colunas da tabela. |
| 3 | <tbody> Elemento de contêiner para linhas da tabela (<tr>) no corpo da tabela. |
| 4 | <tr> Elemento de contêiner para um conjunto de células de tabela (<td> ou <th>) que aparece em uma única linha. |
| 5 | <td> Célula da tabela padrão. |
| 6 | <th> Célula de tabela especial para rótulos de coluna (ou linha, dependendo do escopo e do posicionamento). Deve ser usado em um <thead> |
| 7 | <caption> Descrição ou resumo do que a tabela contém. |
Mesa Básica
Se você quiser um estilo de mesa bonito e básico com apenas um pouco de preenchimento leve e divisórias horizontais, adicione a classe base de .table a qualquer mesa, conforme mostrado no exemplo a seguir -
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>Classes de mesa opcionais
Junto com a marcação da tabela base e a classe .table, existem algumas classes adicionais que você pode usar para definir o estilo da marcação. As seções a seguir darão uma ideia de todas essas classes.
Mesa Listrada
Adicionando a classe .table-stripes , você obterá faixas nas linhas dentro de <tbody>, como visto no exemplo a seguir -
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Mesa Bordada
Ao adicionar a classe .table-bordered , você obterá bordas ao redor de cada elemento e cantos arredondados ao redor de toda a tabela, como visto no exemplo a seguir -
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Hover Table
Ao adicionar a classe .table-hover , um fundo cinza claro será adicionado às linhas enquanto o cursor passa sobre elas, conforme visto no exemplo a seguir -
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Mesa Condensada
Ao adicionar a classe .table-condensed , o preenchimento de linha é cortado pela metade para condensar a tabela. como visto no exemplo a seguir. Isso é útil se você quiser informações mais densas.
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Classes contextuais
As classes contextuais mostradas na tabela a seguir permitirão que você altere a cor de fundo das linhas da tabela ou células individuais.
| Sr. Não. | Classe e descrição |
|---|---|
| 1 | .active Aplica a cor flutuante a uma determinada linha ou célula |
| 2 | .success Indica uma ação bem-sucedida ou positiva |
| 3 | .warning Indica um aviso que pode precisar de atenção |
| 4 | .danger Indica uma ação perigosa ou potencialmente negativa |
Essas classes podem ser aplicadas a <tr>, <td> ou <th>.
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>Tabelas responsivas
Ao envolver qualquer .table na classe .table-responsive , você fará a tabela rolar horizontalmente até pequenos dispositivos (abaixo de 768 px). Ao visualizar em algo maior que 768px de largura, você não verá nenhuma diferença nessas tabelas.
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>