SlideShare uma empresa Scribd logo
1 de 11
Baixar para ler offline
HTML




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Tabelas
   • Criando tabelas
   • Mesclando linhas/colunas
   • Formatação de tabelas




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Criando Tabelas
   • Uma tabela é formada por linhas e colunas
        Linha




                     Coluna




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Criando Tabelas
   • Para criar a tabela anterior segue código:
   <table>
   <tr>
       <td> .... </td>
       <td> .... </td>
       <td> .... </td>
   </tr>
   <tr>
       <td> .... </td>
       <td> .... </td>
       <td> .... </td>
   </tr>
   </table>



MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Criando Tabelas
   • Analisando o código anterior temos:
      – Cirando a tabela: <table>
      – Criando a linha: <tr>
      – Criando coluna: <td>

      Sabendo isso, quantas linhas e colunas temos
       no código a seguir?



MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
<table>
   <tr>
       <td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td>
   </tr>
   <tr>
       <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td>
   </tr>
   <tr>
       <td> Dentista </td> <td> Academia </td><td> Curso </td>
       <td>Leitura</td>
   </tr>
   <tr>
       <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td>
   </tr>
   <tr>
       <td> Dentista </td> <td> Academia </td><td> Curso </td>
       <td>Leitura</td>
   </tr>
   <tr>
       <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td>
   </tr>
   </table>



MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
LINHAS




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
<table>
   <tr>
       <td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td>
   </tr>
   <tr>
       <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td>
   </tr>
   <tr>
       <td> Dentista </td> <td> Academia </td><td> Curso </td>
       <td>Leitura</td>
   </tr>
   <tr>
       <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td>
   </tr>
   <tr>
       <td> Dentista </td> <td> Academia </td><td> Curso </td>
       <td>Leitura</td>
   </tr>
   <tr>
       <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td>
   </tr>
   </table>



MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Colunas




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
<table>
   <tr>
       <td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td>
   </tr>
   <tr>
       <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td>
   </tr>
   <tr>
       <td> Dentista </td> <td> Academia </td><td> Curso </td>
       <td>Leitura</td>
   </tr>
   <tr>
       <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td>
   </tr>
   <tr>
       <td> Dentista </td> <td> Academia </td><td> Curso </td>
       <td>Leitura</td>
   </tr>
   <tr>
       <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td>
   </tr>
   </table>



MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Criando Tabelas
   • A tabela possui 5 linhas com 4 colunas em
     cada linha




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS

Mais conteúdo relacionado

Destaque

Empreendedorismo - você já teve uma ideia
Empreendedorismo - você já teve uma ideiaEmpreendedorismo - você já teve uma ideia
Empreendedorismo - você já teve uma ideiaGuto Xavier
 
Imagens digitais
Imagens digitaisImagens digitais
Imagens digitaisGuto Xavier
 
livro-grandes-marcas-grandes-negocios
livro-grandes-marcas-grandes-negocioslivro-grandes-marcas-grandes-negocios
livro-grandes-marcas-grandes-negociosGuto Xavier
 
Revisitando Local Storage
Revisitando Local StorageRevisitando Local Storage
Revisitando Local StorageGuto Xavier
 
Internet aula 3 social media
Internet aula 3   social mediaInternet aula 3   social media
Internet aula 3 social mediaGuto Xavier
 
Estratégias de escablabilidade para serviços online
Estratégias de escablabilidade para serviços onlineEstratégias de escablabilidade para serviços online
Estratégias de escablabilidade para serviços onlineGuto Xavier
 
Banco de Dados - Trabalho de Tauan Silva
Banco de Dados - Trabalho de Tauan SilvaBanco de Dados - Trabalho de Tauan Silva
Banco de Dados - Trabalho de Tauan SilvaGuto Xavier
 
HTML - Cores Fontes Parágrafos
HTML - Cores Fontes ParágrafosHTML - Cores Fontes Parágrafos
HTML - Cores Fontes ParágrafosGuto Xavier
 
Wordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorWordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorRenato Vieira
 
Como criar um blog - Usando o wordpress no seu próprio domínio
Como criar um blog - Usando o wordpress no seu próprio domínioComo criar um blog - Usando o wordpress no seu próprio domínio
Como criar um blog - Usando o wordpress no seu próprio domínioBeto Tercette
 

Destaque (20)

Internet aula 2
Internet aula 2Internet aula 2
Internet aula 2
 
Windows 2
Windows 2Windows 2
Windows 2
 
Empreendedorismo - você já teve uma ideia
Empreendedorismo - você já teve uma ideiaEmpreendedorismo - você já teve uma ideia
Empreendedorismo - você já teve uma ideia
 
Briefing
BriefingBriefing
Briefing
 
Imagens digitais
Imagens digitaisImagens digitais
Imagens digitais
 
livro-grandes-marcas-grandes-negocios
livro-grandes-marcas-grandes-negocioslivro-grandes-marcas-grandes-negocios
livro-grandes-marcas-grandes-negocios
 
Revisitando Local Storage
Revisitando Local StorageRevisitando Local Storage
Revisitando Local Storage
 
Windows
WindowsWindows
Windows
 
Fireworks
FireworksFireworks
Fireworks
 
HTML - Imagens
HTML - ImagensHTML - Imagens
HTML - Imagens
 
Javascript
JavascriptJavascript
Javascript
 
Internet aula 3 social media
Internet aula 3   social mediaInternet aula 3   social media
Internet aula 3 social media
 
Sistema tst
Sistema tstSistema tst
Sistema tst
 
DOS - Comandos
DOS - ComandosDOS - Comandos
DOS - Comandos
 
Estratégias de escablabilidade para serviços online
Estratégias de escablabilidade para serviços onlineEstratégias de escablabilidade para serviços online
Estratégias de escablabilidade para serviços online
 
Banco de Dados - Trabalho de Tauan Silva
Banco de Dados - Trabalho de Tauan SilvaBanco de Dados - Trabalho de Tauan Silva
Banco de Dados - Trabalho de Tauan Silva
 
CD - 1
CD - 1CD - 1
CD - 1
 
HTML - Cores Fontes Parágrafos
HTML - Cores Fontes ParágrafosHTML - Cores Fontes Parágrafos
HTML - Cores Fontes Parágrafos
 
Wordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorWordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do Publicador
 
Como criar um blog - Usando o wordpress no seu próprio domínio
Como criar um blog - Usando o wordpress no seu próprio domínioComo criar um blog - Usando o wordpress no seu próprio domínio
Como criar um blog - Usando o wordpress no seu próprio domínio
 

Semelhante a HTML - Tabelas

html-lists-tables.ppt
html-lists-tables.ppthtml-lists-tables.ppt
html-lists-tables.pptArifKamal36
 
Html basics 7 table
Html basics 7 tableHtml basics 7 table
Html basics 7 tableH K
 
Lecture 5 html table
Lecture 5 html tableLecture 5 html table
Lecture 5 html tableAliMUSSA3
 
Deepika Mittal , BCA Third Year
Deepika Mittal , BCA Third YearDeepika Mittal , BCA Third Year
Deepika Mittal , BCA Third Yeardezyneecole
 
Bringing Email Development from 1996 to 2016
Bringing Email Development from 1996 to 2016Bringing Email Development from 1996 to 2016
Bringing Email Development from 1996 to 2016ZURB
 
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small ScreensFlipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small ScreensStephanie Hobson
 
12th Computer practical pattern (sci & com both)
12th Computer practical pattern (sci & com both)12th Computer practical pattern (sci & com both)
12th Computer practical pattern (sci & com both)Sabiha Saiyed
 
Tables and forms with HTML, CSS
Tables and forms with HTML, CSS  Tables and forms with HTML, CSS
Tables and forms with HTML, CSS Yaowaluck Promdee
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
 
Web Construction/CSS/Spry
Web Construction/CSS/SpryWeb Construction/CSS/Spry
Web Construction/CSS/SpryDarren Jackson
 
Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1Lemmon12
 
Bootstrap cheatsheet
Bootstrap cheatsheetBootstrap cheatsheet
Bootstrap cheatsheetmp3 mask
 
Railway res form
Railway res formRailway res form
Railway res formsuma Latha
 
Adding tables to your web page
Adding tables to your web pageAdding tables to your web page
Adding tables to your web pagecachs_computing
 

Semelhante a HTML - Tabelas (20)

html-lists-tables.ppt
html-lists-tables.ppthtml-lists-tables.ppt
html-lists-tables.ppt
 
Html basics 7 table
Html basics 7 tableHtml basics 7 table
Html basics 7 table
 
Lecture 5 html table
Lecture 5 html tableLecture 5 html table
Lecture 5 html table
 
html file
html filehtml file
html file
 
Deepika Mittal , BCA Third Year
Deepika Mittal , BCA Third YearDeepika Mittal , BCA Third Year
Deepika Mittal , BCA Third Year
 
Bringing Email Development from 1996 to 2016
Bringing Email Development from 1996 to 2016Bringing Email Development from 1996 to 2016
Bringing Email Development from 1996 to 2016
 
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small ScreensFlipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
 
12th Computer practical pattern (sci & com both)
12th Computer practical pattern (sci & com both)12th Computer practical pattern (sci & com both)
12th Computer practical pattern (sci & com both)
 
Tables and forms with HTML, CSS
Tables and forms with HTML, CSS  Tables and forms with HTML, CSS
Tables and forms with HTML, CSS
 
Horario
HorarioHorario
Horario
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Web I - 03 - Tables
Web I - 03 - TablesWeb I - 03 - Tables
Web I - 03 - Tables
 
Web Construction/CSS/Spry
Web Construction/CSS/SpryWeb Construction/CSS/Spry
Web Construction/CSS/Spry
 
Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1
 
Bootstrap cheatsheet
Bootstrap cheatsheetBootstrap cheatsheet
Bootstrap cheatsheet
 
HTML
HTMLHTML
HTML
 
Lec 3
Lec 3Lec 3
Lec 3
 
Railway res form
Railway res formRailway res form
Railway res form
 
Xml and xslt
Xml and xsltXml and xslt
Xml and xslt
 
Adding tables to your web page
Adding tables to your web pageAdding tables to your web page
Adding tables to your web page
 

Mais de Guto Xavier

Criatividade devpira
Criatividade   devpiraCriatividade   devpira
Criatividade devpiraGuto Xavier
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelGuto Xavier
 
Técnicas de Apresentação em Público
Técnicas de Apresentação em PúblicoTécnicas de Apresentação em Público
Técnicas de Apresentação em PúblicoGuto Xavier
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informaçãoGuto Xavier
 
WEB - Guia_do_Ilust
WEB - Guia_do_IlustWEB - Guia_do_Ilust
WEB - Guia_do_IlustGuto Xavier
 
O uso da cor no ambiente de trabalho_Uma ergonomia da Percepcao
O uso da cor no ambiente de trabalho_Uma ergonomia da PercepcaoO uso da cor no ambiente de trabalho_Uma ergonomia da Percepcao
O uso da cor no ambiente de trabalho_Uma ergonomia da PercepcaoGuto Xavier
 
HTML - Introdução
HTML - IntroduçãoHTML - Introdução
HTML - IntroduçãoGuto Xavier
 

Mais de Guto Xavier (9)

Criatividade devpira
Criatividade   devpiraCriatividade   devpira
Criatividade devpira
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
 
Técnicas de Apresentação em Público
Técnicas de Apresentação em PúblicoTécnicas de Apresentação em Público
Técnicas de Apresentação em Público
 
Pitch de vendas
Pitch de vendasPitch de vendas
Pitch de vendas
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
WEB - Guia_do_Ilust
WEB - Guia_do_IlustWEB - Guia_do_Ilust
WEB - Guia_do_Ilust
 
O uso da cor no ambiente de trabalho_Uma ergonomia da Percepcao
O uso da cor no ambiente de trabalho_Uma ergonomia da PercepcaoO uso da cor no ambiente de trabalho_Uma ergonomia da Percepcao
O uso da cor no ambiente de trabalho_Uma ergonomia da Percepcao
 
HTML - Listas
HTML - ListasHTML - Listas
HTML - Listas
 
HTML - Introdução
HTML - IntroduçãoHTML - Introdução
HTML - Introdução
 

HTML - Tabelas

  • 1. HTML MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 2. Tabelas • Criando tabelas • Mesclando linhas/colunas • Formatação de tabelas MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 3. Criando Tabelas • Uma tabela é formada por linhas e colunas Linha Coluna MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 4. Criando Tabelas • Para criar a tabela anterior segue código: <table> <tr> <td> .... </td> <td> .... </td> <td> .... </td> </tr> <tr> <td> .... </td> <td> .... </td> <td> .... </td> </tr> </table> MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 5. Criando Tabelas • Analisando o código anterior temos: – Cirando a tabela: <table> – Criando a linha: <tr> – Criando coluna: <td> Sabendo isso, quantas linhas e colunas temos no código a seguir? MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 6. <table> <tr> <td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td> </tr> <tr> <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </tr> <tr> <td> Dentista </td> <td> Academia </td><td> Curso </td> <td>Leitura</td> </tr> <tr> <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </tr> <tr> <td> Dentista </td> <td> Academia </td><td> Curso </td> <td>Leitura</td> </tr> <tr> <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </tr> </table> MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 7. LINHAS MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 8. <table> <tr> <td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td> </tr> <tr> <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </tr> <tr> <td> Dentista </td> <td> Academia </td><td> Curso </td> <td>Leitura</td> </tr> <tr> <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </tr> <tr> <td> Dentista </td> <td> Academia </td><td> Curso </td> <td>Leitura</td> </tr> <tr> <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </tr> </table> MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 9. Colunas MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 10. <table> <tr> <td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td> </tr> <tr> <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </tr> <tr> <td> Dentista </td> <td> Academia </td><td> Curso </td> <td>Leitura</td> </tr> <tr> <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </tr> <tr> <td> Dentista </td> <td> Academia </td><td> Curso </td> <td>Leitura</td> </tr> <tr> <td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td> </tr> </table> MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 11. Criando Tabelas • A tabela possui 5 linhas com 4 colunas em cada linha MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS