Tags relacionadas à Tabela

Neste artigo, explicamos as tags relacionadas à tabela.

Isto explica como descrever tabelas e legendas de tabelas em HTML, juntamente com exemplos.

YouTube Video

Tags relacionadas à Tabela

Tag <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• A tag <table> é usada para criar uma tabela que organiza e exibe dados em linhas e colunas.

  A tag <table> organiza visualmente os dados e cria tabelas com múltiplas linhas e colunas. As linhas são definidas com a tag <tr>, as células de cabeçalho com a tag <th>, e as células de dados com a tag <td>.

• Você pode personalizar o estilo e o layout da tabela usando CSS.

Tag <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• A tag <tr> é usada para definir linhas em uma tabela.

  A tag <tr> é usada para criar cada linha de uma tabela, contendo células (<td> ou <th>).

• Cada linha pode conter múltiplas células, formando a estrutura geral da tabela.

Tags <th> e <td>

1<th>Header 1</th>
2<td>Data 1</td>

• A tag <th> define a célula de cabeçalho de uma tabela. Normalmente usado em linhas de cabeçalho, o conteúdo das células é em negrito e centralizado.
• A tag <td> define uma célula de dados padrão de tabela, que exibe dados regulares da tabela.

Atributos colspan e rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan e rowspan são atributos usados quando células da tabela abrangem várias colunas ou linhas.

• O atributo colspan permite que uma célula abranja várias colunas.
• O atributo rowspan permite que uma célula se estenda por múltiplas linhas.

Tags <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• A tag <thead> é usada para definir a seção de cabeçalho de uma tabela. Ela normalmente contém os cabeçalhos das colunas.

  A tag <thead> está posicionada no topo da tabela, definindo os títulos ou cabeçalhos das colunas. Isso ajuda a distinguir claramente as seções de dados.

• A tag <tbody> define a seção do corpo da tabela. Ela contém as linhas de dados.

  A tag <tbody> contém o corpo principal dos dados da tabela. Ela está posicionada entre as linhas delimitadas pelas tags <thead> e <tfoot>.

• A tag <tfoot> define a parte do rodapé da tabela, que inclui totais ou notas.

  A tag <tfoot> está localizada no final da tabela e é usada para exibir totais ou outras anotações. É especialmente útil ao resumir ou mostrar totais para grandes conjuntos de dados.

Tags <caption> e <colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• A tag <caption> adiciona uma legenda (cabeçalho) para tornar o conteúdo da tabela mais claro. Ela geralmente é colocada no topo da tabela e serve para resumir o conteúdo geral da tabela.

• A tag <colgroup> agrupa colunas dentro de uma tabela e é usada para aplicar estilos ou layouts. Você pode especificar cores de fundo ou larguras para colunas específicas incluindo a tag <col>.

Exemplo de tabela

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• A tag <table> é usada para criar uma tabela que exibe dados em linhas e colunas.

• A tag <thead> agrupa as linhas de cabeçalho da tabela. Ela geralmente contém tags <th>, que servem como cabeçalhos.

• A tag <tbody> agrupa o conteúdo principal da tabela. Ela geralmente contém linhas de dados compostas por tags <td>.

• A tag <tfoot> agrupa as linhas do rodapé da tabela. Ela é adequada para exibir totais ou notas.

• A tag <colgroup> agrupa as colunas de uma tabela e é usada para aplicar estilos a elas como um todo.

• A tag <caption> adiciona uma legenda ou título à tabela, facilitando para os usuários a compreensão do conteúdo da tabela.

• O atributo colspan permite que uma célula abranja várias colunas.

• O atributo rowspan permite que uma célula se estenda por múltiplas linhas.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video