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>