Tabela Colspan e Rowspan em HTML

Este post discutirá HTML Table Colspan & Rowspan com exemplos relevantes . Este post contém muitas informações que você pode usar como uma ferramenta de aprendizado.

Os atributos colspan e rowspan são usados em tabelas HTML para mesclar várias células em uma única célula horizontal ou verticalmente, respectivamente.

Atributo colspan: Este atributo especifica o número de colunas que uma célula deve abranger. Por exemplo, se você definir colspan=”2″ para uma célula, ela se estenderá por duas colunas.
Atributo rowspan: Este atributo especifica o número de linhas que uma célula deve abranger.

Observação: não há restrição sobre quantas linhas e colunas as células podem abranger em uma tabela HTML .

Índice-

Tabela Colspan e Rowspan em HTML:

NOME

ABRIL

2023

FESTA
FESTA

Tabela HTML - Rowspan

Ao especificar o atributo rowspan , você pode fazer uma célula abranger várias linhas:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Brand/Model</th>
<th>Type</th>
<th>Year</th>
</tr>
<tr>
<td rowspan="2">Trek Emonda</td>
<td>Road</td>
<td>2021</td>
</tr>
<tr>
<td>Race</td>
<td>-</td>
</tr>
<tr>
<td>Specialized Roubaix</td>
<td>Road</td>
<td>2022</td>
</tr>
<tr>
<td>Giant Trance</td>
<td>Mountain</td>
<td>2021</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

IMPORTANTE: atribuir um valor ao atributo rowspan indica o número de linhas a abranger.

Tabela HTML – Colspan

Colspan e rowspan da tabela HTML permitem que você tenha uma extensão de célula em várias colunas especificando o atributo colspan:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<thcolspan>Bike Information
<th>Type</th>
<th>Year</th>
</thcolspan></tr>
<tr>
<td colspan="2">Trek Emonda</td>
<td>Road</td>
<td>2021</td>
</tr>
<tr>
<td colspan="2">Specialized Roubaix</td>
<td>Road</td>
<td>2022</td>
</tr>
<tr>
<td colspan="2">Giant Trance</td>
<td>Mountain</td>
<td>2021</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

IMPORTANTE: atribuir um valor ao atributo colspan indica o número de colunas a serem expandidas .

Rowspan e colspan podem ser aplicados ao mesmo tempo. Aqui está um exemplo:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Company</th>
<th>Industry</th>
<th>Founded</th>
<th>HQ</th>
</tr>
<tr>
<td rowspan="2">Apple</td>
<td colspan="2">Technology</td>
<td>Cupertino, CA</td>
</tr>
<tr>
<td>1976</td>
<td>-</td>
</tr>
<tr>
<td>Microsoft</td>
<td>Technology</td>
<td>1975</td>
<td>Redmond, WA</td>
</tr>
<tr>
<td>Amazon</td>
<td>E-commerce</td>
<td>1994</td>
<td>Seattle, WA</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para aplicar estilos CSS a uma célula de tabela com atributos rowspan e/ou colspan , você pode usar o seletor <td> em seu CSS para direcionar as células:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<style>
td {
background-color: lightblue;
font-size: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">Cell with rowspan</td>
<td>Normal cell</td>
</tr>
<tr>
<td colspan="2">Cell with colspan</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tabela HTML Colspan e Benefícios Rowspan

Os atributos colspan e rowspan em tabelas HTML oferecem vários benefícios:

Usando colspan e rowspan , você pode mesclar células e criar layouts de tabela mais complexos. Isso pode ser especialmente útil ao trabalhar com grandes conjuntos de dados ou ao exibir dados que requerem formatação mais complexa.
Ao mesclar células com colspan e rowspan , você pode criar tabelas mais fáceis de ler e entender. Isso ocorre porque você pode agrupar dados relacionados e reduzir o número de células individuais necessárias para exibir informações.
O uso de colspan e rowspan pode ajudar a simplificar o código necessário para criar tabelas com layouts complexos. Ao reduzir o número de células necessárias, você também pode reduzir a quantidade de código HTML necessária, o que pode tornar seu código mais fácil de ler e manter.
Ao agrupar dados relacionados com colspan e rowspan , você pode tornar sua tabela mais acessível para usuários que dependem de tecnologias assistivas, como leitores de tela. Isso porque pode ajudar a reduzir a quantidade de informações que precisam ser transmitidas e tornar mais fácil para os usuários entender as relações entre diferentes pontos de dados.
Mesclar células com colspan e rowspan também pode ajudar a criar tabelas visualmente mais interessantes e atraentes. Reduzindo o número de células e criando blocos maiores de dados, você pode criar mais interesse visual e tornar sua tabela mais atraente visualmente.

Deixe sua reação abaixo como forma de agradecimento ou feedback para trazer melhorias a este site.

Nós valorizamos o seu feedback.

Tabela Colspan e Rowspan em HTML

Tabela HTML - Rowspan

Example:

Tabela HTML – Colspan

Example:

Example:

Example:

Tabela HTML Colspan e Benefícios Rowspan

Sentindo entediado?