HTML: tabelas
HTML:
tabelas
(Elivelto Ebermam)
Para inserir uma tabela em uma página web utilizamos a tag
<table>. Entretanto, para formar uma tabela são necessárias acrescentar mais
tags. Normalmente também utilizamos as tags <tr> , <td> e
<th> .
Tag <table>
A tag <table> é a base de uma tabela, ela atua como o
recipiente principal de uma tabela. Inicia-se com a abertura da tag
<table>, depois são inseridas as outras tags que compõem a tabela e por
último faz-se o fechamento da tag </table> . Isso pode ser observado na
imagem abaixo:
Tag <tr>
A tag <tr> é usada para inserir uma linha na tabela.
Inicia-se com a abertura da tag <tr>, insere as tags das células e faz-se
o fechamento da tag </tr>. Para cada nova linha é necessário repetir o
processo. Veja a imagem abaixo:
No trecho acima temos uma tabela com duas linhas. Agora temos
que inserir as células dentro de cada linha.
Tag <td>
A tag <td> é usada para inserir as células dentro das
linhas da tabela. Para inserir um célula inicia-se com a abertura da tag <td>,
insere o conteúdo da célula (texto, números ou outros elementos) e faz-se o
fechamento da tag </td>. A imagem abaixo ilustra a inserção de células em
uma tabela.
O trecho de código acima é de uma tabela de duas linhas por
duas colunas (2x2). Esse trecho de código gera uma tabela semelhante a essa:
|
Cidade
|
Baixo Guandu
|
|
Estado
|
ES
|
Tag <th>
Normalmente as tabelas tem cabeçalhos na primeira linha, ou
seja, a especificação do que é cada coluna na tabela. Por exemplo:
|
Esporte
|
Jogadores por
equipe
|
|
Futebol
|
11
|
|
Vôlei
|
6
|
Para gerarmos uma tabela como essa é recomendado usar a tag <th>
. O uso da tag é feito da mesma forma do que a tag <td>. Lembrando que, as
tags <th> são inseridas entre a abertura e o fechamento da primeira linha
da tabela. A figura abaixo ilustra isso.
Na prática
Os trechos de código apresentados acima não funcionam isoladamente
em documento html. Precisamos escrever o código completo da página:
<html>
<head>
<title> Tabelas em html </title>
</head>
<body>
<table>
<tr>
<th> Esporte </th>
<th> Jogadores por equipe </th>
</tr>
<tr>
<td> Futebol </td>
<td> 11 </td>
</tr>
<tr>
<td> Vôlei </td>
<td>
6 </td>
</tr>
</table>
</body>
</html>
Se inserirmos esse código no editor online do site W3Schools
[1], acessado através link https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
, temos o seguinte resultado:
Nota-se que na tabela gerada não são visíveis as bordas
separando as células. Em editores de texto como o word por exemplo, quando
inserimos uma tabela, ela possui linhas pretas entre as células. O aspecto
visual da tabela também pode ser modificado em uma página web, mas a linguagem
indicada para isso não é html e sim CSS. Essa linguagem será mostrada
futuramente.
Referências
[1] HTML Tutorial. W3Schools,
2020. Disponível em <https://www.w3schools.com/html/>.
Acesso em: 4 de mai. de 2020.
Comentários
Postar um comentário