cefet_front_end

HTML parte 3

Tabelas

---

Na última aula… (1/4)

• Tags de importância: <strong>, <em>, <mark>, <del> e <ins>
• Listas numeradas (<ol>) e não-numeradas (<ul>)
• Podemos criar hiperlinks com o elemento <a href="caminho-do-recurso">nome</a>
  • Link interno da página referenciando o id do elemento:

    <a href="#banda-calypso">Ir para banda Calypso</a>
    ...
    <h2 id="banda-calypso">Calypso</a>
    

---

Na última aula… (2/4)

• Mais sobre hiperlinks:
  • Link para email: <a href="mailto:hasan@cefetmg.br">Me mande emails</a>
  • O atributo target para abrir uma página em outra aba

    <a href="http://www.pudim.com.br" target="_blank">Site legal</a>
    

• Alguns elementos são inline e outros são block

  block

  • fazem quebra de linha (e.g., <blockquote>, <p> etc.)

  inline

  • não fazem quebra de linha (e.g, <q>, <strong> etc.)

---

Na última aula… (3/4)

• Formato de uma regra CSS
  • Regra: conjunto de declarações aplicadas em alguém
  • Seletor: a quem se aplica uma regra
  • Declaração: um par de <propriedade, valor>
• Estilizando elementos um a um utilizando o seu id e o seletor iniciando com #

---

Na última aula… (4/4)

• Colocação de bordas por meio da propriedade border, ou então border-width, border-style e border-color

  Exemplo prático

  

• Para centralizar imagens:

  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  

---

Hoje veremos

1. Tabelas simples
2. Tabelas completas
3. Estilizando tabelas

---

Tabelas

• Nesta aula iremos:
  • fazer a estrutura desta tabela via HTML
  • estilizar esta tabela via CSS

---

O que uma tabela possui?

• Que partes compõem uma tabela?
  • Linhas e colunas, sendo:
    • uma linha com o cabeçalho
    • última linha com o rodapé
  • Legenda
• Em HTML, utilizamos tags para indicar os elementos de uma tabela

---

Tabelas simples

Linhas e células

• Elementos:
  • <table></table>
  • <tr></tr>
  • <td></td> e <th></th>

---

Tags básicas de uma Tabela

• Tabelas são criadas com as tags:
  • <table>...</table>
  • <tr>...</tr>, linha da tabela
  • <td></td>, célula de dados
  • <th></th>, célula do cabeçalho
• A tabela inicia-se com <table> e finaliza com </table>
• Cada linha possui a tag <tr> correspondente, finalizada com </tr>
• A tag <td>...</td> armazena os dados de uma célula da tabela
  • Para o cabeçalho, ao invés de <td>, utiliza-se a tag <th>
• As tags <td> e <th> devem estar dentro de uma linha (<tr>)

---

Repare que, por padrão, as células <th> ficam em negrito

---

Mesclando células horizontais e verticais

<table>
  <tr>
    <th colspan="2">Pessoas</th>
  </tr>
  <tr>
    <td>2005046102</td>
    <td>Epaminondas</td>
  </tr>
</table>

• colspan="X" faz com que aquela célula ocupe X colunas
  • Para mesclar células “para baixo”, usamos rowspan="Y", onde Y é o número de linhas que a célula vai ocupar
• Exemplos: de colspan e de rowspan (clique para ver)

---

A tabela do nosso exemplo

OBS: Como ainda não alteramos o estilo, ainda não há borda

---

Tabelas completas

Cabeçalho, Corpo e Rodapé

• Elementos:
  • <caption>...</caption>
  • <thead>...</thead>
  • <tbody>...</tbody>
  • <tfoot>...</tfoot>

---

Tag caption para colocar legenda

• Coloca uma legenda na tabela:

  <table>
    <caption>Quadro 01: Alunos Matriculados</caption> <!--  aqui  -->
    <tr>
      <th>Matrícula</th><th>Nome</th>
    </tr>
    <tr>
      <td>201792829293</td><td>Alice Fernandez</td>
    </tr>
  </table>
  

  • Exemplo

---

Tabela do nosso exemplo (com caption)

OBS: Como ainda não alteramos o estilo, ainda não há borda

---

Tags de cabeçalho, corpo e rodapé da tabela

<table>
  <caption>Gastos em janeiro</caption>
  <thead> <!-- cabeçalho -->
    <tr>
      <th>Descrição</th><th>Valor</th>
    </tr>
  </thead>
  <tbody> <!-- corpo -->
    <tr>
      <td>Alimentação</td><td>300,00</td>
    </tr>
    <tr>
      <td>Transporte</td><td>100,00</td>
    </tr>
  </tbody>
  <tfoot> <!-- rodapé -->
      <tr>
        <td>Total</td><td>400,00</td>
      </tr>
  </tfoot>
</table>

• Exemplo no jsfiddle
• <thead>, <tbody> e <tfoot> devem marcar as linhas que compõem o corpo, o cabeçalho e o rodapé
  • Útil para:
    • aplicarmos estilos diferentes no corpo, cabeçalho e rodapé
    • impressão: se a tabela for maior que a página, o cabeçalho aparecerá em todas as páginas

---

Tabela do nosso exemplo (completa)

OBS: chegou a hora de estilizar!

---

Estilizando tabelas

Deixando-as mais atrativas

• Colocando bordas
• Propriedade de largura: width
• Margem e padding
• A propriedade border-collapse em tabelas
• Fontes: font-size, font-style, font-weight e text-decoration

---

Colocando bordas

• A propriedade border é um atalho: border-width, border-style e border-color
  • Exemplo (os dois são equivalentes):

    p {
      border-width: 1px;    /* largura de 1 pixel */
      border-style: solid;  /* borda toda colorida */
      border-color: red;    /* cor vermelha */
    }
    

    p {  /* preferimos esta forma, que é mais sucinta */
      border: 1px solid red;
    }
    

---

Bordas

• De forma similar, podemos exibir apenas a borda do topo, direita, abaixo ou esquerda
• Para isso, usamos: border-top, border-right, border-bottom e border-left

  • p {
      border-top: 1px solid red;
      border-bottom: 2px dotted blue;
    }
    

    Sou o mestre das bordas!

• Também podemos usar a forma mais extensa. Por exemplo, border-top-width, border-top-style e border-top-color definem, respectivamente, a largura, o estilo e a cor da borda do topo

---

Colocando bordas na tabela

Ao adicionar a borda nas células de uma tabela o resultado ficaria assim ➡️:

td {
    border: 1px solid black;
  }

• Para mudarmos isso, adicionamos border-collapse: collapse à regra CSS da tabela:

  td {
    border: 1px solid black;
  }
  table {
    border-collapse: collapse;
  }

  • Este é o comportamento desejado praticamente sempre para as bordas

---

Margem e Padding

padding

• Espaçamento interno, da borda para dentro

border

• Tamanho da borda

margin

• Espaçamento externo, da borda para fora

---

Margem e Padding - Exemplo

• Todo elemento pode ter:
  1. padding (esp. interno)
  2. uma borda
  3. margin (esp. externo)

• Versão sem atalho ou com:

  margin-top: 12px;
  margin-right: 3px;
  margin-bottom: 6px;
  margin-left: 9px;
  
  margin: 12px 3px 6px 9px;
  /*
   ordem: ⬆️  ➡️  ⬇️  ⬅️
   (tipo um relojinho)
  */
  

  • Mesmo vale para padding
• Na vertical, as margens colapsam:
  • Margem: max(cima, baixo)

---

Largura dos elementos

• Podemos especificar a largura dos elementos block por meio da propriedade width

    p {
      width: 260px;
    }
  

Observação: não é possível definir largura de elementos inline. Esses elementos possuem exatamente a largura necessária para apresentar seu conteúdo

---

Outras propriedades CSS para texto

font-size

• Define o tamanho da fonte, ex: 18px

font-weight

• Define a espessura da fonte
• Valores: normal , lighter , bold , bolder ou um número representando sua espessura

font-style

• Define o estilo da fonte
• Valores: normal e italic

text-decoration

• Sublinha, risca ou coloca um risco acima do texto:
• Valores: none (nenhum), underline (sublinhado), overline (acima do texto), line-through (riscado)

---

Estilizando a tabela do nosso exemplo

---

Referências

1. Capítulos 13 do livro