O atributo colspan em HTML especifica o número de colunas que uma célula deve abranger. Ele permite que uma única célula da tabela ocupe a largura de mais de uma célula ou coluna. Ele fornece a mesma funcionalidade de “mesclar célula” em um programa de planilha como o Excel.
Uso: pode ser usado com os elementos <td> e <th> ao criar uma tabela HTML .
 

Valores de atributo: contém um valor, ou seja, um número que especifica o número de colunas que uma célula deve abranger. 

  • <td>: O atributo colspan quando usado com a tag <td> determina o número de células padrão que deve abranger. 
    Sintaxe: 
<td colspan = "value">table content...</td>

O valor especifica o número de colunas que a célula preenche. O valor deve ser um número inteiro. 
Exemplo: 
 

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML colspan Attribute</title>
    <style>
      
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 6px;
            text-align:center;
        }
  
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h2>HTML colspan Attribute</h2>
        <table>
            <tr>
                <th>Name</th>
                <th>Expense</th>
            </tr>
            <tr>
                <td>Arun</td>
                <td>$10</td>
            </tr>
            <tr>
                <td>Priya</td>
                <td>$8</td>
            </tr>
  
            <!-- The last row -->
            <tr>
                <!-- This td will span two columns, that is a 
                single column will take up the space of 2 -->
                <td colspan="2">Sum: $18</td>
            </tr>
        </table>
    </center>
</body>
  
</html>

Saída: 
 

colspan

  • <th>: O atributo colspan quando usado com a tag <th> determina o número de células de cabeçalho que deve abranger. 
    Sintaxe: 
<th colspan = "value">table content...</th>

O valor especifica o número de colunas que a célula preenche. O valor deve ser um número inteiro. 
Exemplo: 

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML colspan Attribute</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 6px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h2>HTML colspan Attribute</h2>
  
        <table>
            <tr>
                <th colspan="2">Expense</th>
            </tr>
  
            <tr>
                <td>Arun</td>
                <td>$10</td>
            </tr>
  
            <tr>
                <td>Priya</td>
                <td>$8</td>
            </tr>
        </table>
    </center>
</body>
  
</html>

Saída: 

colspan

Navegadores suportados: Os navegadores suportados pelo atributo colspan estão listados abaixo:  

  • Google Chrome
  • Internet Explorer
  • Raposa de fogo
  • Ópera
  • Safári

HTML é a base das páginas da web, é usado para o desenvolvimento de páginas da web por meio da estruturação de sites e aplicativos da web. Você pode aprender HTML desde o início, seguindo este tutorial de HTML e os exemplos de HTML .