Mesclando Linhas e Colunas
Parte da seção Fundamentals do Journey de HTML da Coddy. Lição 50 de 60.
Em HTML, você pode fazer com que as células de uma tabela ocupem várias linhas ou colunas usando os atributos rowspan e colspan. Esses atributos permitem criar layouts de tabela mais complexos mesclando células.
O atributo colspan é usado para especificar o número de colunas que uma célula deve abranger. Ele é adicionado à tag <td> ou <th> da célula que você deseja expandir.
Veja um exemplo de como usar colspan:
<table border="1">
<tr>
<th colspan="2">Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>Neste exemplo, a célula de cabeçalho com o texto "Nome" se estende por duas colunas. Isso é útil para criar um cabeçalho que abrange várias colunas. Veja como ele fica:
O atributo rowspan é usado para especificar o número de linhas que uma célula deve abranger. Ele também é adicionado à tag <td> ou <th> da célula que você deseja expandir.
Aqui está um exemplo de como usar rowspan:
<table border="1">
<tr>
<th>Employee</th>
<th>Shift</th>
</tr>
<tr>
<td rowspan="2">Alex</td>
<td>Morning</td>
</tr>
<tr>
<td>Evening</td>
</tr>
</table>Aqui, rowspan é usado para mostrar que Alex trabalha nos turnos da manhã e da noite sem repetir o nome.
Você pode usar colspan e rowspan na mesma tabela para criar layouts complexos. Lembre-se apenas de ajustar o número de células em cada linha adequadamente para acomodar as células mescladas.
Desafio
FácilCrie um documento HTML que inclua uma table com células que se estendem por várias linhas e colunas. A table deve ter a seguinte estrutura:
- Uma linha da table (
<tr>) com uma célula de cabeçalho (<th>) que se estende por três colunas e contém o texto"Student Report". - Outra linha da table (
<tr>) com uma célula de cabeçalho (<th>) que diz"Name", uma célula de cabeçalho (<th>) que diz"Subject"e uma célula de cabeçalho (<th>) que diz"Grade". - Outra linha da table (
<tr>) com uma célula de dados (<td>) que diz"John Doe", uma célula de dados (<td>) que diz"Math"e uma célula de dados (<td>) que diz"A". - Outra linha da table (
<tr>) com uma célula de dados (<td>) que se estende por duas linhas e contém o texto"Jane Smith", uma célula de dados (<td>) que diz"Science"e uma célula de dados (<td>) que diz"B". - Uma linha final da table (
<tr>) com uma célula de dados (<td>) que diz"History"e uma célula de dados (<td>) que diz"A".
Experimente você mesmo
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- Escreva o código aqui -->
</table>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentals
1Fundamentos do HTML
O que é HTML?Estrutura Básica do HTMLTags e ElementosAninhamento e Fechamento de TagsComentários em HTML7Página de Perfil Pessoal
Visão Geral do ProjetoSeção de Cabeçalho
Foto de PerfilSeção Sobre MimLinks Sociais10Tabelas
Fundamentos de TabelasAdicionando LegendasMesclando Linhas e ColunasRecapitulação - Tabelas2Texto e Formatação
TítulosParágrafosQuebras de LinhaTexto em Negrito e ItálicoNegrito e Itálico NovamenteRecapitulação - Formatação8Formulários e Inputs Parte 1
Fundamentos de FormuláriosInputs de TextoAtributos de InputCampo de SenhaLabels para InputsRecapitulação - Formulário Básico11Página de Inscrição de Evento
Visão Geral do ProjetoSeção de CabeçalhoSeção de Detalhes do EventoFormulário de InscriçãoSeção de RodapéPratique por conta própria: Playground de Web