SlideShare uma empresa Scribd logo
1 de 15
Para criação da tabela, precisa usar a classe .table
<table class = "table" > ... </ Table>
Atenção: utilizar table-responsiva <div class = "table-responsiva" > <table class = "table" > ... </ table> </ div>
 fileiras listradas
Use .table-striped para adicionar zebra-striping em qualquer linha (row ) de
tabela dentro do <tbody>.
<table class="table table-bordered"> ... </table>
 Tabela contornada
Adicionar .table-bordered para as fronteiras em todos os lados da tabela e células.
<table class="table table-bordered"> ... </table>
 Linhas com Hover
Adicionar .table-hover para permitir que um estado de foco em linhas de tabela dentro de um <tbody> .
<table class = "table table-hover" > ... </ table>
 Tabela compacta
<table class="table table-condensed"> ... </table>
 Use contextual para adicionar cor nas tabelas e nas linhas (rows) ou nas celulas
individual.
Class Description
.active Aplica-se a cor de foco para uma linha ou célula em particular
.success Indica uma ação bem-sucedida ou positivo
.info Indica uma alteração informativa neutra ou ação
.warning Indica um aviso de que pode precisar de atenção
.danger Indica uma ação perigosa ou potencialmente negativo
 O texto marcado
 O texto excluído
 Texto sublinhado
 texto pequeno
 Ultiliza small para dizer que 85% do tamanho do elemento do pai.
<p class = "text-esquerda" > texto alinhado à esquerda. </ p>
<p class = "text-center" > Centro de texto alinhado. </ p>
<p class = "text-right" > texto alinhado à direita. </ p>
<p class = "text-justify" > texto justificado. </ p>
<p class = "text-nowrap" > Nenhum texto envoltório. </ p>
Obrigada 

Mais conteúdo relacionado

Destaque

Conceptos basicos de las redes
Conceptos basicos de las redesConceptos basicos de las redes
Conceptos basicos de las redespabloquin0925
 
Proyecto de unidad magisterial
Proyecto de unidad magisterialProyecto de unidad magisterial
Proyecto de unidad magisterialunidad magisterial
 
Efectos nocivos de la tecnología informática en el
Efectos nocivos de la tecnología informática en elEfectos nocivos de la tecnología informática en el
Efectos nocivos de la tecnología informática en elFernando Londoño
 
Codigo contencioso administrativo
Codigo contencioso administrativoCodigo contencioso administrativo
Codigo contencioso administrativoOscar Pacheco
 
2016年10月13日「ONA16」参加報告会
2016年10月13日「ONA16」参加報告会2016年10月13日「ONA16」参加報告会
2016年10月13日「ONA16」参加報告会Atsuo Fujimura
 
лекция 1 переделка1
лекция 1 переделка1лекция 1 переделка1
лекция 1 переделка1giduv_ofvc
 

Destaque (10)

Conceptos basicos de las redes
Conceptos basicos de las redesConceptos basicos de las redes
Conceptos basicos de las redes
 
Venezuela
VenezuelaVenezuela
Venezuela
 
Siva resume
Siva resumeSiva resume
Siva resume
 
El ser humano y la tecnologia1
El ser humano y la tecnologia1El ser humano y la tecnologia1
El ser humano y la tecnologia1
 
Proyecto de unidad magisterial
Proyecto de unidad magisterialProyecto de unidad magisterial
Proyecto de unidad magisterial
 
SimpleXpense-prezi
SimpleXpense-preziSimpleXpense-prezi
SimpleXpense-prezi
 
Efectos nocivos de la tecnología informática en el
Efectos nocivos de la tecnología informática en elEfectos nocivos de la tecnología informática en el
Efectos nocivos de la tecnología informática en el
 
Codigo contencioso administrativo
Codigo contencioso administrativoCodigo contencioso administrativo
Codigo contencioso administrativo
 
2016年10月13日「ONA16」参加報告会
2016年10月13日「ONA16」参加報告会2016年10月13日「ONA16」参加報告会
2016年10月13日「ONA16」参加報告会
 
лекция 1 переделка1
лекция 1 переделка1лекция 1 переделка1
лекция 1 переделка1
 

Mais de Cristina Luz

Crie chatbot com bluemix
Crie chatbot com bluemix Crie chatbot com bluemix
Crie chatbot com bluemix Cristina Luz
 
Crie chatbot com bluemix
Crie chatbot com bluemixCrie chatbot com bluemix
Crie chatbot com bluemixCristina Luz
 
Crie seu bot do zero
Crie seu bot do zeroCrie seu bot do zero
Crie seu bot do zeroCristina Luz
 
Por que devemos usar site responsivo.
Por que devemos usar site responsivo. Por que devemos usar site responsivo.
Por que devemos usar site responsivo. Cristina Luz
 
Por que devemos usar site responsivo.
Por que devemos usar site responsivo. Por que devemos usar site responsivo.
Por que devemos usar site responsivo. Cristina Luz
 
O que aprendi com WordPress
O que aprendi com WordPressO que aprendi com WordPress
O que aprendi com WordPressCristina Luz
 
Como As Apis Podem Lhe Ajudar A Criar Um MLP
Como As Apis Podem Lhe Ajudar A Criar Um MLPComo As Apis Podem Lhe Ajudar A Criar Um MLP
Como As Apis Podem Lhe Ajudar A Criar Um MLPCristina Luz
 
Aula bootstrap-carousel
Aula bootstrap-carouselAula bootstrap-carousel
Aula bootstrap-carouselCristina Luz
 

Mais de Cristina Luz (10)

Crie chatbot com bluemix
Crie chatbot com bluemix Crie chatbot com bluemix
Crie chatbot com bluemix
 
Crie chatbot com bluemix
Crie chatbot com bluemixCrie chatbot com bluemix
Crie chatbot com bluemix
 
Crie seu bot do zero
Crie seu bot do zeroCrie seu bot do zero
Crie seu bot do zero
 
Chatbot
ChatbotChatbot
Chatbot
 
Por que devemos usar site responsivo.
Por que devemos usar site responsivo. Por que devemos usar site responsivo.
Por que devemos usar site responsivo.
 
Por que devemos usar site responsivo.
Por que devemos usar site responsivo. Por que devemos usar site responsivo.
Por que devemos usar site responsivo.
 
Landing Page
Landing PageLanding Page
Landing Page
 
O que aprendi com WordPress
O que aprendi com WordPressO que aprendi com WordPress
O que aprendi com WordPress
 
Como As Apis Podem Lhe Ajudar A Criar Um MLP
Como As Apis Podem Lhe Ajudar A Criar Um MLPComo As Apis Podem Lhe Ajudar A Criar Um MLP
Como As Apis Podem Lhe Ajudar A Criar Um MLP
 
Aula bootstrap-carousel
Aula bootstrap-carouselAula bootstrap-carousel
Aula bootstrap-carousel
 

Principais classes CSS para tabelas

  • 1.
  • 2. Para criação da tabela, precisa usar a classe .table <table class = "table" > ... </ Table> Atenção: utilizar table-responsiva <div class = "table-responsiva" > <table class = "table" > ... </ table> </ div>
  • 3.  fileiras listradas Use .table-striped para adicionar zebra-striping em qualquer linha (row ) de tabela dentro do <tbody>. <table class="table table-bordered"> ... </table>
  • 4.  Tabela contornada Adicionar .table-bordered para as fronteiras em todos os lados da tabela e células. <table class="table table-bordered"> ... </table>
  • 5.  Linhas com Hover Adicionar .table-hover para permitir que um estado de foco em linhas de tabela dentro de um <tbody> . <table class = "table table-hover" > ... </ table>
  • 6.  Tabela compacta <table class="table table-condensed"> ... </table>
  • 7.  Use contextual para adicionar cor nas tabelas e nas linhas (rows) ou nas celulas individual. Class Description .active Aplica-se a cor de foco para uma linha ou célula em particular .success Indica uma ação bem-sucedida ou positivo .info Indica uma alteração informativa neutra ou ação .warning Indica um aviso de que pode precisar de atenção .danger Indica uma ação perigosa ou potencialmente negativo
  • 8.
  • 9.  O texto marcado  O texto excluído
  • 10.  Texto sublinhado  texto pequeno  Ultiliza small para dizer que 85% do tamanho do elemento do pai.
  • 11. <p class = "text-esquerda" > texto alinhado à esquerda. </ p> <p class = "text-center" > Centro de texto alinhado. </ p> <p class = "text-right" > texto alinhado à direita. </ p> <p class = "text-justify" > texto justificado. </ p> <p class = "text-nowrap" > Nenhum texto envoltório. </ p>
  • 12.
  • 13.
  • 14.