Este é um post disponível para assinantes MVPVocê também pode acessá-lo através de Créditos DevMedia. Clique aqui para saber mais!
downloadVideo: Conhecendo Tabelas – Curso web sites com Bootstrap – 5
Nesta aula vamos criar tabelas utilizando a formatação adequada do Twitter Bootstrap, bem como aprenderemos como utilizar os diversos recursos disponíveis no framework para deixar as nossas tabelas com uma aparência mais agradável.
Tempo: 18:41 min
Descrição: Nesta aula vamos criar tabelas utilizando a formatação adequada do Twitter Bootstrap, bem como aprenderemos como utilizar os diversos recursos disponíveis no framework para deixar as nossas tabelas com uma aparência mais agradável. Aprenderemos como aplicar os estilos prontos do framework Twitter Bootstrap para melhor a visualização dos dados, bem como faremos a criação de uma página de exemplo para futuras consultas e que servirá como material de apoio.
Tecnologias e Recursos: Adobe Dreamweaver, Google Chrome, Twitter Bootstrap, css, framework, tabelas, table
Jaison Dairon Ebertz Schmidt
Bacharel em Ciência da Computação pela Universidade de Passo Fundo
Web Designer da Universidade de Passo Fundo
Trabalha a aproximadamente 12 anos com tecnologia Web, em especial tecnologias Adobe (Flash, Dreameaver e Fireworks)
Twitter: www.twit...
O que você achou deste post?
14 COMENTÁRIOS
Antonio Bizerra Loiola Filho
Muito bom este curso, já vi todos os posts e estou aguardando os próximos.
[há +1 mês] -
Responder
Wesley Yamazack
Olá Antonio, esta semana já teremos novas videoaulas. Estamos preparando as mesmas pra poder publicar.
Bom curso!
Um abraço
Bom curso!
Um abraço
[há +1 mês] -
Responder
Wesley Yamazack
Olá Antonio, apenas pra te avisar, colocamos mais videoaulas do curso, partes 6,7,8,9 e 10.
Um abraço e bom curso.
Um abraço e bom curso.
[há +1 mês] -
Responder
Paulo Roberto Dos Santos
Ola amigo jaison, gostaria de te parabenizar por este novo trabalho e tambem pedir que enviasse os modelos feitos junto com as video aulas mesmo que nao tenha terminado o curso completo,pois baixei as video aulas e não veio os arquivos que voce menciona enviar.
Desde ja agradeço e muito obrigado pois estas videos estão me ajudando um absurdo.
Abraço
Desde ja agradeço e muito obrigado pois estas videos estão me ajudando um absurdo.
Abraço
[há +1 mês] -
Responder
Wesley Yamazack
Olá Paulo, você chegou a abaixar o arquivo na opção "codigo fonte"? Pois nele temos o arquivo para download. Já na opção "download" temos apenas a videoaula.
Um abraço
Um abraço
[há +1 mês] -
Responder
Paulo Roberto Dos Santos
opa wesley muito grato pela informação
[há +1 mês] -
Responder
Wesley Yamazack
Legal Paulo, conte sempre conosco!
Um abraço.
Um abraço.
[há +1 mês] -
Responder
Bernardo Effting
Excelente curso, tem me ajudado muito.
Estou com problemas ao aplicar o table num gridview
não consigo alinhar as colunas pela direita
<asp:BoundField DataField="codigo" HeaderText="Código">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
este codigo acima nao alinha o campo pela direita quando eu coloco isso na gridview:
CssClass="table table-striped table-bordered table-condensed"
Estou com problemas ao aplicar o table num gridview
não consigo alinhar as colunas pela direita
<asp:BoundField DataField="codigo" HeaderText="Código">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
este codigo acima nao alinha o campo pela direita quando eu coloco isso na gridview:
CssClass="table table-striped table-bordered table-condensed"
[há +1 mês] -
Responder
[autor]
Jaison Dairon Ebertz Schmidt
Olá Bernardo, não tenho muito conhecimento de bootstrap com asp.net, mas você pode usar o firefox com a extensçao "firebug" ativada e desta forma ver como o texto está ficando centralizado, ou seja, se é alguma classe do bootstrap ou algum atributo style. Abraço!
[há +1 mês] -
Responder
Bernardo Effting
Mas você teria algum exemplo simples, somente html com bootstrap, com o uso de tables com alinhamento de colunas pela direita?
Obrigado
Obrigado
[há +1 mês] -
Responder
Bernardo Effting
Vou ser mais específico. Veja essa html completo com bootstrap:
Se você notar, quando eu uso um "class" numa td, nao alinha, o bootstrap nao permite. Se usar o usar diretamente um "style" no td ele permite.
Gostaria de saber se é possivel usar um "class" nos "td" ao inves de ficar colocando style em cada um:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.alinha-dir { text-align: right; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<table width="100%" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Dados 1</th>
<th>Dados 2</th>
<th>Dados 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="alinha-dir">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<td style="text-align: right">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<td>Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Se você notar, quando eu uso um "class" numa td, nao alinha, o bootstrap nao permite. Se usar o usar diretamente um "style" no td ele permite.
Gostaria de saber se é possivel usar um "class" nos "td" ao inves de ficar colocando style em cada um:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.alinha-dir { text-align: right; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<table width="100%" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Dados 1</th>
<th>Dados 2</th>
<th>Dados 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="alinha-dir">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<td style="text-align: right">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<td>Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
[há +1 mês] -
Responder
[autor]
Jaison Dairon Ebertz Schmidt
Olá Bernardo, podemos fazer um teste.
Você deve ter criado um arquivo de estilo.css ou ainda um arquivo personalizado de estilo, mas enfim, após a inclusão do bootstrap.css ou bootstrap.min.css adicione uma classe desse formato
.table-condensed td { text-align:right; }
Veja bem, é um teste! não tenho certeza que funcione. Me da retorno se não deu. Abraço!
Você deve ter criado um arquivo de estilo.css ou ainda um arquivo personalizado de estilo, mas enfim, após a inclusão do bootstrap.css ou bootstrap.min.css adicione uma classe desse formato
.table-condensed td { text-align:right; }
Veja bem, é um teste! não tenho certeza que funcione. Me da retorno se não deu. Abraço!
[há +1 mês] -
Responder
Bernardo Effting
resolvi colocando um "id" para coluna que eu pretendia alinhar e declarando o css pelo id:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
#alinha-dir { text-align: right; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<table width="100%" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Dados 1</th>
<th>Dados 2</th>
<th>Dados 3</th>
</tr>
</thead>
<tbody>
<tr>
<td id="alinha-dir">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<td id="alinha-dir">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<td id="alinha-dir">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
#alinha-dir { text-align: right; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<table width="100%" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Dados 1</th>
<th>Dados 2</th>
<th>Dados 3</th>
</tr>
</thead>
<tbody>
<tr>
<td id="alinha-dir">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<td id="alinha-dir">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<td id="alinha-dir">Valor 1</td>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
[há +1 mês] -
Responder
[autor]
Jaison Dairon Ebertz Schmidt
Também é uma solução, Bernanrdo, normalmente em se tratando de CSS sempre tem mais de uma solução. Abraço!
[há +1 mês] -
Responder
Cursos relacionados
Publicidade
