HTML - Tabelas

1,013 views

Published on

  • Be the first to comment

  • Be the first to like this

HTML - Tabelas

  1. 1. HTMLMICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  2. 2. Tabelas • Criando tabelas • Mesclando linhas/colunas • Formatação de tabelasMICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  3. 3. Criando Tabelas • Uma tabela é formada por linhas e colunas Linha ColunaMICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  4. 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. 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. 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. 7. LINHASMICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  8. 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. 9. ColunasMICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  10. 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. 11. Criando Tabelas • A tabela possui 5 linhas com 4 colunas em cada linhaMICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS

×