Tabelas HTML
As tabelas HTML permitem que os desenvolvedores da Web organizem os dados em linhas e colunas.
Exemplo
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Definir uma tabela HTML
Uma tabela em HTML consiste em células de tabela dentro de linhas e colunas
Exemplo
Uma tabela HTML simples:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Células da Tabela
Cada célula da tabela é definida por um
<td>e uma </td>tag.
td
significa dados da tabela.
Tudo entre <td>e </td>são o conteúdo da célula da tabela.
Exemplo
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Observação: os elementos de dados da tabela são os contêineres de dados da tabela.
Eles podem conter todos os tipos de elementos HTML; texto, imagens, listas, outras tabelas, etc.
Linhas da tabela
Cada linha da tabela começa com a
<tr>e termina com uma </tr>tag.
tr
significa linha da tabela.
Exemplo
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Você pode ter quantas linhas quiser em uma tabela, apenas certifique-se de que o número de células seja o mesmo em cada linha.
Nota: Há momentos em que uma linha pode ter menos ou mais células que outra. Você aprenderá sobre isso em um capítulo posterior.
Cabeçalhos de tabela
Às vezes você quer que suas células sejam cabeçalhos, nesses casos use a
<th>tag em vez da
<td>tag:
Exemplo
Seja a primeira linha os cabeçalhos da tabela:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Por padrão, o texto nos <th>elementos está em negrito e centralizado, mas você pode alterar isso com CSS.
Exercícios HTML
Tags de tabela HTML
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .