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 (

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

<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.

Relacionados HTML Cursos

HTML para Iniciantes

htmlweb-development

Construa um Jogo da Velha Web

javascriptweb-development

Criando um Jogo Web Whack-a-Mole