Introdução

Na aula anterior vimos o potencial das anchor tags <a> na criação de hiperligações de páginas web, construção do fluxo de navegação de páginas com endereços URL ou a  construção de menus com ligações de endereços na mesma página.

Relembrando…

A anchor tag ou tag âncora possui o atributo href que indica o destino do link

<a href=”https://example.com”>Website</a>

Podemos também criar outras páginas e construir um menu de navegação referenciando-as nas tags âncora como no exemplo abaixo organizando o conteúdo com a tag apropriada <nav>:

<nav>
   <ul>
        <li><a class="active" href="#menu 1">menu 1</a></li>
        <li><a href="#menu 2">menu 2</a></li> 
        <li><a href="#menu 3">menu 3</a></li>
 	<li><a href="#menu4">menu4</a></li>
   </ul> 
</nav>

Agora que já revisamos o conteúdo vamos agregar ainda mais conhecimento com um novo tema : Tabelas.

Belas… Tabelas

O que são?

Tabelas são estruturas em duas dimensões compostas por linhas e colunas muito utilizadas para apresentar dados de forma organizada.

Conforme a imagem apresentada, podemos ver a estrutura básica de uma tabela. Assim, é importante saber que cada elemento de uma tabela é denominado “célula”. Vamos ver um exemplo simples de tabela em seguida.

Esta tabela como podemos notar possui

Construindo tabelas com HTML

A tag usada para criar tabelas com html é tablet></table>. Dentro dela incluímos todos os elementos que compõem nossa tabela, ou seja, as células da tabela. Assim sendo, os elementos de uma tabela consistem em outras tags que podem ser utilizadas como veremos a seguir.  

A tag <tr> representa uma linha a tag <td> representa uma célula. Assim a construção da colunas dependerá da quantidade de células inclusas em uma linha.

Tags Estruturadas da Tabela

Caso queira incluir células que representam títulos, ganhando um destaque em relação às demais células basta incluir a tag <th> Nossa construção ficará assim

<table>
	<tr> 
		<td> </td>
                <td> </td>
                <td> </td>
	</tr>
</table>

Além dessas tags bases podemos também utilizar outras para estruturar melhor as tabelas. São elas:

 <thead></thead> – Para representar o cabeçalho da tabela, título;

<tbody></tbody> – Esta tag representa o corpo da tabela;

<tfoot></tfoot> – Representa o rodapé da tabela.

Transpondo para nossa estrutura base fica assim:

<table>
    <thead>
	<tr> 
		<th> título 1</th>
                <th> título 2 </th>
                <th> título 3 </th>
	</tr>
</thead>
<tbody>
   
        <tr>
    	  <td>Body1 Linha1</td>
    	  <td>Body2 Linha1</td>
	  <td>Body3 Linha1</td>
        </tr>
        <tr>
    	  <td>Body1 Linha2</td>
    	  <td>Body2 Linha2</td>
	  <td>Body3 Linha2</td>
    </tr>
    <tr>
    	  <td>Body1 Linha3</td>
    	  <td>Body2 Linha3</td>
	  <td>Body3 Linha3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
          <td>Foot1</td>
          <td>Foot2</td>
          <td>Foot3</td>
     </tr>
   </tfoot>
</table>

Aviso!

Vale ressaltar que nem todos os navegadores compreendem direito essas tags, em especial a tag <tfoot>. Portanto, a memos que tenha um objetivo específico, mantenha as tags <thead> e <tbody> e faça o teste ou evite utilizar a tag <tfoot>.

Vamos praticar?

Crie uma página HTML em um arquivo chamado Tabelas.html que contenha uma tabela com 4 linhas e 3 colunas. As colunas deverão conter os títulos, nome, idade e peso, e nas linhas será o local que você irá preencher com as informações acima.

Bons estudos e Obrigada !

Lista de exercÍcios extras: https://drive.google.com/drive/folders/19dYZWvp4t5iuy_ZZP5babHzSbV0Q78tT?usp=sharing