Linha de Tabela HTML: Dominando as Estruturas de Tabela

Introdução

As tabelas podem ser usadas para apresentar dados em um formato estruturado. O componente básico de qualquer tabela é um elemento de linha de tabela () que define uma linha de células. As linhas de tabela devem ser incluídas dentro de um elemento de tabela (). Neste laboratório, aprenderemos como criar linhas de tabela HTML.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criando uma Estrutura de Tabela HTML

Para criar uma tabela HTML, primeiro precisamos definir a estrutura da tabela. Comece criando um arquivo HTML chamado index.html. Adicione o seguinte código ao seu arquivo:

<!doctype html>
<html>
  <head>
    <title>My Table</title>
  </head>

  <body>
    <table>
      <tr>
        <th>Header Cell 1</th>
        <th>Header Cell 2</th>
      </tr>

      <tr>
        <td>Data Cell 1</td>
        <td>Data Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Neste código, criamos uma tabela HTML com duas linhas e duas colunas. A primeira linha contém duas células de cabeçalho (

<tr>
  <td>Data Cell 3</td>
  <td>Data Cell 4</td>
</tr>

Agora, a tabela tem três linhas, com cada linha contendo duas células.

Estilizando as Linhas da Tabela

Podemos adicionar estilos às linhas da tabela usando CSS. Adicione o seguinte estilo ao elemento <head> para adicionar uma cor de fundo às linhas pares:

<style>
  tr:nth-child(even) {
    background-color: lightgray;
  }
</style>

Este código adicionará a cor de fundo lightgray a cada segunda linha da tabela.

Mesclando Linhas da Tabela

Podemos mesclar duas ou mais linhas adjacentes em uma única linha usando o atributo rowspan. Por exemplo, digamos que queremos mesclar as duas primeiras linhas em uma única linha. Substitua o primeiro elemento <tr> pelo seguinte código:

<tr>
  <th rowspan="2">Header Cell 1</th>
  <th>Header Cell 2</th>
</tr>

O atributo rowspan="2" na primeira célula de cabeçalho irá mesclar as duas primeiras linhas em uma única linha.

Criando Cabeçalhos de Células da Tabela

Podemos usar o elemento <th> para criar células de cabeçalho na tabela. Células de cabeçalho são tipicamente usadas para descrever o conteúdo das colunas. Para adicionar uma célula de cabeçalho à primeira coluna, substitua o primeiro elemento <td> na segunda linha pelo seguinte código:

<th scope="row">Data Cell 1</th>

O atributo scope="row" no elemento <th> especifica que esta é uma célula de cabeçalho para a primeira linha.

Resumo

Neste laboratório, aprendemos como criar linhas de tabela HTML e personalizar a tabela usando CSS. Também aprendemos como mesclar linhas adjacentes e criar células de cabeçalho na tabela. Com estas habilidades, você agora pode criar tabelas bonitas e estruturadas para suas páginas web.

) e a segunda linha contém duas células de dados (	). Adicionando Mais Linhas Para adicionar mais linhas à tabela, precisamos adicionar mais elementos

) e a segunda linha contém duas células de dados (

Adicionando Mais Linhas

Para adicionar mais linhas à tabela, precisamos adicionar mais elementos

à tabela. Por exemplo, para adicionar outra linha à tabela, adicione o seguinte código entre os elementos existentes: