Para continuarmos ensinando.
Obrigado!







Para ter seu site de forma profissional

Contate-nos


×
Bobmello.com
bootstrap  6.638 Componentes e Classes - JumbotronComponentes e Classes - WellComponentes e Classes - BackgroundComponentes e Classes - Close IconEstilos de Botões - Buttons StylesBotões - SizesBotões - CheckboxBotões - checkbox com pre checkedDropdowns - ButtonsGrid System - Grid com uma coluna para todos dispositivosGrid System - Grid com duas colunas para todos dispositivosTipografia - Formatando textoTabelas - Criando tabelaListas - Criando listaForm - Criando form VerticalImagem - Imagem ResponsivaIcones - Icone em botõesNavBar - NavBar EstaticaBreadcrumbs e PaginaçãoLabels e BadgesProgress BarPrimeira página com Bootstrap.Cabeçalho do bootstrap no html, onde colocar
bobmello.com Bobmello.com

Tabelas - Criando tabela : : : : Bom dia!

Postado em: 25/06/2017 às 12:59:15 PM

Vote neste post

Avaliação 5.00 de 5.00


Total de Votos 1

Classificação

5
80% Complete (danger) 100.00%
1
4
80% Complete (danger) 0.00%
0
3
80% Complete (danger) 0.00%
0
2
80% Complete (danger) 0.00%
0
1
80% Complete (danger) 0.00%
0
Criando tabela

Como Aparecerá na Tela

Exemplo tabela simples
Linha Nome Sobrenome Email
1 João da Silva js@mail.com
2 Pedro Carvalho pc@mail.com
3 José Pinheiro jp@mail.com

Código Fonte

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6. <meta name="viewport" content="width=device-width, initial-scale=1">  
  7. <title>Exemplo tabela simples</title>  
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
  10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. <style type="text/css">  
  12.     .exemplo{  
  13.         margin: 20px;  
  14.     }  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div class="exemplo">  
  19.     <table class="table">  
  20.         <thead>  
  21.             <tr>  
  22.                 <th>Linha</th>  
  23.                 <th>Nome</th>  
  24.                 <th>Sobrenome</th>  
  25.                 <th>Email</th>  
  26.             </tr>  
  27.         </thead>  
  28.         <tbody>  
  29.             <tr>  
  30.                 <td>1</td>  
  31.                 <td>João</td>  
  32.                 <td>da Silva</td>  
  33.                 <td>js@mail.com</td>  
  34.             </tr>  
  35.             <tr>  
  36.                 <td>2</td>  
  37.                 <td>Pedro</td>  
  38.                 <td>Carvalho</td>  
  39.                 <td>pc@mail.com</td>  
  40.             </tr>  
  41.             <tr>  
  42.                 <td>3</td>  
  43.                 <td>José</td>  
  44.                 <td>Pinheiro</td>  
  45.                 <td>jp@mail.com</td>  
  46.             </tr>  
  47.         </tbody>  
  48.     </table>  
  49. </div>  
  50. </body>  
  51. </html>     

Bobmello.com

  • Voltar


    • Veja também:

  • Link Relacionado

    • Comentários:

    Tabelas - Criando tabela

    Não há comentários no momento, seja o primeiro à comentar

    Regras básicas

     

  • Os comentarios podem conter elogios ou criticas
    • Porem não serão tolerados agressões verbais e palavras de baixo calão.

  • Direcionamento dos comentarios
    • Os comentarios devem abster-se unicamente ao post em questão.

  • Da aprovação dos comentarios
    • Todos comentarios serão aprovados, elogios ou criticas, desde que sigam as normas estabelecidas.

  • Comentarios mostrados
    • Seram mostrados sempre os 20 últimos comentários, esse limite é para que a página não fique poluida com excesso de comentários.

  • Obrigado a todos
    • Comentem.

  • bobmello-ADM

    • Deixe seu comentário

    Preencha os campos abaixo:














  • Voltar